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

Reduce usage of calendar color in dialogs

pull/258/head
Francis Lachapelle 2019-07-08 13:04:15 -04:00
parent a0cf84fd0b
commit f2069a6129
12 changed files with 76 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
NEWS
View File

@ -11,6 +11,7 @@ Enhancements
- [web] replaced bower packages by npm packages
- [web] restored mail threads (#3478, #4616, #4735)
- [web] reflect attendee type with generic icon (person/group/resource)
- [web] reduce usage of calendar color in dialogs
Bug fixes
- [web] fixed wrong translation of custom calendar categories

6
UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
View File

@ -12,7 +12,7 @@
<div class="md-toolbar-tools">
<div class="pseudo-input-container md-flex">
<label class="pseudo-input-label"><var:string label:value="Links to this Address Book"/></label>
<div class="pseudo-input-field sg-md-title">{{links.addressbook.name}}</div>
<div class="pseudo-input-field sg-md-title">{{::links.addressbook.name}}</div>
</div>
<md-button class="md-icon-button" ng-click="links.close()">
<md-icon aria-label="Close dialog">close</md-icon>
@ -25,7 +25,7 @@
<div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
<md-input-container class="md-block">
<label><var:string label:value="CardDAV URL"/></label>
<input type="text" ng-model="links.addressbook.urls.cardDavURL" ng-readonly="true"/>
<input type="text" ng-model="::links.addressbook.urls.cardDavURL" ng-readonly="true"/>
</md-input-container>
</div>
<var:if condition="isPublicAccessEnabled">
@ -33,7 +33,7 @@
<div class="sg-md-title"><var:string label:value="Public Access"/></div>
<md-input-container class="md-block">
<label><var:string label:value="CardDAV URL"/></label>
<input type="text" ng-model="links.addressbook.urls.publicCardDavURL" ng-readonly="true"/>
<input type="text" ng-model="::links.addressbook.urls.publicCardDavURL" ng-readonly="true"/>
</md-input-container>
</div>
</var:if>

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

@ -7,7 +7,7 @@
xmlns:label="OGo:label"
xmlns:uix="OGo:uix">
<div class="mailUserRights" layout="column">
<div class="mailUserRights" layout="column">
<md-checkbox name="userCanReadMails"
ng-model="acl.selectedUser.rights.userCanReadMails"

16
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 ng-class="editor.component.getClassName('bg')">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
<!-- summary -->
@ -36,7 +36,13 @@
<md-select ng-model="editor.component.destinationCalendar"
ng-change="editor.changeCalendar()">
<md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
ng-value="calendar.id">{{calendar.name}}</md-option>
ng-value="calendar.id">
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-class="calendar.getClassName('bg')"><!-- color --></div>
{{calendar.name}}
</div>
</md-option>
</md-select>
</md-input-container>
</div>
@ -59,7 +65,11 @@
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText) | orderBy"
md-min-length="0"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-style="{ 'background-color': editor.component.constructor.$categories[category] }"><!-- color --></div>
<div md-highlight-text="editor.categories.searchText" md-highlight-flags="^i">{{category}}</div>
</div>
</md-autocomplete>
</md-chips>
<div layout="row" layout-align="space-between center" layout-wrap="layout-wrap">

20
UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
View File

@ -5,7 +5,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
<md-toolbar ng-class="::editor.component.getClassName('bg')">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
<div class="sg-md-title md-flex">
@ -38,7 +38,11 @@
<md-menu-item>
<md-button class="sg-no-wrap"
ng-click="editor.copySelectedComponent(calendar.id)">
<span ng-bind="::calendar.name"><!-- menu entry --></span>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-style="::{ 'background-color': calendar.color }"><!-- color --></div>
<div ng-bind="::calendar.name"><!-- calendar --></div>
</div>
</md-button>
</md-menu-item>
</div>
@ -56,7 +60,11 @@
<md-button class="sg-no-wrap"
ng-disabled="editor.component.destinationCalendar == calendar.id"
ng-click="editor.moveSelectedComponent(calendar.id)">
<span ng-bind="::calendar.name"><!-- menu entry --></span>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-style="::{ 'background-color': calendar.color }"><!-- color --></div>
<div ng-bind="::calendar.name"><!-- calendar --></div>
</div>
</md-button>
</md-menu-item>
</div>
@ -96,7 +104,11 @@
<!-- calendar -->
<md-list-item>
<md-icon>event</md-icon>
<p ng-bind="::editor.component.calendar"><!-- calendar --></p>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-class="::editor.component.getClassName('bg')"><!-- color --></div>
<div ng-bind="::editor.component.calendar"><!-- calendar --></div>
</div>
</md-list-item>
<!-- start/end dates -->
<md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }">

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

@ -137,7 +137,7 @@
</div><!-- row -->
<!-- freebusy caption -->
<div layout="row" layout-align="end center" class="sg-padded--top">
<div class="quarter"><div class="busy sg-color-chip"><!-- busy --></div></div>
<div class="quarter"><div class="busy sg-color-sample"><!-- busy --></div></div>
<label class="md-caption"><var:string label:value="Busy"/></label>
<div class="quarter"><div class="sg-no-freebusy sg-color-sample"><!-- no fb --></div></div>
<label class="md-caption"><var:string label:value="No free-busy information"/></label>

28
UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
View File

