Skip to main contentAzure DevOps
infsoft-dev
/
WPE Libraries
/
Repos
/
Commits
/
Sign in to your account
Sign in
WPE Libraries
Overview
ReposFilesCommitsBranchesTagsPull requests
Pipelines
edit component buttons
Browse Files
f8929d82
Simon Liebers
committed Sep 26, 2024
main
succeeded
Files
Details
6 changed files
WPE.App.Shared.BaseComponents
Pages
Buttons
ButtonActionImageTextBig.razor
+
ButtonActionImageTextBig.razor.css
+
ButtonText.razor
ButtonText.razor.css
ListenerComponents
SwipeListener.razor.js
WPE.App.Shared.BaseComponents.csproj
ButtonActionImageTextBig.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonActionImageTextBig.razor+37
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonActionImageTextBig.razor
View
Add comment 1 Plus  @using Infsoft.WPE.App.Shared.BaseComponents.Models.Text;
Add comment 2 Plus  @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Animations
Add comment 3 Plus  @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Text
Add comment 4 Plus  @using Infsoft.WPE.App.Shared.BaseComponents.Pages.Components
Add comment 5 Plus  
Add comment 6 Plus  @inherits TrackedStyleComponent
Add comment 7 Plus  
Add comment 8 Plus  @{
Add comment 9 Plus   string btnClass = "btn-action";
Add comment 10 Plus   btnClass += $" {Class}";
Add comment 11 Plus  }
Add comment 12 Plus  
Add comment 13 Plus  @* Figma Component: button/action - icon-text-big *@
Add comment 14 Plus  <div class="@btnClass" Style="@Style" @onclick="ClickAction">
Add comment 15 Plus   <img src="@Image" />
Add comment 16 Plus   <Text_Bold Type="TextType.TextXXS" Color="var(--color-grey-primary-darker)">
Add comment 17 Plus   <div class="text-wrapper">@Text</div>
Add comment 18 Plus   </Text_Bold>
Add comment 19 Plus  </div>
Add comment 20 Plus  
Add comment 21 Plus  @code {
Add comment 22 Plus   [Parameter, EditorRequired]
Add comment 23 Plus   public required string Text { get; set; }
Add comment 24 Plus  
Add comment 25 Plus   [Parameter, EditorRequired]
Add comment 26 Plus   public required string Image { get; set; }
Add comment 27 Plus  
Add comment 28 Plus   [Parameter]
Add comment 29 Plus   public EventCallback Click { get; set; }
Add comment 30 Plus  
Add comment 31 Plus   private async Task ClickAction()
Add comment 32 Plus   {
Add comment 33 Plus   await base.TrackClick(Text);
Add comment 34 Plus   await Click.InvokeAsync();
Add comment 35 Plus   }
Add comment 36 Plus  }
Add comment 37 Plus  
ButtonActionImageTextBig.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonActionImageTextBig.razor.css+41
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonActionImageTextBig.razor.css
View
Add comment 1 Plus  .btn-action {
Add comment 2 Plus   display: flex;
Add comment 3 Plus   height: 72px;
Add comment 4 Plus   min-width: 94.33px;
Add comment 5 Plus   padding: 13px 0px var(--font-size-text-xxs, 10px) 0px;
Add comment 6 Plus   flex-direction: column;
Add comment 7 Plus   justify-content: center;
Add comment 8 Plus   align-items: center;
Add comment 9 Plus   gap: 7px;
Add comment 10 Plus   flex-grow: 1;
Add comment 11 Plus   flex-basis: 0;
Add comment 12 Plus   flex-shrink: 0;
Add comment 13 Plus   border-radius: 4.4px;
Add comment 14 Plus   border: 1px solid var(--color-grey-secondary-29);
Add comment 15 Plus   background: var(--color-white-White-100, #FFF);
Add comment 16 Plus   cursor: pointer;
Add comment 17 Plus  }
Add comment 18 Plus  
Add comment 19 Plus   .btn-action > img {
Add comment 20 Plus   height: 24px;
Add comment 21 Plus   aspect-ratio: 1;
Add comment 22 Plus   mix-blend-mode: multiply;
Add comment 23 Plus   }
Add comment 24 Plus  
Add comment 25 Plus   .btn-action ::deep .text-wrapper {
Add comment 26 Plus   width: 100%;
Add comment 27 Plus   overflow: hidden;
Add comment 28 Plus   text-overflow: ellipsis;
Add comment 29 Plus   white-space: nowrap;
Add comment 30 Plus   }
Add comment 31 Plus  
Add comment 32 Plus   .btn-action:hover {
Add comment 33 Plus   border-color: var(--color-grey-primary-mid);
Add comment 34 Plus   transition: .2s;
Add comment 35 Plus   }
Add comment 36 Plus  
Add comment 37 Plus   .btn-action:active {
Add comment 38 Plus   border-color: var(--color-grey-primary-dark);
Add comment 39 Plus   transition: 0s;
Add comment 40 Plus   }
Add comment 41 Plus  
ButtonText.razor
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonText.razor-1+11
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonText.razor
View
Add comment 5 @inherits TrackedStyleComponent
Add comment 6
Add comment 7 <div class="@GetClass()" @onclick="OnClick">
Add comment 8 Minus   @if (HasLeftIcon && !String.IsNullOrEmpty(Icon))
Add comment 8 Plus   @if (HasLeftIcon)
Add comment 9 Plus   {
Add comment 10 Plus   if (!string.IsNullOrEmpty(Icon))
Add comment 9 11 {
Add comment 10 12 <i class="left-icon icon-@Icon" />
Add comment 11 13 }
Add comment 14 Plus   else if (!string.IsNullOrEmpty(ImageAsIcon))
Add comment 15 Plus   {
Add comment 16 Plus   <img src="@ImageAsIcon" />
Add comment 17 Plus   }
Add comment 18 Plus   }
Add comment 12 19 @if (Type == ButtonTextType.TextChevron || Type == ButtonTextType.Text || Type == ButtonTextType.IconText)
Add comment 13 20 {
Add comment 14 21 <Text_Bold Type="TextType.TextM">@GetTextFragment()</Text_Bold>
Add comment 41 48 public string Icon { get; set; } = "";
Add comment 42 49
Add comment 43 50 [Parameter]
Add comment 51 Plus   public string ImageAsIcon { get; set; } = "";
Add comment 52 Plus  
Add comment 53 Plus   [Parameter]
Add comment 44 54 public string IconRightOverride { get; set; } = string.Empty;
Add comment 45 55
Add comment 46 56 [Parameter]
ButtonText.razor.css
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonText.razor.css+6
/WPE.App.Shared.BaseComponents/Pages/Buttons/ButtonText.razor.css
View
Add comment 229 .btn-text.onorange:active {
Add comment 230 background: rgba(0, 0, 0, 0.20);
Add comment 231 }
Add comment 232 Plus  
Add comment 233 Plus   /*ImageAsIcon*/
Add comment 234 Plus   .btn-text > img {
Add comment 235 Plus   height: 16px;
Add comment 236 Plus   aspect-ratio: 1;
Add comment 237 Plus   }
Add comment 232 238
SwipeListener.razor.js
/WPE.App.Shared.BaseComponents/Pages/ListenerComponents/SwipeListener.razor.js+1
/WPE.App.Shared.BaseComponents/Pages/ListenerComponents/SwipeListener.razor.js
View
Add comment 1 import "./../../lib/hammerjs/hammer.min.js";
Add comment 2 Plus  
Add comment 2 3 export class SwipeListener {
Add comment 3 4 static init(objRef, wrapper) {
Add comment 4 5 var hammer = new Hammer.Manager(wrapper);
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj-1+1
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj
View
Add comment 15 <PackageIcon>icon.png</PackageIcon>
Add comment 16 <PackageReadmeFile>ReadMe.md</PackageReadmeFile>
Add comment 17 <PackageTags>WPE;Workplace Experience;Blazor;MAUI;infsoft</PackageTags>
Add comment 18 Minus   <Version>0.0.78</Version>
Add comment 18 Plus   <Version>0.0.79</Version>
Add comment 19 <WarningsAsErrors>RZ10012</WarningsAsErrors>
Add comment 20 </PropertyGroup>
Add comment 21