fix(Dashboard): added down arrow indicator on select controls

JBBianchi · JBBianchi · commit d5c842c56711 · 2022-11-03T16:52:12.000+01:00
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/ActionEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/ActionEditor.razor
@@ -37,7 +37,7 @@
                                 <tr>
                                     <td>Type</td>
                                     <td>
-                                        <select class="form-control bg-secondary text-white" title="The type of the action to perform" required @onchange="async e => await OnActionTypeChangedAsync(EnumHelper.Parse<ActionType>((string)e.Value!))">
+                                        <select class="form-select bg-secondary text-white" title="The type of the action to perform" required @onchange="async e => await OnActionTypeChangedAsync(EnumHelper.Parse<ActionType>((string)e.Value!))">
                                             <option value="@EnumHelper.Stringify(ActionType.Function)">@EnumHelper.Stringify(ActionType.Function)</option>
                                             <option value="@EnumHelper.Stringify(ActionType.Subflow)">@EnumHelper.Stringify(ActionType.Subflow)</option>
                                             <option value="@EnumHelper.Stringify(ActionType.Trigger)">@EnumHelper.Stringify(ActionType.Trigger)</option>
@@ -47,7 +47,7 @@
                                 <tr>
                                     <td>Retry policy</td>
                                     <td>
-                                        <select class="form-control" title="The retry policy associated to the action, if any">
+                                        <select class="form-select" title="The retry policy associated to the action, if any">
                         
                                         </select>
                                     </td>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/AuthenticationEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/AuthenticationEditor.razor
@@ -28,7 +28,7 @@
             <tr>
                 <td>Scheme</td>
                 <td>
