🆕 feat: add user-select-item template (#694)

* 🆕 feat: add user-select-item template * 💄 style: Update UI
masastack · May 14, 2024 · 728f1cf · 728f1cf
1 parent cc9637b
commit 728f1cf
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 34 deletions.
diff --git a/src/Masa.Stack.Components/RenderFragments.cs b/src/Masa.Stack.Components/RenderFragments.cs
@@ -0,0 +1,87 @@
+namespace Masa.Stack.Components;
+
+public static class RenderFragments
+{
+    public static RenderFragment UserSelectItem(
+        string? avatar,
+        string title1,
+        string? title2,
+        string? subtitle1,
+        string? subtitle2)
+    {
+        ArgumentNullException.ThrowIfNull(title1);
+
+        return builder =>
+        {
+            if (!string.IsNullOrWhiteSpace(avatar))
+            {
+                builder.OpenComponent<MListItemAvatar>(0);
+                builder.AddAttribute(1, nameof(MAvatar.Size), (StringNumber)40);
+                builder.AddAttribute(2, "ChildContent", (RenderFragment)(sb =>
+                {
+                    sb.OpenComponent<MImage>(0);
+                    sb.AddAttribute(1, "Src", avatar);
+                    sb.CloseComponent();
+                }));
+                builder.CloseComponent();
+            }
+
+            builder.OpenComponent<MListItemContent>(3);
+            builder.AddAttribute(4, "ChildContent", (RenderFragment)(sb =>
+            {
+                sb.OpenComponent<MListItemTitle>(0);
+                sb.AddAttribute(1, "Class", "");
+                sb.AddAttribute(2, "ChildContent", (RenderFragment)(title =>
+                {
+                    title.OpenElement(0, "span");
+                    title.AddAttribute(1, "Class", "subtitle2 emphasis2--text");
+                    title.AddContent(2, title1);
+                    title.CloseElement();
+
+                    if (!string.IsNullOrWhiteSpace(title2))
+                    {
+                        title.OpenComponent<MDivider>(2);
+                        title.AddAttribute(3, nameof(MDivider.Vertical), true);
+                        title.AddAttribute(4, nameof(MDivider.Style), "height: 12px;");
+                        title.AddAttribute(5, nameof(MDivider.Class), "mx-2 my-auto");
+                        title.CloseComponent();
+
+                        title.OpenElement(6, "span");
+                        title.AddAttribute(7, "Class", "regular2--text");
+                        title.AddContent(8, title2);
+                        title.CloseElement();
+                    }
+                }));
+                sb.CloseComponent();
+
+                if (!string.IsNullOrWhiteSpace(subtitle1))
+                {
+                    sb.OpenComponent<MListItemSubtitle>(3);
+                    sb.AddAttribute(4, "Class", " regular2--text");
+                    sb.AddAttribute(5, "Style", "font-weight: normal");
+                    sb.AddAttribute(6, "ChildContent", (RenderFragment)(subtitle =>
+                    {
+                        subtitle.OpenElement(0, "span");
+                        subtitle.AddContent(1, subtitle1);
+                        subtitle.CloseElement();
+
+                        if (!string.IsNullOrWhiteSpace(subtitle2))
+                        {
+                            subtitle.OpenComponent<MDivider>(2);
+                            subtitle.AddAttribute(3, nameof(MDivider.Vertical), true);
+                            subtitle.AddAttribute(4, nameof(MDivider.Style), "height: 12px;");
+                            subtitle.AddAttribute(5, nameof(MDivider.Class), "mx-2 my-auto");
+                            subtitle.CloseComponent();
+
+                            subtitle.OpenElement(6, "span");
+                            subtitle.AddContent(7, subtitle2);
+                            subtitle.CloseElement();
+                        }
+                    }));
+                    sb.CloseComponent();
+                }
+            }));
+            builder.CloseComponent();
+        };
+    }
+}
diff --git a/src/Masa.Stack.Components/Shared/IntegrationComponents/Users/SUserAutoComplete.razor b/src/Masa.Stack.Components/Shared/IntegrationComponents/Users/SUserAutoComplete.razor
@@ -27,28 +27,6 @@
                Clearable=Clearable
                PrependInnerIcon="mdi-magnify">
     <ItemContent Context="data">
-        <div class="d-flex py-2" style="height:48px;">
-            <MAvatar Size=24 Class="ma-auto">
-                <img src="@data.Item.Avatar" />
-            </MAvatar>
-            <div class="ma-auto ml-2">
-                <div class="d-flex">
-                    <span class="Body2 emphasis2--text">@data.Item.DisplayName</span>
-                    @if (string.IsNullOrEmpty(data.Item.DisplayName) is false && string.IsNullOrEmpty(data.Item.PhoneNumber) is false)
-                    {
-                        <div class="my-auto mx-2" style="width: 0px;height: 8px;border: 1px solid #E2E7F4;"></div>
-                    }
-                    <span class="btn emphasis2--text">@data.Item.PhoneNumber</span>
-                </div>
-                <div class="d-flex">
-                    <span class="overline regular3--text">@data.Item.Account</span>
-                    @if (string.IsNullOrEmpty(data.Item.Account) is false && string.IsNullOrEmpty(data.Item.Email) is false)
-                    {
-                        <div class="my-auto mx-2" style="width: 0px;height: 8px;border: 1px solid #E2E7F4;"></div>
-                    }
-                    <span class="overline regular3--text">@data.Item.Email</span>
-                </div>
-            </div>
-        </div>
+        @RenderFragments.UserSelectItem(data.Item.Avatar, data.Item.DisplayName, data.Item.PhoneNumber, data.Item.Account, data.Item.Email)
     </ItemContent>
 </SAutoComplete>
diff --git a/src/Masa.Stack.Components/wwwroot/css/app.css b/src/Masa.Stack.Components/wwwroot/css/app.css
@@ -1,6 +1,10 @@
 @import url(standard.css);
 @import url(pure-components.css);
 
+:root {
+    --ms-box-shadow-color: 112, 144, 176;
+}
+
 h1:focus {
     outline: none;
 }
@@ -729,15 +733,6 @@ body, .masa-stack-components {
     border-bottom-left-radius: 20px;
 }
 
-.masa-main .m-card {
-    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%) !important;
-    border-radius: 20px !important;
-}
-
-    .masa-main .m-card.line {
-        border-radius: 10px !important;
-    }
-
 .m-sheet-dialog .m-card {
     box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%) !important;
 }
