amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-09-11 16:38:02 +00:00
Code Issues Projects Releases Wiki Activity

Various Web interface changes

Browse Source 
- more contrasted primary palette;
- white toolbars for list and detail views;
- modules navigation always visible;
- wrapped detail views into a md-card;
- moved preferences button to the sidenav;
- moved the sidenav toggle button to the top toolbar;
- new "flip" visual effect when looking at the raw source of cards and
  messages.
This commit is contained in:
Francis Lachapelle
2015-12-04 15:15:44 -05:00
parent efba979f3d
commit e14414ed56
36 changed files with 755 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+8 -11
View File
@@ -5,9 +5,9 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<div layout="column" class="layout-fill">
<md-toolbar class="md-whiteframe-z1">
<div class="md-toolbar-tools">
<div layout="column" class="layout-fill sg-reversible">
<md-card style="overflow: hidden">
<md-card-actions layout="row" layout-align="end center">
<md-button class="sg-icon-button"
label:aria-label="Cancel"
ng-click="editor.cancel()">
@@ -24,10 +24,8 @@
ng-click="editor.save(editor.card.$isCard()?cardForm:listForm)">
<md-icon>save</md-icon>
</md-button>
</div>
</md-toolbar>
<md-content class="md-flex md-static">
<div layout="column" class="viewer md-padding">
</md-card-actions>
<md-card-content>
<hgroup class="header">
<h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
@@ -42,7 +40,6 @@
</label>
<input type="text" ng-maxlength="30" ng-model="editor.card.c_cn"/>
</md-input-container>
<!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles -->
<div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
<md-input-container flex="40">
<label>
@@ -375,7 +372,7 @@
<!-- list members -->
<div class="pseudo-input-container">
<label class="pseudo-input-label">
<var:string label:value="Members"/>
<var:string label:value="Members"/>
</label>
<md-contact-chips
ng-model="editor.card.refs"
@@ -388,7 +385,7 @@
label:placeholder="Add Member"><!-- members --></md-contact-chips>
</div>
</form>
</div>
</md-content>
</md-card-content>
</md-card>
</div>
</container>
UI/Templates/ContactsUI/UIxContactFoldersView.wox
+5 -13
View File
@@ -24,7 +24,6 @@
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-closed': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<!-- <div style="position: relative; display: flex;"> -->
<md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
<!-- User's addressbooks -->
<section>
@@ -113,8 +112,8 @@
<span><var:string label:value="Subscriptions"/></span>
<md-button class="sg-icon-button"
label:aria-label="Subscribe to an Addressbook..."
sg-subscribe="contact"
sg-subscribe-on-select="app.subscribeToFolder(folderData)">
sg-subscribe="contact"
sg-subscribe-on-select="app.subscribeToFolder(folderData)">
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
@@ -182,7 +181,6 @@
</md-list>
</section>
</md-content>
<!-- </div> -->
</md-sidenav>
<section layout="column" class="sg-app-content layout-fill" ui-view="addressbook"><!-- contacts list --></section>
@@ -198,7 +196,7 @@
<div class="view-list" layout="column">
<!-- single-selection toolbar -->
<md-toolbar class="md-whiteframe-z1"
<md-toolbar class="md-accent md-hue-1"
ng-show="addressbook.selectedFolder.$selectedCount() == 0">
<!-- sort mode (default) -->
<div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
@@ -352,20 +350,16 @@
</div>
</md-toolbar>
<md-divider><!-- divider --></md-divider>
<md-content id="contactsList" layout="column" class="md-flex">
<md-subheader ng-show="addressbook.service.$query.value">
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="addressbook.selectedFolder.cards.length">
<span ng-switch-when="0"><var:string label:value="No matching contact"/></span>
<span ng-switch-default="true">{{addressbook.selectedFolder.cards.length}} <var:string label:value="matching contacts"/></span>
</span>
</md-subheader>
<md-subheader ng-hide="addressbook.service.$query.value">
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="addressbook.selectedFolder.isRemote">
<span ng-switch-when="1">
<var:string label:value="Start a search to browse this address book"/>
@@ -434,7 +428,6 @@
layout="column" layout-align="start center"
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
ui-view="card">
<md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
<md-content class="hide-xs md-flex layout-fill md-hue-1"
layout="column" layout-align="center center">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No contact selected"/></div>
@@ -477,7 +470,6 @@
<input id="file-input" type="file" class="ng-hide"
nv-file-select="nv-file-select"
uploader="$CardsImportDialogController.uploader"/>
<!-- <md-button ng-disabled="uploader.queue.length == 0" ng-click="upload()"><var:string label:value="Upload"/></md-button> -->
</md-dialog-actions>
</md-dialog>
</script>
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+180 -166
View File
@@ -5,185 +5,199 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<div layout="column" class="layout-fill">
<md-toolbar class="md-whiteframe-z1">
<div class="md-toolbar-tools">
<md-button class="sg-icon-button hide show-sm"
label:aria-label="Close"
ng-click="editor.close()">
<md-icon>close</md-icon>
</md-button>
<div class="md-flex"><!-- spacer --></div>
<md-button class="sg-icon-button"
label:aria-label="Edit"
ng-show="editor.currentFolder.acls.objectEditor"
ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
<md-tooltip md-direction="left"><var:string label:value="Edit"/></md-tooltip>
<md-icon>mode_edit</md-icon>
</md-button>
<md-button class="sg-icon-button"
label:aria-label="Delete"
ng-show="editor.currentFolder.acls.objectEraser"
ng-click="editor.confirmDelete(editor.card)">
<md-tooltip md-direction="left"><var:string label:value="Delete"/></md-tooltip>
<md-icon>delete</md-icon>
</md-button>
<md-menu>
<md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
<div class="sg-reversible" ng-class="{ 'sg-flip': editor.showRawSource }">
<div layout="column" class="layout-fill sg-face">
<md-card>
<md-card-actions layout="row" layout-align="end center">
<md-button class="sg-icon-button hide show-xs"
label:aria-label="Close"
ng-click="editor.close()">
<md-icon>close</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button label:aria-label="Export"
ng-click="editor.exportCard()">
<var:string label:value="Export"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button label:aria-label="View Raw Source"
ng-click="editor.viewRawSource($event)">
<var:string label:value="View Raw Source"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<md-content class="md-flex md-static">
<div layout="column" class="viewer md-padding">
<header class="msg-header">
<div ng-show="editor.card.c_component == 'vcard'">
<sg-avatar-image class="md-tile-left"
sg-email="editor.card.$preferredEmail()"
sg-src="editor.card.photoURL"
size="40"><!-- avatar --></sg-avatar-image>
</div>
<div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
<!--list avatar-->
</div>
<div class="msg-header-content">
<h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
<md-chips ng-model="editor.card.categories"
class="sg-readonly" readonly="true">
<md-chip-template>
{{$chip.value}}
</md-chip-template>
</md-chips>
</div>
</header>
<section class="msg-body">
<div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
<div class="key">
<label class="pseudo-input-label">
<var:string label:value="Birthday"/>
</label>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" class="sg-icon-button"
label:aria-label="Edit"
ng-show="editor.currentFolder.acls.objectEditor"
ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
<md-tooltip><var:string label:value="Edit"/></md-tooltip>
<md-icon>mode_edit</md-icon>
</md-button>
<md-button class="sg-icon-button"
label:aria-label="Delete"
ng-show="editor.currentFolder.acls.objectEraser"
ng-click="editor.confirmDelete(editor.card)">
<md-tooltip><var:string label:value="Delete"/></md-tooltip>
<md-icon>delete</md-icon>
</md-button>
<md-menu>
<md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button label:aria-label="Export"
ng-click="editor.exportCard()">
<var:string label:value="Export"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button label:aria-label="View Raw Source"
ng-click="editor.toggleRawSource($event)">
<var:string label:value="View Raw Source"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-actions>
<md-card-content>
<header class="msg-header">
<div ng-show="editor.card.c_component == 'vcard'">
<sg-avatar-image class="md-tile-left"
sg-email="editor.card.$preferredEmail()"
sg-src="editor.card.photoURL"
size="40"><!-- avatar --></sg-avatar-image>
</div>
<div class="pseudo-input-field">
<span>{{editor.card.$birthday()}}</span>
<div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
<!--list avatar-->
</div>
</div>
<div class="msg-header-content">
<h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
<md-chips ng-model="editor.card.categories"
class="sg-readonly" readonly="true">
<md-chip-template>
{{$chip.value}}
</md-chip-template>
</md-chips>
</div>
</header>
<section class="msg-body">
<!-- list members -->
<div class="section" ng-show="editor.card.refs.length > 0">
<label class="pseudo-input-label">
<var:string label:value="Members"/>
</label>
<md-list>
<md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
<sg-avatar-image class="md-tile-left"
sg-email="ref.$preferredEmail()"
size="48">
<!-- contact avatar -->
</sg-avatar-image>
<div class="md-list-item-text">
<h3>
<a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
{{ ref.$fullname() }}
</a>
</h3>
<h4 ng-show="ref.email">
<a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
{{ ref.email }}
</a>
</h4>
</div>
</md-list-item>
</md-list>
</div>
<div class="section" ng-show="editor.card.emails.length > 0">
<div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
<div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
<div class="key">
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
</div>
<div class="pseudo-input-field">
<a href="#" ng-bind="email.value"
ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.c_screenname">
<div class="pseudo-input-container">
<div class="key">
<label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
</div>
<div class="pseudo-input-field">{{editor.card.c_screenname}}</div>
</div>
</div>
<div class="section" ng-show="editor.card.phones.length > 0">
<div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
<div class="key">
<label class="pseudo-input-label">{{phone.type}}</label>
</div>
<div class="pseudo-input-field">
<a href="tel:{{phone.value}}">{{phone.value}}</a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.urls">
<div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
<div class="key">
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
<label class="pseudo-input-label">
<var:string label:value="Birthday"/>
</label>
</div>
<div class="pseudo-input-field">
<a href="#" target="_new" ng-href="{{url.value}}">{{url.value}}</a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.addresses">
<div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
<div class="key">
<label class="pseudo-input-label">{{address.type}}</label>
</div>
<div class="pseudo-input-field">
<div sg-address="address"><!-- address --></div>
<span>{{editor.card.$birthday()}}</span>
</div>
</div>
</div>
<div class="pseudo-input-container" ng-show="editor.card.note">
<div class="key">
<!-- list members -->
<div class="section" ng-show="editor.card.refs.length > 0">
<label class="pseudo-input-label">
<var:string label:value="Note"/>
<var:string label:value="Members"/>
</label>
<md-list>
<md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
<sg-avatar-image class="md-tile-left"
sg-email="ref.$preferredEmail()"
size="48">
<!-- contact avatar -->
</sg-avatar-image>
<div class="md-list-item-text">
<h3>
<a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
{{ ref.$fullname() }}
</a>
</h3>
<h4 ng-show="ref.email">
<a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
{{ ref.email }}
</a>
</h4>
</div>
</md-list-item>
</md-list>
</div>
<div class="pseudo-input-field">
<div ng-bind-html="editor.card.note"><!-- note --></div>
<div class="section" ng-show="editor.card.emails.length > 0">
<div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
<div class="key">
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
</div>
<div class="pseudo-input-field">
<a href="#" ng-bind="email.value"
ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
</div>
</div>
</div>
</div>
</section>
</div>
</md-content>
<div class="section" ng-show="editor.card.c_screenname">
<div class="pseudo-input-container">
<div class="key">
<label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
</div>
<div class="pseudo-input-field">{{editor.card.c_screenname}}</div>
</div>
</div>
<div class="section" ng-show="editor.card.phones.length > 0">
<div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
<div class="key">
<label class="pseudo-input-label">{{phone.type}}</label>
</div>
<div class="pseudo-input-field">
<a href="tel:{{phone.value}}">{{phone.value}}</a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.urls">
<div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
<div class="key">
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
</label>
</div>
<div class="pseudo-input-field">
<a href="#" target="_new" ng-href="{{url.value}}">{{url.value}}</a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.addresses">
<div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
<div class="key">
<label class="pseudo-input-label">{{address.type}}</label>
</div>
<div class="pseudo-input-field">
<div sg-address="address"><!-- address --></div>
</div>
</div>
</div>
<div class="pseudo-input-container" ng-show="editor.card.note">
<div class="key">
<label class="pseudo-input-label">
<var:string label:value="Note"/>
</label>
</div>
<div class="pseudo-input-field">
<div ng-bind-html="editor.card.note"><!-- note --></div>
</div>
</div>
</section>
</md-card-content>
</md-card>
</div>
<div class="layout-fill sg-back" layout="column">
<md-card>
<md-card-actions layout="row" layout-align="end center">
<md-button class="md-icon-button"
label:aria-label="Close"
ng-click="editor.toggleRawSource()">
<md-icon>arrow_forward</md-icon>
</md-button>
</md-card-actions>
<md-card-content>
<pre>{{editor.rawSource}}</pre>
</md-card-content>
</md-card>
</div>
</div>
</container>
UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+2 -1
View File
@@ -25,7 +25,8 @@
ng-change="subscribe.onChange()"/>
</md-input-container>
<md-card ng-repeat="user in subscribe.users"
ng-class="{ 'sg-collapsed': user.uid != subscribe.selectedUser.uid, 'sg-expanded': user.uid == subscribe.selectedUser.uid }">
ng-class="{ 'sg-collapsed': user.uid != subscribe.selectedUser.uid,
'sg-expanded': user.uid == subscribe.selectedUser.uid }">
<md-button ng-click="subscribe.selectUser($index)">
<div layout="row" layout-align="start center" class="md-flex">
<span class="card-picture" ng-switch="user.isGroup">
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+4 -7
View File
@@ -60,7 +60,7 @@
</div>
</md-toolbar>
<!-- single-selection toolbars -->
<md-toolbar class="md-whiteframe-z1"
<md-toolbar class="md-accent md-hue-1"
ng-hide="app.showingAdvancedSearch || mailbox.selectedFolder.$selectedCount() > 0">
<!-- sort mode (default) -->
<div class="md-toolbar-tools" ng-hide="mailbox.mode.search">
@@ -200,12 +200,10 @@
</div>
</md-toolbar>
<md-divider><!-- divider --></md-divider>
<md-content id="messagesList" layout="column" class="md-flex">
<md-subheader>
<!-- toggle sidenav -->
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<!-- message count -->
<span ng-switch="mailbox.service.selectedFolder.getLength()">
<span ng-switch-when="0"><var:string label:value="No message"/></span>
@@ -272,8 +270,7 @@
layout="column" layout-align="start center"
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
ui-view="message">
<md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
<md-content class="hide-sm md-flex layout-fill md-hue-1"
<md-content class="hide-xs md-flex layout-fill md-hue-1"
layout="column" layout-align="center center">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No message selected"/></div>
</md-content>
UI/Templates/MailerUI/UIxMailMainFrame.wox
+23 -24
View File
@@ -251,7 +251,6 @@
</md-subheader>
<md-list>
<md-list-item ng-repeat="folder in account.$flattenMailboxes() track by folder.path"
ng-click="app.selectFolder(account, folder)"
ng-dblclick="app.editFolder(folder)"
ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
ui-sref-active="md-default-theme md-background md-bg md-hue-1">
@@ -264,6 +263,7 @@
ng-change="account.$flattenMailboxes({ reload: true, saveState: true })"><!-- expanded --></md-checkbox>
</div>
<p class="sg-item-name"
ng-click="app.selectFolder(account, folder)"
ng-show="app.editMode != folder.path">
{{app.metadataForFolder(folder).name}}
<span class="sg-counter-badge" ng-show="folder.unseenCount">{{folder.unseenCount}}</span>
@@ -278,14 +278,13 @@
sg-enter="app.saveFolder(folder)"
sg-escape="app.revertEditing(folder)"/>
</md-input-container>
<md-menu class="md-secondary"
ng-show="app.service.selectedFolder.path == folder.path">
<md-menu ng-show="app.service.selectedFolder.path == folder.path">
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
ng-click="$mdOpenMenu($event)"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="3">
<md-menu-item>
<md-button type="button" ng-click="app.markFolderRead(folder)">
<md-button type="button" md-menu-align-target="md-menu-align-target" ng-click="app.markFolderRead(folder)">
<var:string label:value="Mark Folder Read"/>
</md-button>
</md-menu-item>
@@ -368,25 +367,7 @@
<md-toolbar layout="column" class="md-tall toolbar-main"
ng-show="app.showingAdvancedSearch">
<div class="md-toolbar-tools">
<md-chips class="md-flex"
ng-model="app.search.params"
md-on-append="app.newSearchParam($chip)">
<input sg-focus-on="advancedSearch" type="text"
ng-disabled="app.currentSearchParam.length == 0"
sg-placeholder="app.search.options[app.currentSearchParam]"/>
<md-chip-template>
<span class="md-caption" ng-show="$chip.negative == 0">(match</span>
<span class="md-caption" ng-show="$chip.negative == 1">(does not match</span>
<span class="md-caption">{{$chip.searchBy}})</span>
<span>{{$chip.searchInput}}</span>
</md-chip-template>
</md-chips>
<md-button type="button" class="sg-icon-button" ng-click="app.hideAdvancedSearch()">
<md-icon>close</md-icon>
</md-button>
</div>
<div class="md-toolbar-tools">
<div layout="column">
<div layout="column" class="md-flex">
<div class="pseudo-input-container--compact">
<label class="pseudo-input-label"><var:string label:value="Add a Criteria"/></label>
</div>
@@ -408,6 +389,24 @@
</span>
</div>
</div>
<md-button type="button" class="sg-icon-button" ng-click="app.hideAdvancedSearch()">
<md-icon>close</md-icon>
</md-button>
</div>
<div class="md-toolbar-tools">
<md-chips class="md-flex"
ng-model="app.search.params"
md-transform-chip="app.newSearchParam($chip)">
<input sg-focus-on="advancedSearch" type="text"
ng-disabled="app.currentSearchParam.length == 0"
sg-placeholder="app.search.options[app.currentSearchParam]"/>
<md-chip-template>
<span class="md-caption" ng-show="$chip.negative == 0">(match</span>
<span class="md-caption" ng-show="$chip.negative == 1">(does not match</span>
<span class="md-caption">{{$chip.searchBy}})</span>
<span>{{$chip.searchInput}}</span>
</md-chip-template>
</md-chips>
</div>
</md-toolbar>
UI/Templates/MailerUI/UIxMailViewTemplate.wox
+209 -190
View File
@@ -7,210 +7,229 @@
xmlns:label="OGo:label"
xmlns:uix="OGo:uix">
<div layout="column" class="layout-fill">
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="sg-icon-button"
ng-if="isPopup"
label:aria-label="Close"
ng-click="viewer.closePopup()">
<md-icon>close</md-icon>
</md-button>
<md-button class="sg-icon-button hide show-sm"
ng-hide="isPopup"
label:aria-label="Close"
ng-click="viewer.close()">
<md-icon>arrow_back</md-icon>
</md-button>
<div class="md-flex hide show-sm"><!-- spacer --></div>
<md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
<md-icon ng-class="{'icon-star': viewer.message.isflagged,
'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
</md-button>
<div class="md-flex hide-sm"><!-- spacer --></div>
<md-button class="sg-icon-button"
ng-hide="viewer.message.isDraft"
ng-click="viewer.reply($event)"
label:aria-label="Reply">
<md-tooltip md-direction="bottom"><var:string label:value="Reply to Sender Only"/></md-tooltip>
<md-icon>reply</md-icon>
</md-button>
<md-button class="sg-icon-button"
ng-show="viewer.message.allowReplyAll()"
ng-click="viewer.replyAll($event)"
label:aria-label="Reply All">
<md-tooltip md-direction="bottom"><var:string label:value="Reply to sender and all recipients"/></md-tooltip>
<md-icon>reply_all</md-icon>
</md-button>
<md-button class="sg-icon-button" label:aria-label="Forward"
ng-hide="viewer.message.isDraft"
ng-click="viewer.forward($event)">
<md-tooltip md-direction="bottom"><var:string label:value="Forward selected message"/></md-tooltip>
<md-icon>forward</md-icon>
</md-button>
<md-button class="sg-icon-button" label:aria-label="Edit"
ng-show="viewer.message.isDraft"
ng-click="viewer.edit($event)">
<md-icon>create</md-icon>
</md-button>
<md-button class="sg-icon-button" label:aria-label="Delete"
ng-click="viewer.doDelete()">
<md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
<md-icon>delete</md-icon>
</md-button>
<md-button class="sg-icon-button hide-sm" label:aria-label="Open in New Mail Window"
ng-hide="isPopup"
ng-click="viewer.openPopup()">
<md-tooltip md-direction="bottom"><var:string label:value="Open in New Mail Window"/></md-tooltip>
<md-icon>open_in_new</md-icon>
</md-button>
<md-menu>
<md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
<div class="sg-reversible" ng-class="{ 'sg-flip': viewer.showRawSource }">
<div layout="column" class="layout-fill sg-face">
<md-card>
<md-card-actions layout="row">
<md-button class="md-icon-button"
ng-if="isPopup"
label:aria-label="Close"
ng-click="viewer.closePopup()">
<md-icon>close</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item ng-hide="viewer.showFlags">
<md-button label:aria-label="Add a tag"
ng-click="viewer.showFlags = true">
<var:string label:value="Add a tag"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button label:aria-label="Save As..."
ng-click="viewer.saveMessage()">
<var:string label:value="Save As..."/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button label:aria-label="View Message Source"
ng-click="viewer.viewRawSource($event)">
<var:string label:value="View Message Source"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<md-content class="md-flex md-static">
<div class="viewer">
<md-toolbar class="sg-padded">
<h3 class="sg-md-title-msg">{{viewer.message.subject}}</h3>
<time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
</md-toolbar>
<md-toolbar class="sg-padded">
<md-button class="md-icon-button hide show-xs"
ng-hide="isPopup"
label:aria-label="Close"
ng-click="viewer.close()">
<md-icon>arrow_back</md-icon>
</md-button>
<div class="md-flex hide show-xs"><!-- spacer --></div>
<md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
<md-icon ng-class="{'icon-star': viewer.message.isflagged,
'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
</md-button>
<div class="md-flex hide-xs"><!-- spacer --></div>
<md-button class="sg-icon-button"
ng-hide="viewer.message.isDraft"
ng-click="viewer.reply($event)"
label:aria-label="Reply">
<md-tooltip md-direction="bottom"><var:string label:value="Reply to Sender Only"/></md-tooltip>
<md-icon>reply</md-icon>
</md-button>
<md-button class="sg-icon-button"
ng-show="viewer.message.allowReplyAll()"
ng-click="viewer.replyAll($event)"
label:aria-label="Reply All">
<md-tooltip md-direction="bottom"><var:string label:value="Reply to sender and all recipients"/></md-tooltip>
<md-icon>reply_all</md-icon>
</md-button>
<md-button class="sg-icon-button" label:aria-label="Forward"
ng-hide="viewer.message.isDraft"
ng-click="viewer.forward($event)">
<md-tooltip md-direction="bottom"><var:string label:value="Forward selected message"/></md-tooltip>
<md-icon>forward</md-icon>
</md-button>
<md-button class="sg-icon-button" label:aria-label="Edit"
ng-show="viewer.message.isDraft"
ng-click="viewer.edit($event)">
<md-icon>create</md-icon>
</md-button>
<md-button class="sg-icon-button" label:aria-label="Delete"
ng-click="viewer.doDelete()">
<md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
<md-icon>delete</md-icon>
</md-button>
<md-button class="sg-icon-button hide-xs" label:aria-label="Open in New Mail Window"
ng-hide="isPopup"
ng-click="viewer.openPopup()">
<md-tooltip md-direction="bottom"><var:string label:value="Open in New Mail Window"/></md-tooltip>
<md-icon>open_in_new</md-icon>
</md-button>
<md-menu>
<md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item ng-hide="viewer.showFlags">
<md-button label:aria-label="Add a tag"
ng-click="viewer.showFlags = true">
<var:string label:value="Add a tag"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button label:aria-label="Save As..."
ng-click="viewer.saveMessage()">
<var:string label:value="Save As..."/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button label:aria-label="View Message Source"
ng-click="viewer.toggleRawSource($event)">
<var:string label:value="View Message Source"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-actions>
<md-card-content>
<div class="sg-padded">
<h5>{{viewer.message.subject}}</h5>
<time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
</div>
<div class="sg-padded">
<div class="pseudo-input-container--compact">
<label class="pseudo-input-label">
<var:string label:value="From"/>
</label>
<div layout="row" layout-align="start center">
<sg-avatar-image class="md-tile-left"
sg-email="viewer.message.from[0].email"
size="40">
<!-- contact avatar -->
</sg-avatar-image>
<div class="md-list-item-text">
<span>{{ viewer.message.from[0].name }}</span><br/>
<a class="md-caption" href="#"
ng-bind="viewer.message.from[0].email"
ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
<div layout="row" layout-wrap="layout-wrap">
<div class="pseudo-input-container--compact" flex="50" flex-xs="100">
<label class="pseudo-input-label">
<var:string label:value="From"/>
</label>
<div layout="row" layout-align="start center">
<sg-avatar-image class="md-tile-left"
sg-email="viewer.message.from[0].email"
size="40">
<!-- contact avatar -->
</sg-avatar-image>
<div class="md-list-item-text">
<span>{{ viewer.message.from[0].name }}</span><br/>
<a class="md-caption" href="#"
ng-bind="viewer.message.from[0].email"
ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
</div>
</div>
</div>
<div layout="column" flex="50">
<div class="pseudo-input-container--compact">
<label class="pseudo-input-label">
<var:string label:value="To"/>
</label>
<div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
<a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
</div>
<div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
<span ng-repeat="recipient in viewer.message.to">
<a href="#" ng-bind="recipient.full"
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
</span>
</div>
</div>
<div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
<label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
<var:string label:value="Cc"/>
</label>
<div class="pseudo-input-field">
<span ng-repeat="recipient in viewer.message.cc">
<a href="#" ng-bind="recipient.full"
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="pseudo-input-container--compact">
<label class="pseudo-input-label">
<var:string label:value="To"/>
</label>
<div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
<a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
</div>
<div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
<span ng-repeat="recipient in viewer.message.to">
<a href="#" ng-bind="recipient.full"
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
</span>
</div>
</div>
<div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
<label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
<var:string label:value="Cc"/>
</label>
<div class="pseudo-input-field">
<span ng-repeat="recipient in viewer.message.cc">
<a href="#" ng-bind="recipient.full"
ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
</span>
</div>
</div>
<md-chips class="sg-readonly hide-sm"
<md-chips class="sg-readonly hide-xs"
ng-show="viewer.showFlags"
ng-model="viewer.message.flags"
md-on-append="$chip.name"
md-transform-chip="$chip.name"
md-on-remove="viewer.message.removeTag($chip)">
<md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
<md-autocomplete
md-selected-item="viewer.tags.selected"
md-selected-item-change="viewer.message.addTag(viewer.tags.selected.name)"
md-search-text="viewer.tags.searchText"
md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
md-autoselect="true"
label:placeholder="Add a tag">
<md-item-template>
<span md-highlight-text="viewer.tags.searchText"
md-highlight-flags="^i">{{tag.description}}</span>
</md-item-template>
</md-autocomplete>
</md-chips>
</md-toolbar>
<md-content md-scroll-x="md-scroll-x" class="md-padding md-whiteframe-z1">
<md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
<md-autocomplete
md-selected-item="viewer.tags.selected"
md-selected-item-change="viewer.message.addTag(viewer.tags.selected.name)"
md-search-text="viewer.tags.searchText"
md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
md-autoselect="true"
label:placeholder="Add a tag">
<md-item-template>
<span md-highlight-text="viewer.tags.searchText"
md-highlight-flags="^i">{{tag.description}}</span>
</md-item-template>
</md-autocomplete>
</md-chips>
</div>
<md-divider><!-- end of headers --></md-divider>
<div>
<!-- Load external images -->
<md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
ng-show="viewer.message.$hasUnsafeContent">
<div layout="row" layout-align="start center" class="layout-fill">
<div class="md-tile-left">
<md-icon>collections</md-icon>
<!-- Load external images -->
<md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
ng-show="viewer.message.$hasUnsafeContent">
<div layout="row" layout-align="start center" class="layout-fill">
<div class="md-tile-left">
<md-icon>collections</md-icon>
</div>
<p class="hide show-gt-md"><var:string label:value="This message contains external images."/></p>
<div class="md-flex"><!-- spacer --></div>
<md-button label:aria-label="Load Images"
ng-click="viewer.message.loadUnsafeContent()">
<var:string label:value="Load Images"/>
</md-button>
</div>
<p class="hide show-gt-md"><var:string label:value="This message contains external images."/></p>
<div class="md-flex"><!-- spacer --></div>
<md-button label:aria-label="Load Images"
ng-click="viewer.message.loadUnsafeContent()">
<var:string label:value="Load Images"/>
</md-button>
</div>
</md-whiteframe>
</md-whiteframe>
<!-- Send MDN -->
<md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
ng-show="viewer.message.shouldAskReceipt == 1">
<div layout="row" layout-align="start center">
<div class="md-tile-left">
<md-icon>message</md-icon>
<!-- Send MDN -->
<md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
ng-show="viewer.message.shouldAskReceipt == 1">
<div layout="row" layout-align="start center">
<div class="md-tile-left">
<md-icon>message</md-icon>
</div>
<p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
</div>
<p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
</div>
<div class="layout-fill" layout="row" layout-align="end center">
<md-button label:aria-label="No"
type="button"
ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
<md-button label:aria-label="Yes"
type="submit"
ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
</div>
</md-whiteframe>
<div class="layout-fill" layout="row" layout-align="end center">
<md-button label:aria-label="No"
type="button"
ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
<md-button label:aria-label="Yes"
type="submit"
ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
</div>
</md-whiteframe>
<div class="msg-body">
<div layout="row" layout-wrap="layout-wrap">
<div class="mailer_mailcontent" layout="row" layout-wrap="layout-wrap"
ng-repeat="part in viewer.message.$content()"
ng-class="part.msgclass">
<div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
<div ng-if="part.compile" sg-compile="part.content" sg-zoomable-image="sg-zoomable-image"><!-- msg --></div>
<div class="msg-body">
<div layout="row" layout-wrap="layout-wrap">
<div class="mailer_mailcontent" layout="row" layout-wrap="layout-wrap"
ng-repeat="part in viewer.message.$content()"
ng-class="part.msgclass">
<div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
<div ng-if="part.compile" sg-compile="part.content" sg-zoomable-image="sg-zoomable-image"><!-- msg --></div>
</div>
</div>
</div>
</div>
</md-content>
</div>
</md-content>
</md-card-content>
</md-card>
</div>
<div class="layout-fill sg-back" layout="column">
<md-card>
<md-card-actions layout="row" layout-align="end center">
<md-button class="md-icon-button"
label:aria-label="Close"
ng-click="viewer.toggleRawSource()">
<md-icon>arrow_forward</md-icon>
</md-button>
</md-card-actions>
<md-card-content>
<pre>{{viewer.rawSource}}</pre>
</md-card-content>
</md-card>
</div>
</div>
</container>
UI/Templates/PreferencesUI/UIxPreferences.wox
+4 -4
View File
@@ -22,7 +22,9 @@
</script>
<script type="text/ng-template" id="preferences.html">
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" layout="column"
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-closed': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
<md-list>
@@ -62,9 +64,7 @@
<!-- TOP RIGHT TOOLBAR -->
<md-toolbar layout="row" layout-align="space-between start" class="md-tall">
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
</div>
<var:component className="UIxTopnavToolbarTemplate" />
<md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
ng-click="app.save()">
<md-icon>save</md-icon>
UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+1 -1
View File
@@ -49,7 +49,7 @@
</md-autocomplete>
</md-chips>
<!-- classification -->
<md-radio-group layout="row" layout-align="space-around center"
<md-radio-group class="md-padding" layout="row" layout-align="space-around center"
ng-model="editor.component.classification">
<md-radio-button value="public">
<var:string label:value="label_Public"/>
UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+2 -2
View File
@@ -4,7 +4,7 @@
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="40" flex-md="80" flex-sm="100">
<md-dialog flex="40" flex-sm="80" flex-xs="100">
<md-toolbar ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
@@ -24,7 +24,7 @@
<md-menu-content>
<md-menu-item>
<md-button label:aria-label="View Raw Source"
ng-click="editor.viewRawSource($event)">
ng-click="editor.toggleRawSource($event)">
<var:string label:value="View Raw Source"/>
</md-button>
</md-menu-item>
UI/Templates/SchedulerUI/UIxCalDayTable.wox
+1 -1
View File
@@ -6,7 +6,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<md-toolbar class="daysView md-hue-1" var:sg-view="currentView">
<md-toolbar class="daysView" var:sg-view="currentView">
<!-- Display today abreviation and date -->
<div class="days dayLabels">
UI/Templates/SchedulerUI/UIxCalDayView.wox
+10 -10
View File
@@ -7,8 +7,8 @@
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<md-toolbar hide-sm="hide-sm">
<div class="md-toolbar-tools">
<md-card>
<md-card-actions layout="row" layout-align="start center">
<md-button class="md-icon-button"
label:aria-label="Previous Day"
var:date="prevDayQueryParameters.day"
@@ -35,13 +35,13 @@
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>
</md-card-actions>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="dayOverview"
const:numberOfDays="1"
const:currentView="dayview"/>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="dayOverview"
const:numberOfDays="1"
const:currentView="dayview"/>
</md-card>
</container>
UI/Templates/SchedulerUI/UIxCalMainView.wox
+5 -9
View File
@@ -360,7 +360,7 @@
<div layout="row" class="md-flex">
<div class="view-list" layout="column">
<md-toolbar class="md-whiteframe-z1"
<md-toolbar class="md-accent md-hue-1"
ng-show="list.component.$selectedCount() == 0">
<!-- sort/filter mode (default) -->
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
@@ -576,6 +576,8 @@
</div>
</md-toolbar>
<md-divider><!-- divider --></md-divider>
<md-content layout="column" class="view-list">
<md-tabs md-dynamic-height="true"
md-selected="list.selectedList">
@@ -583,9 +585,6 @@
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-subheader>
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span>{{list.component.$queryEvents.filterpopup | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
@@ -626,9 +625,6 @@
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-subheader>
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span>{{list.component.$queryTasks.filterpopup | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
@@ -680,7 +676,7 @@
</md-button>
</md-content>
</div>
<div id="detailView" class="view-detail" hide-xs="hide-xs" layout="column" ui-view="calendarView">
<div id="detailView" class="view-detail hide-xs" layout="column" ui-view="calendarView">
<!-- calendar view -->
</div>
</div>
@@ -693,7 +689,7 @@
<!-- modal for calendar import -->
<script type="text/ng-template" id="UIxCalendarImportDialog">
<md-dialog flex="40" flex-sm="100" label:aria-label="Import Calendar">
<md-dialog flex="40" flex-xs="100" label:aria-label="Import Calendar">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>
UI/Templates/SchedulerUI/UIxCalMonthView.wox
+57 -66
View File
@@ -7,22 +7,13 @@
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<md-toolbar class="md-whiteframe-z1" hide-sm="hide-sm">
<div class="md-toolbar-tools">
<md-card>
<md-card-actions layout="row" layout-align="start center">
<md-button class="md-icon-button"
label:aria-label="Previous Month"
var:date="prevMonthQueryParameters.day"
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<md-input-container>
<md-select ng-model="calendar.nav.month">
<md-option><var:string value="monthNameOfThisMonth" /></md-option>
</md-select>
</md-input-container>
<md-input-container>
<md-select ng-model="calendar.nav.year">
<md-option><var:string value="selectedDate.yearOfCommonEra" /></md-option>
</md-select>
</md-input-container>
<var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" />
<md-button class="md-icon-button"
label:aria-label="Next Month"
var:date="nextMonthQueryParameters.day"
@@ -44,60 +35,60 @@
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>
</md-card-actions>
<md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
<div layout="row" layout-align="center center"
class="md-flex md-default-theme md-fg md-hue-1">
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
</var:foreach>
</div>
</md-toolbar>
<md-content class="md-flex" sg-calendar-scroll-view="monthly">
<div class="calendarView monthView">
<md-grid-list
md-cols="7"
md-row-height="1:1"
md-gutter="0">
<var:foreach list="weeksToDisplay" item="currentWeek">
<var:foreach list="currentWeek" item="currentTableDay">
<md-grid-tile
md-rowspan="1"
md-colspan="1"
var:class="dayCellClasses"
var:id="currentDayId"
>
<sg-calendar-day layout="column" layout-fill="true"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-number="currentDayNumber"
var:sg-day-string="currentTableDay.iso8601DateString">
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
<var:if condition="currentTableDay.isToday">
<span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
</div>
<md-content
sg-draggable-calendar-block="sg-draggable-calendar-block"
class="clickableDayCell">
<sg-calendar-month-day
sg-blocks="calendar.views[0].blocks"
sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
</md-content>
<sg-calendar-month-event
sg-calendar-ghost="sg-calendar-ghost"
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
</sg-calendar-day>
</md-grid-tile>
</var:foreach>
<md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
<div layout="row" layout-align="center center"
class="md-flex md-default-theme md-fg md-hue-1">
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
</var:foreach>
</md-grid-list>
</div>
</md-content>
</div>
</md-toolbar>
<md-content class="md-flex" sg-calendar-scroll-view="monthly">
<div class="calendarView monthView">
<md-grid-list
md-cols="7"
md-row-height="1:1"
md-gutter="0">
<var:foreach list="weeksToDisplay" item="currentWeek">
<var:foreach list="currentWeek" item="currentTableDay">
<md-grid-tile
md-rowspan="1"
md-colspan="1"
var:class="dayCellClasses"
var:id="currentDayId"
>
<sg-calendar-day layout="column" layout-fill="true"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-number="currentDayNumber"
var:sg-day-string="currentTableDay.iso8601DateString">
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
<var:if condition="currentTableDay.isToday">
<span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
</div>
<md-content
sg-draggable-calendar-block="sg-draggable-calendar-block"
class="clickableDayCell">
<sg-calendar-month-day
sg-blocks="calendar.views[0].blocks"
sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
</md-content>
<sg-calendar-month-event
sg-calendar-ghost="sg-calendar-ghost"
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
</sg-calendar-day>
</md-grid-tile>
</var:foreach>
</var:foreach>
</md-grid-list>
</div>
</md-content>
</md-card>
</container>
UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
+10 -10
View File
@@ -6,9 +6,9 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<md-toolbar hide-sm="hide-sm">
<div class="md-toolbar-tools">
<md-card>
<md-card-actions layout="row" layout-align="start center">
<md-button class="md-icon-button"
label:aria-label="Previous Day"
var:date="prevDayQueryParameters.day"
@@ -35,12 +35,12 @@
label:aria-label="Multicolumn Day View"
ng-disabled="true"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>
</md-card-actions>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:numberOfDays="1"
const:currentView="multicolumndayview"/>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:numberOfDays="1"
const:currentView="multicolumndayview"/>
</md-card>
</container>
UI/Templates/SchedulerUI/UIxCalWeekView.wox
+4 -5
View File
@@ -7,8 +7,8 @@
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<md-toolbar hide-sm="hide-sm">
<div class="md-toolbar-tools">
<md-card>
<md-card-actions layout="row" layout-align="start center">
<md-button class="md-icon-button"
label:aria-label="Previous Week"
var:date="prevWeekQueryParameters.day"
@@ -35,13 +35,12 @@
<a class="md-icon-button md-button"
label:aria-label="Multicolumn Day View"
href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
</div>
</md-toolbar>
</md-card-actions>
<var:component
className="UIxCalDayTable"
startDate="startDate"
const:CSSClass="weekOverview"
const:numberOfDays="7"
const:currentView="weekview"/>
</md-card>
</container>
UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+2 -2
View File
@@ -62,8 +62,8 @@
</md-radio-button>
</md-radio-group>
<!-- priority -->
<div layout="row" layout-align="center center">
<div flex="20"><var:string label:value="Priority"/></div>
<div class="pseudo-input-container">
<label class="pseudo-input-label"><var:string label:value="Priority"/></label>
<md-slider class="md-flex"
md-discrete="true"
ng-model="editor.component.priority"
UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+2 -2
View File
@@ -4,7 +4,7 @@
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-dialog flex="40" flex-md="60" flex-sm="100">
<md-dialog flex="40" flex-sm="80" flex-xs="100">
<md-toolbar ng-class="editor.component.getClassName('bg')">
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
@@ -24,7 +24,7 @@
<md-menu-content>
<md-menu-item>
<md-button label:aria-label="View Raw Source"
ng-click="editor.viewRawSource($event)">
ng-click="editor.toggleRawSource($event)">
<var:string label:value="View Raw Source"/>
</md-button>
</md-menu-item>
UI/Templates/UIxSidenavToolbarTemplate.wox
+15 -7
View File
@@ -4,13 +4,21 @@
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-toolbar class="md-tall sg-padded md-hue-2">
<div layout="column" layout-align="center start">
<sg-avatar-image class="md-tile-left"
sg-email="activeUser.email"
size="64"><!-- avatar --></sg-avatar-image>
<p class="sg-md-title">{{activeUser.identification}}</p>
<p class="md-caption">{{activeUser.email}}</p>
<md-toolbar class="sg-padded md-hue-2 md-tall">
<sg-avatar-image class="md-tile-left"
sg-email="activeUser.email"
size="40"><!-- avatar --></sg-avatar-image>
<div layout="row" layout-align="space-between center">
<div style="overflow: hidden">
<p class="sg-md-title sg-no-wrap">{{activeUser.identification}}</p>
<p class="md-caption sg-no-wrap">{{activeUser.email}}</p>
</div>
<md-button class="md-icon-button"
ng-hide="baseURL.endsWith('/Preferences')"
ng-href="{{activeUser.path.preferences}}">
<md-icon>settings</md-icon>
<md-tooltip><var:string label:value="Preferences"/></md-tooltip>
</md-button>
</div>
</md-toolbar>
</container>
UI/Templates/UIxTopnavToolbarTemplate.wox
+45 -56
View File
@@ -5,71 +5,60 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<div class="sg-toolbar-group-1" layout="row">
<div class="sg-toolbar-group-1 sg-toolbar-secondary" layout="row">
<md-button ng-click="toggleLeft()"
class="hide-gt-sm sg-button-navicon sg-icon-button"
label:aria-label="Toggle Menu">
<md-icon>menu</md-icon>
class="md-icon-button"
label:aria-label="Toggle Menu"
ng-switch="leftIsClose">
<md-icon ng-switch-when="true">menu</md-icon>
<md-icon ng-switch-when="false">arrow_back</md-icon>
</md-button>
<div class="sg-date-group sg-padded" layout="column" layout-align="space-between end">
<div class="sg-date-group sg-padded hide-xs" layout="column" layout-align="space-between end">
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
<p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
<p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
</div>
<p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
<p class="sg-md-display-3 sg-date-today hide-xs" ng-bind="currentDay.day"><!-- day --></p>
</div>
<div class="sg-toolbar-group-last">
<md-menu>
<md-button label:aria-label="Modules"
class="sg-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon>apps</md-icon>
<div class="sg-toolbar-group-last" layout="row" layout-align="center center">
<div class="md-toolbar-tools" layout="row"
layout-align="space-around start">
<md-button class="md-icon-button"
ng-show="activeUser.path.calendar.length"
ng-disabled="baseURL.endsWith('/Calendar/')"
ng-href="{{activeUser.path.calendar}}">
<md-tooltip><var:string label:value="Calendar"/></md-tooltip>
<md-icon>event</md-icon>
</md-button>
<md-menu-content width="8">
<div class="md-toolbar-tools" layout="row"
layout-align="space-around start">
<md-button class="sg-icon-button"
ng-show="activeUser.path.calendar.length"
ng-disabled="baseURL.endsWith('/Calendar/')"
ng-href="{{activeUser.path.calendar}}">
<md-icon>event</md-icon>
<md-tooltip><var:string label:value="Calendar"/></md-tooltip>
</md-button>
<md-button class="sg-icon-button"
ng-disabled="baseURL.endsWith('/Contacts/')"
ng-href="{{activeUser.path.contacts}}">
<md-icon>contacts</md-icon>
<md-tooltip><var:string label:value="Address Book"/></md-tooltip>
</md-button>
<md-button class="sg-icon-button"
ng-show="activeUser.path.mail.length"
ng-disabled="baseURL.endsWith('/Mail/')"
ng-href="{{activeUser.path.mail}}">
<md-icon>email</md-icon>
<md-tooltip><var:string label:value="Mail"/></md-tooltip>
</md-button>
<md-button class="sg-icon-button"
ng-disabled="baseURL.endsWith('/Preferences/')"
ng-href="{{activeUser.path.preferences}}">
<md-icon>settings</md-icon>
<md-tooltip><var:string label:value="Preferences"/></md-tooltip>
</md-button>
<md-button class="sg-icon-button"
ng-disabled="baseURL.endsWith('/Administration/')"
ng-show="activeUser.isSuperUser"
ng-href="{{activeUser.path.administration}}">
<md-icon>settings_applications</md-icon>
<md-tooltip><var:string label:value="Administration"/></md-tooltip>
</md-button>
<md-button class="sg-icon-button"
ng-show="activeUser.path.logoff.length"
ng-href="{{activeUser.path.logoff}}">
<md-icon>settings_power</md-icon>
<md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
</md-button>
</div>
</md-menu-content>
</md-menu>
<md-button class="md-icon-button"
ng-disabled="baseURL.endsWith('/Contacts/')"
ng-href="{{activeUser.path.contacts}}">
<md-icon>contacts</md-icon>
<md-tooltip><var:string label:value="Address Book"/></md-tooltip>
</md-button>
<md-button class="md-icon-button"
ng-show="activeUser.path.mail.length"
ng-disabled="baseURL.endsWith('/Mail/')"
ng-href="{{activeUser.path.mail}}">
<md-icon>email</md-icon>
<md-tooltip><var:string label:value="Mail"/></md-tooltip>
</md-button>
<md-button class="md-icon-button"
ng-disabled="baseURL.endsWith('/Administration/')"
ng-show="activeUser.isSuperUser"
ng-href="{{activeUser.path.administration}}">
<md-icon>settings_applications</md-icon>
<md-tooltip><var:string label:value="Administration"/></md-tooltip>
</md-button>
<div class="hide-xs" style="width: 40px"><!-- divider --></div>
<md-button class="md-icon-button"
ng-show="activeUser.path.logoff.length"
ng-href="{{activeUser.path.logoff}}">
<md-icon>settings_power</md-icon>
<md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
</md-button>
</div>
</div>
</container>
UI/WebServerResources/js/Common/Common.app.js
+12 -7
View File
@@ -131,6 +131,7 @@
*/
configure.$inject = ['$logProvider', '$compileProvider', '$mdThemingProvider', '$httpProvider'];
function configure($logProvider, $compileProvider, $mdThemingProvider, $httpProvider) {
// Accent palette
$mdThemingProvider.definePalette('sogo-green', {
'50': 'eaf5e9',
'100': 'cbe5c8',
@@ -142,14 +143,16 @@
'700': '388e3c',
'800': '367d2e',
'900': '225e1b',
'A100': 'b9f6ca',
// 'A100': 'b9f6ca',
'A100': 'ffffff', // assigned to md-hue-1
'A200': '69f0ae',
'A400': '00e676',
'A700': '00c853',
'contrastDefaultColor': 'dark',
'contrastDarkColors': ['50', '100', '200'],
// 'contrastDarkColors': ['50', '100', '200', 'A100'],
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900']
});
// Primary palette
$mdThemingProvider.definePalette('sogo-blue', {
'50': 'f0faf9',
'100': 'e1f5f3',
@@ -167,8 +170,9 @@
'A700': '00b0c0',
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50', '100', '200'],
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
// 'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
});
// Background palette
$mdThemingProvider.definePalette('sogo-paper', {
'50': 'fcf7f8',
'100': 'f7f1dc',
@@ -191,14 +195,15 @@
// Default theme definition
$mdThemingProvider.theme('default')
.primaryPalette('sogo-blue', {
'default': '300',
'hue-1': '100',
'hue-2': '400',
'default': '900',
'hue-1': '400',
'hue-2': '800',
'hue-3': 'A700'
})
.accentPalette('sogo-green', {
'default': '500',
'hue-1': '200',
// 'hue-1': '200',
'hue-1': 'A100',
'hue-2': '300',
'hue-3': 'A700'
})
UI/WebServerResources/js/Common/mdColors.app.js
+12 -14
View File
@@ -40,7 +40,7 @@
fgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
bgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
fgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-fg']) + ' { color:{{value}};}'),
bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}};}'),
bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}}; color:{{contrast}}; }'),
bdrColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bdr']) + ' { border-color:{{value}};}'),
fgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
bgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
@@ -79,24 +79,22 @@
function addRule(fgInterpolate, bgInterpolate, themeName, paletteName, colorArray, hueName){
// Set up interpolation functions to build css rules.
if (!colorArray) return;
var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')';
var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')',
colorContrast = 'rgb(' + colorArray.contrast[0] + ',' + colorArray.contrast[1] + ',' + colorArray.contrast[2] + ')',
context = {
theme: themeName,
palette: paletteName,
value: colorValue,
contrast: colorContrast,
hue: hueName
};
// Insert foreground color rule
customSheet.insertRule(fgInterpolate({
theme: themeName,
palette: paletteName,
value: colorValue,
hue: hueName
}), index);
customSheet.insertRule(fgInterpolate(context), index);
index += 1;
// Insert background color rule
customSheet.insertRule(bgInterpolate({
theme: themeName,
palette: paletteName,
value: colorValue,
hue: hueName
}), index);
customSheet.insertRule(bgInterpolate(context), index);
index += 1;
}
UI/WebServerResources/js/Common/navController.js
+1 -1
View File
@@ -15,7 +15,7 @@
$scope.isPopup = sgSettings.isPopup;
$scope.activeUser = sgSettings.activeUser();
$scope.baseURL = sgSettings.baseURL();
$scope.leftIsClose = false;
$scope.leftIsClose = $mdMedia(sgConstant.xs);
// Show current day in top bar
$scope.currentDay = window.currentDay;
UI/WebServerResources/js/Contacts/CardController.js
+11 -32
View File
@@ -35,7 +35,8 @@
vm.cancel = cancel;
vm.confirmDelete = confirmDelete;
vm.exportCard = exportCard;
vm.viewRawSource = viewRawSource;
vm.toggleRawSource = toggleRawSource;
vm.showRawSource = false;
function addOrgUnit() {
var i = vm.card.$addOrgUnit('');
@@ -137,38 +138,16 @@
window.location.href = ApplicationBaseURL + '/' + vm.currentFolder.id + '/export?uid=' + vm.card.id;
}
function viewRawSource($event) {
Card.$$resource.post(vm.currentFolder.id + '/' + vm.card.id, "raw").then(function(data) {
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Card Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,
' </pre>',
' </md-dialog-content>',
' <md-dialog-actions>',
' <md-button ng-click="close()">' + l('Close') + '</md-button>',
' </md-dialog-actions>',
'</md-dialog>'
].join(''),
controller: CardRawSourceDialogController
function toggleRawSource($event) {
if (!vm.showRawSource && !vm.rawSource) {
Card.$$resource.post(vm.currentFolder.id + '/' + vm.card.id, "raw").then(function(data) {
vm.rawSource = data;
vm.showRawSource = true;
});
/**
* @ngInject
*/
CardRawSourceDialogController.$inject = ['scope', '$mdDialog'];
function CardRawSourceDialogController(scope, $mdDialog) {
scope.close = function() {
$mdDialog.hide();
};
}
});
}
else {
vm.showRawSource = !vm.showRawSource;
}
}
}
UI/WebServerResources/js/Mailer/MessageController.js
+12 -33
View File
@@ -16,7 +16,7 @@
vm.message = stateMessage;
vm.service = Message;
vm.tags = { searchText: '', selected: '' };
vm.showFlags = stateMessage.flags.length > 0;
vm.showFlags = stateMessage.flags && stateMessage.flags.length > 0;
vm.doDelete = doDelete;
vm.close = close;
vm.reply = reply;
@@ -27,7 +27,8 @@
vm.closePopup = closePopup;
vm.newMessage = newMessage;
vm.saveMessage = saveMessage;
vm.viewRawSource = viewRawSource;
vm.toggleRawSource = toggleRawSource;
vm.showRawSource = false;
// Watch the message model "flags" attribute to remove on-the-fly a tag from the IMAP message
// when removed from the message viewer.
@@ -142,38 +143,16 @@
window.location.href = ApplicationBaseURL + '/' + vm.mailbox.id + '/saveMessages?uid=' + vm.message.uid;
}
function viewRawSource($event) {
Message.$$resource.post(vm.message.id, "viewsource").then(function(data) {
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Message Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,
' </pre>',
' </md-dialog-content>',
' <md-dialog-actions>',
' <md-button ng-click="close()">' + l('Close') + '</md-button>',
' </md-dialog-actions>',
'</md-dialog>'
].join(''),
controller: MessageRawSourceDialogController
function toggleRawSource($event) {
if (!vm.showRawSource && !vm.rawSource) {
Message.$$resource.post(vm.message.id, "viewsource").then(function(data) {
vm.rawSource = data;
vm.showRawSource = true;
});
/**
* @ngInject
*/
MessageRawSourceDialogController.$inject = ['scope', '$mdDialog'];
function MessageRawSourceDialogController(scope, $mdDialog) {
scope.close = function() {
$mdDialog.hide();
};
}
});
}
else {
vm.showRawSource = !vm.showRawSource;
}
}
}
UI/WebServerResources/js/Scheduler/ComponentController.js
+4 -3
View File
@@ -19,7 +19,7 @@
vm.replyAllOccurrences = replyAllOccurrences;
vm.deleteOccurrence = deleteOccurrence;
vm.deleteAllOccurrences = deleteAllOccurrences;
vm.viewRawSource = viewRawSource;
vm.toggleRawSource = toggleRawSource;
// Load all attributes of component
if (angular.isUndefined(vm.component.$futureComponentData)) {
@@ -106,15 +106,16 @@
});
}
function viewRawSource($event) {
function toggleRawSource($event) {
Calendar.$$resource.post(vm.component.pid + '/' + vm.component.id, "raw").then(function(data) {
$mdDialog.hide();
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Raw Source') + '">',
'<md-dialog flex="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,
UI/WebServerResources/scss/components/button/button.scss
+14 -6
View File
@@ -20,6 +20,15 @@
width: 100%;
}
// Remove left margin when in first menu button of dialogs
.md-toolbar-tools {
md-menu:first-child {
.md-icon-button:first-child {
margin-left: 0
}
}
}
///
/// sg-icon-button
/// according to Material design specs:
@@ -50,13 +59,12 @@ $button-fab-height: 56px;
a.md-button.sg-icon-button,
.md-button.sg-icon-button,
md-list md-list-item button.md-button.sg-icon-button {
z-index: 1;
//line-height: inherit;
border-radius: 50%;
min-width: $iconButton-size;
@extend .md-button.md-icon-button;
transition: $iconButton-transition;
.md-ripple-container {
border-radius: 50%;
&:hover:not([disabled]),
&:active {
background-color: transparent;
transform: scale($iconButton-hover-scale);
}
}
UI/WebServerResources/scss/components/card/card.scss
+12
View File
@@ -8,6 +8,18 @@ md-card {
transition: $swift-ease-in-out;
}
md-card-actions:not(.layout-column) {
.md-button {
// "last-of-type" doesn't work well when we have multiple types so we overwrite md's directive
&.md-icon-button,
&.md-icon-button:last-of-type,
&.sg-icon-button,
&.sg-icon-button:last-of-type {
margin: 0 $baseline-grid * .5;
}
}
}
// Collapsed/expanded states for cards in ACL editor
&.sg-collapsed, &.sg-expanded {
transition: $swift-ease-in-out;
UI/WebServerResources/scss/components/dialog/dialog.scss
+5 -5
View File
@@ -15,17 +15,17 @@
body.popup {
md-dialog {
&[flex-sm="100"],
&.flex-sm-100 {
&[flex-xs="100"],
&.flex-xs-100 {
@include fullscreen;
}
}
}
@media (max-width: $layout-breakpoint-sm) {
@media (max-width: $layout-breakpoint-xs) {
md-dialog {
&[flex-sm="100"],
&.flex-sm-100 {
&[flex-xs="100"],
&.flex-xs-100 {
@include fullscreen;
}
}
UI/WebServerResources/scss/components/list/list.scss
+2 -2
View File
@@ -21,7 +21,7 @@ $sg-color-chip-width: $subhead-font-size-base;
md-list-item {
.md-list-item-inner {
flex-grow: 1; // use all column space
overflow: hidden;
//overflow: hidden;
// Gain some space since we want small list items
& > md-checkbox {
@@ -173,7 +173,7 @@ div.md-tile-left {
&-counter-badge {
border-left-width: 1px;
border-left-color: #999;
border-left-color: $colorGrey500;
border-style: solid;
margin: 0;
padding: 0 rem(0.500);
UI/WebServerResources/scss/components/menu/menu.scss
+8
View File
@@ -1,2 +1,10 @@
/// menu.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
md-card {
md-card-actions:not(.layout-column) {
.md-menu {
padding: 0; // don't add padding so all icon buttons are of the same height
}
}
}
UI/WebServerResources/scss/components/toolbar/toolbar.scss
+6
View File
@@ -50,6 +50,12 @@ md-toolbar,
transform: translateX(-$touch-zone-width);
}
}
&.md-accent.md-hue-1 {
md-icon {
// Hack until this bug is fixed: https://github.com/angular/material/issues/5989
color: rgba(0,0,0,0.54);
}
}
}
.md-toolbar-tools.md-toolbar-tools-top {
UI/WebServerResources/scss/views/LoginUI.scss
+1
View File
@@ -2,6 +2,7 @@
[ui-view="login"] {
md-content {
padding: 0;
@include to(xs) {
[id=logo] {
text-align: center;
UI/WebServerResources/scss/views/MailerUI.scss
+26 -1
View File
@@ -40,7 +40,7 @@
.msg-date {
font-size: $sg-font-size-2;
text-align: right;
// text-align: right;
// margin-bottom: 10px;
// margin-bottom: ($mg/2);
}
@@ -77,6 +77,9 @@ md-sidenav {
}
.sg-item-name {
line-height: 6 * $baseline-grid; // $list-item-height, 48px
&:focus {
outline: none;
}
}
}
.msg-attachment-image,
@@ -144,6 +147,28 @@ md-sidenav {
}
}
.sg-mail-editor {
.pseudo-input-container {
max-height: 400px;
overflow: hidden;
overflow-y: auto;
transition: $swift-ease-in;
&.ng-hide {
max-height: 0;
overflow: hidden;
}
}
md-dialog-content {
padding-bottom: 0;
padding-top: 0;
}
md-chip-template {
md-icon[ng-click] {
cursor: pointer;
}
}
}
//$total-columns: 13;
//$column-gutter: 0;
UI/WebServerResources/scss/views/SchedulerUI.scss
+9
View File
@@ -137,6 +137,15 @@ $block_radius: 3px;
}
}
md-card {
// All views wrap a md-card
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
md-content[sg-calendar-scroll-view] {
overflow-y: scroll;
overflow-x: hidden;
UI/WebServerResources/scss/views/_view.scss
+31 -1
View File
@@ -165,5 +165,35 @@ $detailView-width: grid-step(8) !global;
right: 0;
overflow-x: hidden;
}
md-card {
height: 100%;
margin: 0;
}
}
}
// Flippable view card, used to show raw source of cards and messages
perspective: 1000px;
.sg-reversible {
transform-style: preserve-3d;
transition: transform 0.5s;
left: 0;
width: 100%;
height: 100%;
position: absolute;
&.sg-flip {
transform: rotateY( 180deg );
}
.sg-face, .sg-back {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.sg-face {
transform: rotateY( 0deg );
}
.sg-back {
transform: rotateY( 180deg );
}
}
}