-                    <select class="form-control bg-secondary text-white"
+                    <select class="form-select bg-secondary text-white"
                     @onchange="async e => await OnAuthenticationSchemeChangedAsync(EnumHelper.Parse<AuthenticationScheme>((string)e.Value!))">
                         @foreach(var scheme in Enum.GetValues<AuthenticationScheme>())
                         {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/AuthenticationSelector.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/AuthenticationSelector.razor
@@ -16,7 +16,7 @@
 
 @namespace Synapse.Dashboard
 
-<select class="form-control @CssClass" @onchange="OnStateSelectorValueChangedAsync">
+<select class="form-select @CssClass" @onchange="OnStateSelectorValueChangedAsync">
     @if(Selected == null)
     {
         <option disabled selected value> -- select an authentication -- </option>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventCollectionSelector.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventCollectionSelector.razor
@@ -16,7 +16,7 @@
 
 @namespace Synapse.Dashboard
 
-<select class="form-control @CssClass" multiple @onchange="OnStateSelectorValueChangedAsync">
+<select class="form-select @CssClass" multiple @onchange="OnStateSelectorValueChangedAsync">
     <option disabled selected="@(Selected == null || !Selected.Any())" value> -- select an event -- </option>
     @if(events != null)
     {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventSelector.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/EventSelector.razor
@@ -16,7 +16,7 @@
 
 @namespace Synapse.Dashboard
 
-<select class="form-control @CssClass" @onchange="OnStateSelectorValueChangedAsync">
+<select class="form-select @CssClass" @onchange="OnStateSelectorValueChangedAsync">
     <option disabled selected="@(Selected == null)" value> -- select an event -- </option>
     @if(events != null)
     {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/FunctionSelector.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/FunctionSelector.razor
@@ -16,7 +16,7 @@
 
 @namespace Synapse.Dashboard
 
-<select class="form-control @CssClass" @onchange="OnStateSelectorValueChangedAsync">
+<select class="form-select @CssClass" @onchange="OnStateSelectorValueChangedAsync">
     <option disabled selected="@(Selected == null)" value> -- select a function -- </option>
     @if(functions != null)
     {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/OutcomeEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/OutcomeEditor.razor
@@ -21,7 +21,7 @@
         <tr>
             <td>Type</td>
             <td>
-                <select class="form-control bg-secondary text-white" @onchange="OnOutcomeTypeChangedAsync">
+                <select class="form-select bg-secondary text-white" @onchange="OnOutcomeTypeChangedAsync">
                     <option value="@EnumHelper.Stringify(SwitchCaseOutcomeType.End)" selected="@(outcome?.Type == WorkflowOutcomeType.End)">End</option>
                     <option value="@EnumHelper.Stringify(SwitchCaseOutcomeType.Transition)" selected="@(outcome?.Type == WorkflowOutcomeType.Transition)">Transition</option>
                 </select>
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/SecretSelector.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/SecretSelector.razor
@@ -16,7 +16,7 @@
 
 @namespace Synapse.Dashboard
 
-<select class="form-control @CssClass" disabled="@Disabled" @onchange="OnStateSelectorValueChangedAsync">
+<select class="form-select @CssClass" disabled="@Disabled" @onchange="OnStateSelectorValueChangedAsync">
     <option disabled="@(Selected == null)" selected value> -- select a secret -- </option>
     @if(Secrets != null)
     {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditor.razor
@@ -41,7 +41,7 @@
                                 <tr>
                                     <td>Type</td>
                                     <td>
-                                        <select class="form-control bg-secondary text-white"
+                                        <select class="form-select bg-secondary text-white"
                                         @onchange="async e => await OnStateTypeChangedAsync(EnumHelper.Parse<StateType>((string)e.Value!))">
                                             @foreach(var type in Enum.GetValues<StateType>().OrderBy(v => v.ToString()))
                                             {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/SwitchStateEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateEditors/SwitchStateEditor.razor
@@ -23,7 +23,7 @@
              <tr>
                 <td>Type</td>
                 <td>
-                    <select class="form-control bg-secondary text-white"
+                    <select class="form-select bg-secondary text-white"
                     @onchange="async e => await OnSwitchStateTypeChangedAsync(EnumHelper.Parse<SwitchStateType>((string)e.Value!))">
                         @foreach(var type in Enum.GetValues<StateType>().OrderBy(v => v.ToString()))
                         {
diff --git a/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateSelector.razor b/src/dashboard/Synapse.Dashboard/Features/Workflows/WorkflowEditor/StateSelector.razor
@@ -16,7 +16,7 @@
 
 @namespace Synapse.Dashboard
 
-<select class="form-control @CssClass" disabled="@Disabled" @onchange="OnStateSelectorValueChangedAsync">
+<select class="form-select @CssClass" disabled="@Disabled" @onchange="OnStateSelectorValueChangedAsync">
     @if(Selected == null)
     {
         <option disabled selected value> -- select a state -- </option>
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css
@@ -18957,3 +18957,7 @@ table .details {
 .pxh-150 {
   height: 150px;
 }
+
+.form-select.bg-secondary {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+}
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.scss
@@ -299,4 +299,8 @@ table .details {
 
 .pxh-150{
     height: 150px;
+}
+
+.form-select.bg-secondary {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`<tr>`
`29`	`29`	`<td>Scheme</td>`
`30`	`30`	`<td>`
`31`		`- <select class="form-control bg-secondary text-white"`
	`31`	`+ <select class="form-select bg-secondary text-white"`
`32`	`32`	`@onchange="async e => await OnAuthenticationSchemeChangedAsync(EnumHelper.Parse<AuthenticationScheme>((string)e.Value!))">`
`33`	`33`	`@foreach(var scheme in Enum.GetValues<AuthenticationScheme>())`
`34`	`34`	`{`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`
`17`	`17`	`@namespace Synapse.Dashboard`
`18`	`18`
`19`		`-<select class="form-control @CssClass" @onchange="OnStateSelectorValueChangedAsync">`
	`19`	`+<select class="form-select @CssClass" @onchange="OnStateSelectorValueChangedAsync">`
`20`	`20`	`@if(Selected == null)`
`21`	`21`	`{`
`22`	`22`	`<option disabled selected value> -- select an authentication -- </option>`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@`
`41`	`41`	`<tr>`
`42`	`42`	`<td>Type</td>`
`43`	`43`	`<td>`
`44`		`- <select class="form-control bg-secondary text-white"`
	`44`	`+ <select class="form-select bg-secondary text-white"`
`45`	`45`	`@onchange="async e => await OnStateTypeChangedAsync(EnumHelper.Parse<StateType>((string)e.Value!))">`
`46`	`46`	`@foreach(var type in Enum.GetValues<StateType>().OrderBy(v => v.ToString()))`
`47`	`47`	`{`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`<tr>`
`24`	`24`	`<td>Type</td>`
`25`	`25`	`<td>`
`26`		`- <select class="form-control bg-secondary text-white"`
	`26`	`+ <select class="form-select bg-secondary text-white"`
`27`	`27`	`@onchange="async e => await OnSwitchStateTypeChangedAsync(EnumHelper.Parse<SwitchStateType>((string)e.Value!))">`
`28`	`28`	`@foreach(var type in Enum.GetValues<StateType>().OrderBy(v => v.ToString()))`
`29`	`29`	`{`