Merge pull request #222 from anmcgrath/fix-select-and-text-wrap-styling

Fix select and text wrap styling

Author: anmcgrath

src/BlazorDatasheet/Edit/DefaultComponents/SelectEditorComponent.razor

@@ -7,13 +7,13 @@
 
 <input @bind="CurrentValue"
        @bind:event="oninput"
-       class="text-input"
+       class="bds-select-text-input"
        style="@Style; width: @(CellWidth - 2)px; height: @(CellHeight - 2)px;"
        @ref="InputRef"/>
-<div class="select-list">
+<div class="bds-select-list">
     @foreach (var val in _values)
     {
-        <div class="select-item @(val.Equals(_currentSelected) ? "active" : "")"
+        <div class="bds-select-item @(val.Equals(_currentSelected) ? "active" : "")"
              @onmouseup="() => SelectItem(val)">
             @val
         </div>

src/BlazorDatasheet/Edit/DefaultComponents/SelectEditorComponent.razor.css

@@ -1,33 +0,0 @@
-.text-input {
-    width: 100%;
-    border: none;
-    height: 100%;
-    box-sizing: border-box;
-}
-
-.text-input:focus {
-    outline: none;
-}
-
-.select-list {
-    min-width: 10rem;
-    z-index: 4;
-    border: var(--sheet-border-style);
-    background: var(--sheet-bg-color);
-    position: absolute;
-    overflow-y: auto;
-    color: var(--sheet-foreground-color);
-    display: block;
-    max-height: 7rem;
-    border-radius: 4px;
-}
-
-.select-item {
-    cursor: pointer;
-    padding: 0.1rem 0.1rem 0.1rem 0.2rem;
-}
-
-.select-item:hover,
-.select-item.active {
-    background: var(--selection-bg-color)
-}

src/BlazorDatasheet/Render/DefaultComponents/SelectRenderer.razor

@@ -4,11 +4,14 @@
 
 <div
     class="sheet-select-render"
-    style="display: flex; flex-direction: row; justify-content: space-between; width:@(Cell.Width)px; height: @(Cell.Height)px">
-    <div style="overflow: hidden;">
+    style="display: flex; 
+        flex-direction: row;
+        width:100%; 
+        height: 100%;">
+    <div style="overflow: hidden; text-align: inherit; flex-shrink: 0; flex-grow: 1;">
         @(Cell.Value?.ToString())
     </div>
-    <div style="margin-right: 8px;">
+    <div style="margin-right: 0; width: 16px;">
         <CaretButton OnPress="@BeginEdit"/>
     </div>
 </div>

src/BlazorDatasheet/Render/VisualCell.cs

@@ -149,7 +149,7 @@ private static string GetCellFormatStyleString(int row, int col, CellFormat? for
                 sb.AddStyle("align-items", "center");
         }
 
-        else if (format.TextWrap == TextWrapping.Wrap)
+        if (format.TextWrap == TextWrapping.Wrap)
         {
             sb.AddStyle("text-wrap", "wrap");
         }

src/BlazorDatasheet/Util/StyleBuilder.cs

@@ -4,7 +4,7 @@ namespace BlazorDatasheet.Util;
 
 public class StyleBuilder
 {
-    private StringBuilder _stringBuilder;
+    private readonly StringBuilder _stringBuilder;
 
     public StyleBuilder()
     {

src/BlazorDatasheet/wwwroot/sheet-styles.css

@@ -319,4 +319,38 @@
 
 .bds-sheet-dropper:hover{
     background: var(--selection-bg-color);
-}
+}
+
+.bds-select-text-input {
+    width: 100%;
+    border: none;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.bds-select-text-input:focus {
+    outline: none;
+}
+
+.bds-select-list {
+    min-width: 10rem;
+    z-index: 4;
+    border: var(--sheet-border-style);
+    background: var(--sheet-bg-color);
+    position: absolute;
+    overflow-y: auto;
+    color: var(--sheet-foreground-color);
+    display: block;
+    max-height: 7rem;
+    border-radius: 4px;
+}
+
+.bds-select-item {
+    cursor: pointer;
+    padding: 0.1rem 0.1rem 0.1rem 0.4rem;
+}
+
+.bds-select-item:hover,
+.bds-select-item.active {
+    background: var(--selection-bg-color)
+}

test/BlazorDatasheet.Test/Render/VisualCellTests.cs

@@ -0,0 +1,23 @@
+using BlazorDatasheet.Core.Data;
+using BlazorDatasheet.Core.Formats;
+using BlazorDatasheet.Render;
+using FluentAssertions;
+using NUnit.Framework;
+
+namespace BlazorDatasheet.Test.Render;
+
+public class VisualCellTests
+{
+    [Test]
+    public void Text_Wrap_Appears_With_Vertical_Format_Set()
+    {
+        var sheet = new Sheet(10, 10);
+        sheet.Cells["A1"]!.Format = new CellFormat()
+        {
+            VerticalTextAlign = TextAlign.Center,
+            TextWrap = TextWrapping.Wrap
+        };
+        var vc = new VisualCell(0, 0, sheet, 12);
+        vc.FormatStyleString.Should().Contain("text-wrap");
+    }
+}