LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(web) Improve contrast of toolbars w/input field

pull/281/head
Francis Lachapelle 2019-11-20 12:18:42 -05:00
parent 4628292fb3
commit 123ccef770
9 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
UI/Templates/ContactsUI/UIxContactFolderProperties.wox
View File

@ -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">

2
UI/Templates/MailerUI/UIxMailEditor.wox
View File

@ -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)"

2
UI/Templates/PreferencesUI/UIxAccountEditor.wox
View File

@ -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">

2
UI/Templates/PreferencesUI/UIxFilterEditor.wox
View File

@ -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">

2
UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
View File

@ -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 -->

4
UI/Templates/SchedulerUI/UIxCalendarProperties.wox
View File

@ -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>

2
UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
View File

@ -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 -->

5
UI/WebServerResources/scss/components/icon/icon.scss
View File

@ -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;

38
UI/WebServerResources/scss/components/toolbar/toolbar.scss
View File

@ -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;