(web) Improve contrast of toolbars w/input field

Alinto · Nov 20, 2019 · 123ccef · 123ccef
1 parent 4628292
commit 123ccef
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 21 deletions.
diff --git a/UI/Templates/ContactsUI/UIxContactFolderProperties.wox b/UI/Templates/ContactsUI/UIxContactFolderProperties.wox
@@ -8,7 +8,7 @@
     >
   <md-dialog flex="40" flex-md="60" flex-sm="90">
 
-    <md-toolbar class="md-hue-1">
+    <md-toolbar>
       <div class="md-toolbar-tools">
         <!-- name -->
         <md-input-container class="md-block md-flex">

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -15,7 +15,7 @@
              uploader="editor.uploader"
              var:sg-labels="framework">
     <form name="messageForm">
-      <md-toolbar class="md-hue-1">
+      <md-toolbar>
         <div class="md-toolbar-tools">
           <!-- expand dialog -->
           <md-button ng-click="editor.toggleFullscreen($event)"

diff --git a/UI/Templates/PreferencesUI/UIxAccountEditor.wox b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
@@ -9,7 +9,7 @@
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
 <md-dialog flex="50" flex-sm="80" flex-xs="100">
   <form id="accountForm" name="accountForm" var:href="ownPath">
-    <md-toolbar class="md-hue-1">
+    <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">account_box</md-icon>
         <md-input-container class="md-block md-flex">

diff --git a/UI/Templates/PreferencesUI/UIxFilterEditor.wox b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
@@ -9,7 +9,7 @@
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
 <md-dialog flex="50" flex-sm="80" flex-xs="100">
   <form id="filterForm" name="filterForm" class="md-inline-form" ng-submit="filterEditor.save(filterForm)">
-    <md-toolbar class="md-hue-1">
+    <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
         <md-input-container class="md-block md-flex">

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -6,7 +6,7 @@
     xmlns:label="OGo:label">
   <md-dialog flex="60" flex-sm="80" flex-xs="100">
     <form name="eventForm" class="md-inline-form" ng-submit="editor.save(eventForm)">
-      <md-toolbar class="md-hue-1">
+      <md-toolbar>
         <div class="md-toolbar-tools">
           <md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
           <!-- summary -->

diff --git a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
@@ -9,7 +9,7 @@
   <md-dialog flex="50" flex-sm="70" flex-xs="100">
     <form name="calendarPropertiesForm" ng-submit="properties.saveProperties(calendarPropertiesForm)">
 
-      <md-toolbar class="md-hue-1">
+      <md-toolbar>
         <div class="md-toolbar-tools">
           <!-- color -->
           <sg-color-picker ng-model="properties.calendar.color"><!-- color picker --></sg-color-picker>
@@ -90,7 +90,7 @@
 
       <md-dialog-actions>
         <md-button type="button" ng-click="properties.close()"><var:string label:value="Cancel"/></md-button>
-        <md-button type="submit"
+        <md-button type="submit" class="md-primary"
                    ng-disabled="calendarPropertiesForm.$invalid || calendarPropertiesForm.$submitted">
           <var:string label:value="Save"/>
         </md-button>

diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -6,7 +6,7 @@
     xmlns:label="OGo:label">
   <md-dialog flex="60" flex-sm="80" flex-xs="100">
     <form name="eventForm" ng-submit="editor.save(eventForm)">
-      <md-toolbar class="md-hue-1">
+      <md-toolbar>
         <div class="md-toolbar-tools">
           <md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
           <!-- summary -->

diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss
@@ -44,6 +44,10 @@ $icon-badge-size: 2 * $baseline-grid;
   font-feature-settings: 'liga';
 }
 
+md-icon[ng-click]:hover {
+  cursor: pointer;
+}
+
 // Define CSS styles to use ng-class with md-icon
 md-icon {
   transition: transform 240ms;
@@ -54,6 +58,7 @@ md-icon {
     position: absolute;
     right: $mg * 3;
     transform: rotate(-15deg);
+    color: white;
   }
   &.sg-icon--large {
     font-size: $sg-md-grid-pitch;

diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -20,20 +20,7 @@ md-toolbar {
   transition-duration: 0s;
 }
 
-// Colors transition when changing folder color in dialogs
-md-dialog {
-  md-toolbar,
-  md-toolbar .md-input,
-  md-toolbar md-input-container.md-input-has-value label,
-  md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
-  md-toolbar md-icon {
-    transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
-    color $swift-ease-out-duration $swift-ease-out-timing-function;
-  }
-}
-
 .md-toolbar-tools {
-  //padding: 0;
   // dirty fix to override angular-material botchy typography
   font-size: 1em !important;
 }
@@ -64,6 +51,31 @@ md-toolbar,
   }
 }
 
+// Colors transition when changing folder color in dialogs
+md-dialog {
+  md-toolbar,
+  md-toolbar .md-input,
+  md-toolbar md-input-container.md-input-has-value label,
+  md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
+  md-toolbar md-icon {
+    transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
+    color $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
+}
+
+// Light colors for md-input inside md-toolbar
+md-toolbar md-input-container:not(.md-input-invalid) {
+  &.md-input-focused label,
+  .md-input {
+    color: rgba(255,255,255,0.87); // {{primary-contrast}}
+  }
+  &.md-input-focused .md-input {
+    padding-bottom: $input-border-width-focused - $input-border-width-default;
+    border-bottom-width: $input-border-width-default;
+    border-color: rgba(255,255,255,0.87); // {{primary-contrast}}
+  }
+}
+
 header {
   flex-direction: row;
   flex-wrap: nowrap;