@ -8,12 +8,16 @@
>
<md-dialog flex="60" flex-sm="80" flex-xs="100">
<md-toolbar ng-class="links.calendar.getClassName('bg')">
<md-toolbar>
<md-icon class="material-icons sg-icon-toolbar-bg">link</md-icon>
<div class="md-toolbar-tools">
<div class="pseudo-input-container md-flex">
<label class="pseudo-input-label"><var:string label:value="Links to this Calendar"/></label>
<div class="pseudo-input-field sg-md-title">{{links.calendar.name}}</div>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-class="::links.calendar.getClassName('bg')"><!-- color --></div>
<div class="sg-md-title" ng-bind="::links.calendar.name"><!-- calendar --></div>
</div>
</div>
<md-button class="md-icon-button" ng-click="links.close()">
<md-icon label:aria-label="Close">close</md-icon>
@ -24,41 +28,41 @@
<md-dialog-content class="md-padding">
<div layout="column">
<md-input-container class="md-block" ng-show="links.calendar.isWebCalendar">
<md-input-container class="md-block" ng-show="::links.calendar.isWebCalendar">
<label><var:string label:value="URL"/></label>
<input type="text" ng-model="links.calendar.urls.webCalendarURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.webCalendarURL" ng-readonly="true"/>
</md-input-container>
<div layout="column" ng-hide="links.calendar.isWebCalendar">
<div layout="column" ng-hide="::links.calendar.isWebCalendar">
<div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
<md-input-container class="md-block">
<label><var:string label:value="CalDAV URL"/></label>
<input type="text" ng-model="links.calendar.urls.calDavURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.calDavURL" ng-readonly="true"/>
</md-input-container>
<md-input-container class="md-block">
<label><var:string label:value="WebDAV ICS URL"/></label>
<input type="text" ng-model="links.calendar.urls.webDavICSURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.webDavICSURL" ng-readonly="true"/>
</md-input-container>
<md-input-container class="md-block">
<label><var:string label:value="WebDAV XML URL"/></label>
<input type="text" ng-model="links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
</md-input-container>
</div>
<var:if condition="isPublicAccessEnabled">
<div layout="column" ng-hide="links.calendar.isWebCalendar">
<div layout="column" ng-hide="::links.calendar.isWebCalendar">
<div class="sg-md-title"><var:string label:value="Public Access"/></div>
<md-input-container class="md-block">
<label><var:string label:value="CalDAV URL"/></label>
<input type="text" ng-model="links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
</md-input-container>
<md-input-container class="md-block">
<label><var:string label:value="WebDAV ICS URL"/></label>
<input type="text" ng-model="links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
</md-input-container>
<md-input-container class="md-block">
<label><var:string label:value="WebDAV XML URL"/></label>
<input type="text" ng-model="links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
<input type="text" ng-model="::links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
</md-input-container>
</div>
</var:if>

10
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 ng-class="editor.component.getClassName('bg')">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
<!-- summary -->
@ -35,7 +35,13 @@
<label><var:string label:value="Calendar"/></label>
<md-select ng-model="editor.component.destinationCalendar">
<md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
ng-value="calendar.id">{{calendar.name}}</md-option>
ng-value="calendar.id">
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-class="calendar.getClassName('bg')"><!-- color --></div>
{{calendar.name}}
</div>
</md-option>
</md-select>
</md-input-container>
</div>

8
UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
View File

@ -5,7 +5,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
<md-toolbar ng-class="::editor.component.getClassName('bg')">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
<div class="sg-md-title md-flex">
@ -61,7 +61,11 @@
<!-- calendar -->
<md-list-item>
<md-icon>event</md-icon>
<p ng-bind="::editor.component.calendar"><!-- calendar --></p>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-class="::editor.component.getClassName('bg')"><!-- color --></div>
<div ng-bind="::editor.component.calendar"><!-- calendar --></div>
</div>
</md-list-item>
<!-- start/due dates -->
<md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }"

8
UI/Templates/UIxAclEditor.wox
View File

@ -7,12 +7,16 @@
xmlns:label="OGo:label"
>
<md-dialog flex="50" flex-sm="80" flex-xs="100">
<md-toolbar ng-class="::acl.folderClassName()">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">folder_shared</md-icon>
<div class="pseudo-input-container md-flex">
<label class="pseudo-input-label"><var:string label:value="Access Rights"/></label>
<div class="sg-md-title">{{acl.folder.name}}</div>
<div layout="row" layout-align="start center">
<div class="sg-color-chip"
ng-class="::acl.folderClassName()"><!-- color --></div>
<div class="sg-md-title" ng-bind="::acl.folder.name"><!-- calendar --></div>
</div>
</div>
<md-button class="md-icon-button" ng-click="acl.closeModal()">
<md-icon aria-label="Close dialog">close</md-icon>

6
UI/WebServerResources/scss/components/list/list.scss
View File

@ -15,7 +15,7 @@ $list-item-height: 6 * $baseline-grid; // 48px
$sg-avatar-width: 40px;
// Circle diamter of color chips
$sg-color-chip-width: 16px;
$sg-color-chip-width: 2 * $baseline-grid;
/*------------------------------------*\
@ -163,10 +163,14 @@ div.md-tile-left {
border-color: white;
border-radius: 50%;
border-style: solid;
border-width: 2px;
display: block;
height: $sg-color-chip-width;
margin: 0 $bl;
width: $sg-color-chip-width;
&:first-child {
margin-left: 0;
}
}
&-tile-content {

7
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

@ -794,13 +794,6 @@ $quarter_height: 10px;
margin: 0 $baseline-grid 0 $baseline-grid*2;
padding: 0;
}
.sg-color-chip {
border-radius: 50%;
border-width: 0;
width: $baseline-grid;
height: $baseline-grid;
margin: 0 $baseline-grid 0 $baseline-grid*2;
}
}
/**