From 66ae1998dc022d7140c3fb7b73fe2de86efdf806 Mon Sep 17 00:00:00 2001 From: yekalkan Date: Wed, 25 Apr 2018 14:39:36 +0300 Subject: [PATCH] Grid Tag Helper Refactor --- ...olTagHelper.cs => AbpColBreakTagHelper.cs} | 4 +- ...vice.cs => AbpColBreakTagHelperService.cs} | 2 +- .../TagHelpers/Grid/AbpColumnTagHelper.cs | 24 +- .../Grid/AbpColumnTagHelperService.cs | 75 ++++- .../TagHelpers/Grid/ColumnOrder.cs | 21 ++ .../TagHelpers/Grid/ColumnSize.cs | 20 ++ .../Pages/Components/Grids.cshtml | 297 +++++++----------- 7 files changed, 239 insertions(+), 204 deletions(-) rename src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/{AbpBreakColTagHelper.cs => AbpColBreakTagHelper.cs} (54%) rename src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/{AbpBreakColTagHelperService.cs => AbpColBreakTagHelperService.cs} (84%) create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs similarity index 54% rename from src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs rename to src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs index 0c8a1042ef..446f52e531 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs @@ -2,9 +2,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { - public class AbpBreakColTagHelper : AbpTagHelper + public class AbpColBreakTagHelper : AbpTagHelper { - public AbpBreakColTagHelper(AbpBreakColTagHelperService tagHelperService) + public AbpColBreakTagHelper(AbpColBreakTagHelperService tagHelperService) : base(tagHelperService) { diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs similarity index 84% rename from src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs rename to src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs index 20eb32e0dc..f414d7682d 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs @@ -5,7 +5,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { - public class AbpBreakColTagHelperService : AbpTagHelperService + public class AbpColBreakTagHelperService : AbpTagHelperService { public override void Process(TagHelperContext context, TagHelperOutput output) { diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs index 786dfe0b88..dc64feaeb2 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs @@ -4,12 +4,30 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { public class AbpColumnTagHelper : AbpTagHelper { - public string Size { get; set; } + // public string Size { get; set; } - public string Offset { get; set; } + public ColumnSize Size { get; set; } + + public ColumnSize SizeSm { get; set; } + + public ColumnSize SizeMd { get; set; } + + public ColumnSize SizeLg { get; set; } + + public ColumnSize SizeXl { get; set; } + + public ColumnSize Offset { get; set; } + + public ColumnSize OffsetSm { get; set; } + + public ColumnSize OffsetMd { get; set; } + + public ColumnSize OffsetLg { get; set; } + + public ColumnSize OffsetXl { get; set; } [HtmlAttributeName("order")] - public string ColumnOrder { get; set; } + public ColumnOrder ColumnOrder { get; set; } public VerticalAlign VAlign { get; set; } = VerticalAlign.Default; diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs index 379b13260e..bf530eb0b3 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -10,16 +10,60 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid public override void Process(TagHelperContext context, TagHelperOutput output) { output.TagName = "div"; + output.Attributes.AddClass("col"); + + ProcessSizeClass(output, TagHelper.Size, ""); + ProcessSizeClass(output, TagHelper.SizeSm, "-sm"); + ProcessSizeClass(output, TagHelper.SizeMd, "-md"); + ProcessSizeClass(output, TagHelper.SizeLg, "-lg"); + ProcessSizeClass(output, TagHelper.SizeXl, "-xl"); + + ProcessOffsetClass(output, TagHelper.Offset, ""); + ProcessOffsetClass(output, TagHelper.OffsetSm, "-sm"); + ProcessOffsetClass(output, TagHelper.OffsetMd, "-md"); + ProcessOffsetClass(output, TagHelper.OffsetLg, "-lg"); + ProcessOffsetClass(output, TagHelper.OffsetXl, "-xl"); - ProcessColClass(output); - ProcessVerticalAlign(output); ProcessColumnOrder(output); - ProcessOffset(output); + ProcessVerticalAlign(output); + } + + protected virtual void ProcessSizeClass(TagHelperOutput output, ColumnSize size, string breakpoint) + { + if (size == ColumnSize.Empty) + { + return; + } + + var classString = "col" + breakpoint; + + if (size != ColumnSize.C) + { + classString += "-" + size.ToString("D"); + } + + output.Attributes.AddClass(classString); } - protected virtual void ProcessColClass(TagHelperOutput output) + protected virtual void ProcessOffsetClass(TagHelperOutput output, ColumnSize size, string breakpoint) { - output.Attributes.AddClass("col" + (string.IsNullOrWhiteSpace(TagHelper.Size)? "" : "-" + TagHelper.Size)); + if (size == ColumnSize.Empty) + { + return; + } + + var classString = "offset" + breakpoint; + + if (size == ColumnSize.C) + { + classString += "-0"; + } + else + { + classString += "-" + size.ToString("D"); + } + + output.Attributes.AddClass(classString); } protected virtual void ProcessVerticalAlign(TagHelperOutput output) @@ -34,22 +78,27 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid protected virtual void ProcessColumnOrder(TagHelperOutput output) { - if (string.IsNullOrWhiteSpace(TagHelper.ColumnOrder)) + if (TagHelper.ColumnOrder == ColumnOrder.Empty) { return; } - output.Attributes.AddClass("order-" + TagHelper.ColumnOrder.ToLowerInvariant()); - } + var classString = "order-"; - protected virtual void ProcessOffset(TagHelperOutput output) - { - if (string.IsNullOrWhiteSpace(TagHelper.Offset)) + if (TagHelper.ColumnOrder == ColumnOrder.First) { - return; + classString += "first"; + } + else if (TagHelper.ColumnOrder == ColumnOrder.Last) + { + classString += "last"; + } + else + { + classString += TagHelper.ColumnOrder.ToString("D"); } - output.Attributes.AddClass("offset-" + TagHelper.Offset.ToLowerInvariant()); + output.Attributes.AddClass(classString); } } } \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs new file mode 100644 index 0000000000..89a58a2679 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs @@ -0,0 +1,21 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public enum ColumnOrder + { + Empty = 0, + C1 = 1, + C2 = 2, + C3 = 3, + C4 = 4, + C5 = 5, + C6 = 6, + C7 = 7, + C8 = 8, + C9 = 9, + C10 = 10, + C11 = 11, + C12 = 12, + First = 13, + Last = 14 + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs new file mode 100644 index 0000000000..747b0d600d --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs @@ -0,0 +1,20 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public enum ColumnSize + { + Empty = 0, + C1 = 1, + C2 = 2, + C3 = 3, + C4 = 4, + C5 = 5, + C6 = 6, + C7 = 7, + C8 = 8, + C9 = 9, + C10 = 10, + C11 = 11, + C12 = 12, + C = -1 + } +} \ No newline at end of file diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml index f7e6749187..309bcc7c63 100644 --- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml @@ -14,39 +14,29 @@
- One of two columns - One of two columns + One of two columns + One of two columns - One of three columns - One of three columns - One of three columns + One of three columns + One of three columns + One of three columns 
-<div class="container">
-    <div class="row">
-        <div class="col-sm-6">
-             One of two columns
-        </div>
-        <div class="col-sm-6">
-             One of two columns
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-4">
-              One of three columns
-        </div>
-        <div class="col-sm-4">
-             One of three columns
-        </div>
-        <div class="col-sm-4">
-             One of three columns
-        </div>
-    </div>
-</div>
+<abp-container>
+     <abp-row>
+         <abp-column size-sm="C6">One of two columns</abp-column>
+         <abp-column size-sm="C6">One of two columns</abp-column>
+     </abp-row>
+     <abp-row>
+         <abp-column size-sm="C4">One of three columns</abp-column>
+         <abp-column size-sm="C4">One of three columns</abp-column>
+         <abp-column size-sm="C4">One of three columns</abp-column>
+     </abp-row>
+</abp-container>
@@ -59,27 +49,21 @@ One of three columns One of three columns - + @* TODO: abp-column-break *@ One of three columns 
-<div class="container">
-    <div class="row">
-         <div class="col">
-             One of three columns
-         </div>
-         <div class="col">
-             One of three columns
-        </div>
-        <div class="w-100"></div>
-         <div class="col">
-             One of three columns
-        </div>
-    </div>
-</div>
+ <abp-container>
+     <abp-row>
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+         <abp-col-break /> @* TODO: abp-column-break *@
+         <abp-column>One of three columns</abp-column>
+     </abp-row>
+ </abp-container>
@@ -108,41 +92,23 @@ 
-<div class="container">
-     <div class="row align-items-start">
-        <div class="col">
-             One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-    </div>
-    <div class="row align-items-center">
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-    </div>
-    <div class="row align-items-end">
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-       <div class="col">
-        One of three columns
-        </div>
-    </div>
-</div>
+<abp-container>
+     <abp-row v-align="Start">
+        <abp-column>One of three columns</abp-column>
+        <abp-column>One of three columns</abp-column>
+        <abp-column>One of three columns</abp-column>
+     </abp-row>
+     <abp-row v-align="Center">
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+     </abp-row>
+     <abp-row v-align="End">
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+     </abp-row>
+ </abp-container>
@@ -161,19 +127,13 @@ 
-<div class="container">
-    <div class="row">
-        <div class="col align-self-start">
-            One of three columns
-        </div>
-        <div class="col align-self-center">
-            One of three columns
-        </div>
-        <div class="col align-self-end">
-             One of three columns
-        </div>
-    </div>
-</div>
+ <abp-container>
+    <abp-row>
+        <abp-column v-align="Start">One of three columns</abp-column>
+        <abp-column v-align="Center">One of three columns</abp-column>
+        <abp-column v-align="End">One of three columns</abp-column>
+     </abp-row>
+ </abp-container>
@@ -184,71 +144,51 @@
- One of three columns - One of three columns + One of three columns + One of three columns - One of three columns - One of three columns + One of three columns + One of three columns - One of three columns - One of three columns + One of three columns + One of three columns - One of three columns - One of three columns + One of three columns + One of three columns - One of three columns - One of three columns + One of three columns + One of three columns 
-<div class="container">
-    <div class="row justify-content-start">
-        <div class="col-4">
-             One of two columns
-         </div>
-         <div class="col-4">
-             One of two columns
-         </div>
-    </div>
-     <div class="row justify-content-center">
-        <div class="col-4">
-             One of two columns
-         </div>
-         <div class="col-4">
-             One of two columns
-         </div>
-    </div>
-     <div class="row justify-content-end">
-        <div class="col-4">
-             One of two columns
-         </div>
-         <div class="col-4">
-             One of two columns
-         </div>
-    </div>
-     <div class="row justify-content-around">
-         <div class="col-4">
-            One of two columns
-         </div>
-                 <div class="col-4">
-             One of two columns
-         </div>
-     </div>
-    <div class="row justify-content-between">
-        <div class="col-4">
-            One of two columns
-        </div>
-        <div class="col-4">
-             One of two columns
-        </div>
-    </div>
-</div>
+ <abp-container>
+    <abp-row h-align="Start">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+    <abp-row h-align="Center">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+    <abp-row h-align="End">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+        <abp-row h-align="Around">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+    <abp-row h-align="Between">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+ </abp-container>
@@ -260,42 +200,30 @@ First, but unordered - Second, but last - Third, but first + Second, but last + Third, but first First, but unordered - Second, but last - Third, but first + Second, but last + Third, but first 
-<div class="container">
-    <div class="row">
-        <div class="col">
-          First, but unordered
-        </div>
-        <div class="col order-12">
-            Second, but last
-        </div>
-        <div class="col order-1">
-             Third, but first
-         </div>
-    </div>
-    <div class="row">
-        <div class="col">
-          First, but unordered
-        </div>
-        <div class="col order-last">
-            Second, but last
-        </div>
-        <div class="col order-first">
-             Third, but first
-         </div>
-    </div>
-</div>
+ <abp-container>
+    <abp-row>
+        <abp-column> First, but unordered</abp-column>
+        <abp-column order="C12">Second, but last</abp-column>
+        <abp-column order="C1">Third, but first</abp-column>
+    </abp-row>
+    <abp-row>
+        <abp-column> First, but unordered</abp-column>
+        <abp-column order="Last">Second, but last</abp-column>
+        <abp-column order="First">Third, but first</abp-column>
+    </abp-row>
+ </abp-container>
@@ -304,32 +232,31 @@
- .col-md-4 - .col-md-4 .offset-md-4 + .col-md-4 .offset-md-4 - .col-md-3 .offset-md-3 - .col-md-3 .offset-md-3 + .col-md-3 .offset-md-3 + .col-md-3 .offset-md-3 - .col-md-6 .offset-md-3 + .col-md-6 .offset-md-3 
-<div class="row">
-     <div class="col-md-4">.col-md-4</div>
-     <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
-</div>
-<div class="row">
-    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
-    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
-</div>
-<div class="row">
-     <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
-</div>
+ <abp-row>
+    <abp-column> .col-md-4</abp-column>
+    <abp-column size-md="C4" offset-md="C4">.col-md-4 .offset-md-4</abp-column>
+ </abp-row>
+ <abp-row>
+    <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column>
+    <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column>
+ </abp-row>
+ <abp-row>
+    <abp-column size-md="C6" offset-md="C3">.col-md-6 .offset-md-3</abp-column>
+ </abp-row>