@@ -918,8 +913,24 @@ body, .masa-stack-components {
     color: grey;
 }
 
-.m-sheet.m-card--hover:focus, .m-sheet.m-card--hover:hover {
-    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !important;
+.m-sheet.m-card {
+    border-radius: 20px;
+}
+
+.m-sheet.m-card:not(.m-sheet--outlined) {
+    box-shadow: none;
+}
+
+.m-sheet.m-card--hover:not(.m-sheet--outlined):focus, .m-sheet.m-card--hover:not(.m-sheet--outlined):hover {
+    box-shadow: 0 5px 5px -3px rgba(var(--ms-box-shadow-color),.2),0 8px 10px 1px rgba(var(--ms-box-shadow-color),.14),0 3px 14px 2px rgba(var(--ms-box-shadow-color),.12);
+}
+
+.m-pagination__item, .m-pagination__navigation {
+    box-shadow: 0 3px 1px -2px rgba(var(--ms-box-shadow-color),.2),0 2px 2px 0 rgba(var(--ms-box-shadow-color),.14),0 1px 5px 0 rgba(var(--ms-box-shadow-color),.12)
+}
+
+.m-pagination__item--active {
+    box-shadow: 0 2px 4px -1px rgba(var(--ms-box-shadow-color),.2),0 4px 5px 0 rgba(var(--ms-box-shadow-color),.14),0 1px 10px 0 rgba(var(--ms-box-shadow-color),.12);
 }
 
 .expansion-nav:not(.preview) {