Integrate md-icon using the Material Icons font

This commit is contained in:
Francis Lachapelle
2015-07-03 21:42:21 -04:00
parent b39dedd2d2
commit 2337d4057f
28 changed files with 441 additions and 441 deletions
@@ -65,14 +65,14 @@
<input type="text" ng-model="unit.value"
sg-focus-on="orgUnit_{{$index}}"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.card.$delete('orgUnits', $index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('orgUnits', $index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addOrgUnit($event)">
<i class="md-icon-add"><!-- plus icon button--></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addOrgUnit($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Add Organizational Unit"/>
@@ -108,15 +108,15 @@
<input type="email" ng-model="email.value"
sg-focus-on="email_{{$index}}"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.card.$delete('emails', $index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('emails', $index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addEmail()">
<i class="md-icon-add"><!-- new --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addEmail()">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="New Email Address"/>
@@ -146,15 +146,15 @@
<input type="text" ng-model="phone.value"
sg-focus-on="phone_{{$index}}"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.card.$delete('phones', $index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('phones', $index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addPhone()">
<i class="md-icon-add"><!-- new --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addPhone()">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="New Phone Number"/>
@@ -175,14 +175,14 @@
</label>
<input type="url" ng-model="url.value" sg-focus-on="url_{{$index}}"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.card.$delete('urls', $index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('urls', $index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addUrl()">
<i class="md-icon-add"><!-- new --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addUrl()">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="New URL"/>
@@ -250,14 +250,14 @@
</label>
<input type="text" ng-model="address.postalcode"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.card.$delete('addresses', $index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('addresses', $index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addAddress()">
<i class="md-icon-add"><!-- new --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addAddress()">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="New Address"/>
@@ -127,16 +127,17 @@
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex">
<!-- <div style="position: relative; display: flex;"> -->
<md-content md-scroll-y="md-scroll-y">
<!-- User's addressbooks -->
<section>
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="AddressBooks"/></span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="New Addressbook..."
ng-click="app.newAddressbook()">
<i class="md-icon-add-circle-outline"><!-- add --></i>
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
@@ -146,9 +147,9 @@
ng-dblclick="app.edit(folder)"
ui-sref="app.addressbook({addressbookId: folder.id})"
ui-sref-active="sg-active">
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
<md-icon>contacts</md-icon>
<p class="sg-item-name"
ng-show="app.editMode!=folder.id"> {{folder.name}}</p>
ng-show="app.editMode!=folder.id">{{folder.name}}</p>
<md-input-container class="md-flex md-tile-content"
ng-show="app.editMode==folder.id">
<input class="folder-name" type="text"
@@ -160,14 +161,12 @@
sg-enter="app.save(folder)"
sg-escape="app.revertEditing(folder)"/>
</md-input-container>
<md-menu class="md-secondary" ng-show="app.service.selectedFolder.id==folder.id">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-menu class="md-secondary"
ng-click="true"
ng-show="app.service.selectedFolder.id==folder.id">
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="app.confirmDelete()">
@@ -200,11 +199,11 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="Subscribe to an Addressbook..."
sg-subscribe="contact"
sg-subscribe-on-select="app.subscribeToFolder(folderData)">
<i class="md-icon-add-circle-outline"><!-- add --></i>
sg-subscribe="contact"
sg-subscribe-on-select="app.subscribeToFolder(folderData)">
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
@@ -214,7 +213,7 @@
ng-dblclick="app.edit(folder)"
ui-sref="app.addressbook({addressbookId: folder.id})"
ui-sref-active="sg-active">
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
<md-icon>contacts</md-icon>
<p class="sg-item-name"
ng-show="editMode!=folder.id">{{folder.name}}</p>
<md-input-container class="md-flex md-tile-content"
@@ -228,13 +227,12 @@
sg-enter="app.save(folder)"
sg-escape="app.revertEditing(folder)"/>
</md-input-container>
<md-menu class="md-secondary" ng-show="app.service.selectedFolder.id==folder.id">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-menu class="md-secondary"
ng-click="true"
ng-show="app.service.selectedFolder.id==folder.id">
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="app.confirmDelete(folder)">
@@ -243,7 +241,6 @@
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
@@ -257,12 +254,13 @@
ng-click="app.select(folder)"
ui-sref="app.addressbook({addressbookId: folder.id})"
ui-sref-active="sg-active">
<i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
<md-icon>public</md-icon>
<p class="sg-item-name">{{folder.name}}</p>
</md-list-item>
</md-list>
</section>
</md-content>
<!-- </div> -->
</md-sidenav>
<section layout="column" class="sg-app-content md-layout-fill" ui-view="addressbook"><!-- contacts list --></section>
@@ -279,7 +277,7 @@
<div class="view-list sg-padded" layout="row" layout-align="space-between center"
sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
<label style="color: white"><md-icon>search</md-icon><var:string label:value="Search"/></label>
<input name="folderSearch" type="search" style="color: white"/>
</md-input-container>
@@ -293,15 +291,15 @@
</div>
</div>
<div layout="row" layout-align="start center" ng-show="addressbook.selectedFolder.$selectedCount() > 0">
<md-button ng-click="addressbook.unselectCards()">
<i class="md-icon-arrow-back"><!-- unselect all --></i>
<md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{addressbook.selectedFolder.$selectedCount()}} selected</label>
<md-button ng-click="addressbook.confirmDeleteSelectedCards()">
<i class="md-icon-delete"><!-- delete --></i>
<md-button class="sg-icon-button" ng-click="addressbook.confirmDeleteSelectedCards()">
<md-icon>delete</md-icon>
</md-button>
<md-button>
<i class="md-icon-email"><!-- email contacts --></i>
<md-button class="sg-icon-button">
<md-icon>email</md-icon>
</md-button>
</div>
</md-toolbar>
@@ -355,10 +353,10 @@
</md-list>
</md-content>
<md-button class="iconButton md-fab md-fab-bottom-right md-accent"
<md-button class="md-fab md-fab-bottom-right md-accent"
label:aria-label="New Contact"
ng-click="addressbook.newComponent($event)">
<i class="md-icon-add"><!-- icon --></i>
<md-icon>add</md-icon>
</md-button>
</div>
@@ -7,9 +7,9 @@
>
<md-card-content>
<md-button class="iconButton show-sm"
<md-button class="sg-icon-button show-sm"
label:aria-label="Close"
ng-click="editor.toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
ng-click="editor.toggleDetailView()"><md-icon>close</md-icon></md-button>
<header class="msg-header">
<div ng-show="editor.card.tag == 'vcard'">
<sg-gravatar-image class="md-tile-left"
@@ -31,14 +31,16 @@
</md-chips>
</div>
<div class="sg-icon-bar--vertical">
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="Edit"
ng-show="editor.currentFolder.isEditable"
ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
<i class="md-icon-create"><!-- edit --></i>
<md-icon>mode_edit</md-icon>
</md-button>
<md-button class="iconButton" aria-label="Delete" ng-click="editor.confirmDelete(editor.card)">
<i class="md-icon-delete"><!-- delete --></i>
<md-button class="sg-icon-button"
label:aria-label="Delete"
ng-click="editor.confirmDelete(editor.card)">
<md-icon>delete</md-icon>
</md-button>
</div>
</header>
@@ -10,7 +10,7 @@
<md-dialog-content>
<h2 class="md-headline"><var:string label:value="Subscribe"/></h2>
<md-input-container>
<label><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
<label><md-icon>search</md-icon><var:string label:value="Search"/></label>
<input type="input"
autocomplete="off"
ng-model="vm.searchText"
@@ -26,22 +26,21 @@
<div class="sg-avatar"><!-- normal-user --></div>
<span class="sg-item-name">{{user.$shortFormat()}}</span>
<span class="md-secondary md-display-1">
<i ng-class="{ 'md-icon-expand-more': user.uid != vm.selectedUser.uid,
'md-icon-expand-less': user.uid == vm.selectedUser.uid }"><!--icon--></i>
<md-icon ng-class="{ 'icon-expand-more': user.uid != vm.selectedUser.uid,
'icon-expand-less': user.uid == vm.selectedUser.uid }"><!--icon--></md-icon>
</span>
</div>
</md-button>
<md-list layout-fill="true"
ng-show="user == vm.selectedUser">
<md-list-item ng-show="user.$$folders.length == 0">
<i class="md-icon-warning"><!-- no subscription --></i>
<md-icon>warning</md-icon>
<var:string label:value="No possible subscription"/>
</md-list-item>
<md-list-item layout="row" layout-fill="true"
ng-repeat="folder in user.$$folders">
<i class="md-padding"
ng-class="{ 'md-icon-contacts': folder.type == 'Contact',
'md-icon-today': folder.type == 'Appointment' }"><!--icon--></i>
<md-icon ng-class="{'icon-contacts': folder.type == 'Contact',
'icon-event': folder.type == 'Appointment'}"><!--icon--></md-icon>
<p class="md-flex sg-item-name">{{folder.displayName}}</p>
<md-button
class="md-raised"
@@ -17,8 +17,8 @@
</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button var:href="pathForDownload">
<div class="md-icon-save md-icon-lg"><!-- save --></div>
<md-button class="sg-icon-button" var:href="pathForDownload">
<md-icon>save</md-icon>
</md-button>
</div>
</md-card>
@@ -10,22 +10,22 @@
<img var:src="mimeImageURL"/>
</div>
<div layout="column" layout-align="start start">
<div layout="column" layout-align="start start" layout-padding="layout-padding">
<div>
<var:string value="filenameForDisplay"/>
</div>
<div>
<div class="md-caption">
<var:string value="bodyInfo.size" formatter="sizeFormatter"/>
</div>
</div>
</div>
<div layout="row" layout-align="end end">
<md-button var:href="pathToAttachment">
<div class="md-icon-open-in-browser md-icon-lg"><!-- open --></div>
<md-button class="sg-icon-button" var:href="pathToAttachment">
<md-icon>open_in_browser</md-icon>
</md-button>
<md-button var:href="pathForDownload">
<div class="md-icon-save md-icon-lg"><!-- save --></div>
<md-button class="sg-icon-button" var:href="pathForDownload">
<md-icon>save</md-icon>
</md-button>
</div>
+10 -10
View File
@@ -95,9 +95,9 @@
<md-list-item ng-repeat="item in message.editable.attachmentAttrs">
<div layout="row" layout-align="space-between center">
<span ng-bind="item.filename"><!-- filename --></span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
ng-click="message.$deleteAttachment(item.filename);">
<i class="md-icon-remove-circle-outline"><!--remove --></i>
<md-icon>remove_circle_outline</md-icon>
</md-button>
</div>
</md-list-item>
@@ -108,15 +108,15 @@
<md-progress-linear md-mode="determinate"
value="{{item.progress}}"
ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
<md-button class="iconButton"
<md-button class="sg-icon-button"
ng-click="uploader.cancelItem(item)"
ng-show="item.isUploading">
<i class="md-icon-cancel"><!--cancel --></i>
<md-icon>cancel</md-icon>
</md-button>
<md-button class="iconButton"
<md-button class="sg-icon-button"
ng-click="message.$deleteAttachment(item.file.name);item.remove();"
ng-show="!item.isUploading">
<i class="md-icon-remove-circle-outline"><!--remove --></i>
<md-icon>remove_circle_outline</md-icon>
</md-button>
</div>
</md-list-item>
@@ -131,8 +131,8 @@
<md-button class="iconButton" ng-show="hideBcc"
ng-click="hideBcc = false">Bcc</md-button>
<!--
<md-button class="iconButton" ng-show="hidePriority" ng-click="hidePriority = false">
<i class="md-icon-info-outline"></i>
<md-button class="sg-icon-button" ng-show="hidePriority" ng-click="hidePriority = false">
<md-icon>info_outline</md-icon>
</md-button>
-->
<md-button class="iconButton">
@@ -147,8 +147,8 @@
ng-show="false"/>
<!--
<md-button class="iconButton" ng-click="returnReceipt = !returnReceipt">
<i class="md-icon-receipt"></i>
<md-button class="sg-icon-button" ng-click="returnReceipt = !returnReceipt">
<md-icon>receipt</md-icon>
</md-button>
-->
</div>
@@ -9,6 +9,7 @@
width: 100%;
}
</style>
<md-progress-linear ng-show="mailbox.$isLoading" md-mode="indeterminate"><!-- progress --></md-progress-linear>
<header class="sg-md-subheader sg-md-subheader--fixed">
<h2 class="sg-md-subhead-solo fg-sogoBlue-700">Messages</h2>
</header>
@@ -40,18 +41,18 @@
ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
</div>
<div class="sg-tile-icons">
<i class="md-icon-star" ng-show="currentMessage.isflagged"> </i>
<i class="md-icon-reply" ng-show="currentMessage.isanswered"> </i>
<i class="md-icon-forward" ng-show="currentMessage.isforwarded"> </i>
<i class="md-icon-attach-file disable" ng-show="currentMessage.hasattachment"> </i>
<md-icon ng-show="currentMessage.isflagged">star</md-icon>
<md-icon ng-show="currentMessage.isanswered">reply</md-icon>
<md-icon ng-show="currentMessage.isforwarded">forward</md-icon>
<md-icon ng-show="currentMessage.hasattachment">attach_file</md-icon>
</div>
</md-list-item>
</md-list>
</md-content>
<md-button class="iconButton md-fab md-fab-bottom-right md-accent"
<md-button class="md-fab md-fab-bottom-right md-accent"
label:aria-label="Write a new message"
ui-sref="mail.newMessage()">
<i class="md-icon-add"><!--icon--></i>
<md-icon>add</md-icon>
</md-button>
</div>
+20 -21
View File
@@ -240,10 +240,10 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span>{{account.name}}</span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="New Folder..."
ng-click="newFolder(account)">
<i class="md-icon-add-circle-outline"><!-- add --></i>
<md-icon>add_circle_outline</md-icon>
</md-button>
<md-button class="iconButton"
ng-show="account.id == 0"
@@ -259,7 +259,7 @@
ng-dblclick="editFolder(folder)"
ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
ui-sref-active="sg-active">
<i class="md-icon-folder" ng-class="'sg-child-level-' + folder.level"><!-- icon --></i>
<md-icon ng-class="'sg-child-level-' + folder.level">folder</md-icon>
<p class="sg-item-name"
ng-show="editMode != folder.path">{{folder.name}}</p>
<md-input-container class="md-flex md-tile-content"
@@ -272,13 +272,12 @@
sg-enter="saveFolder(folder)"
sg-escape="revertEditing(folder)"/>
</md-input-container>
<md-menu class="md-secondary" ng-show="currentFolder.path == folder.path">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-menu class="md-secondary"
ng-click="true"
ng-show="currentFolder.path == folder.path">
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="2">
<!-- <md-menu-item>
<md-button type="button" ng-click="TODO">
@@ -330,8 +329,8 @@
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
<div class="sg-toolbar-group-last">
<md-button class="iconButton" label:aria-label="More">
<i class="md-icon-more-vert"><!--icon--></i>
<md-button class="sg-icon-button" label:aria-label="More">
<md-icon>more_vert</md-icon>
</md-button>
</div>
</div>
@@ -341,7 +340,7 @@
<div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
sg-search="mailbox.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
<label style="color: white"><md-icon>search</md-icon><var:string label:value="Search"/></label>
<input name="folderSearch" type="search" style="color: white"/>
</md-input-container>
@@ -357,19 +356,19 @@
</div>
</div>
<div layout="row" layout-align="start center" ng-show="mailbox.$selectedCount() > 0">
<md-button ng-click="unselectMessages()">
<i class="md-icon-arrow-back"><!-- unselect all --></i>
<md-button class="sg-icon-button" ng-click="unselectMessages()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{mailbox.$selectedCount()}} selected</label>
<md-button ng-click="confirmDeleteSelectedMessages()">
<i class="md-icon-delete"><!-- delete --></i>
<md-button class="sg-icon-button" ng-click="confirmDeleteSelectedMessages()">
<md-icon>delete</md-icon>
</md-button>
<md-button>
<i class="md-icon-star"><!-- flag mails --></i>
<md-button class="sg-icon-button">
<md-icon>star</md-icon>
</md-button>
<md-menu>
<md-button aria-label="Copy messages" ng-click="$mdOpenMenu()">
<i class="md-icon-content-copy"><!-- copy mails --></i>
<md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
<md-icon>content_copy</md-icon>
</md-button>
<md-menu-content width="4">
<div ng-repeat="account in accounts track by account.id">
+17 -18
View File
@@ -8,15 +8,14 @@
xmlns:uix="OGo:uix">
<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
<md-button class="iconButton show-sm" ng-click="toggleDetailView()">
<i class="md-icon-close"><!--icon--></i>
<md-button class="sg-icon-button show-sm" ng-click="toggleDetailView()">
<md-icon>close</md-icon>
</md-button>
<header class="msg-header">
<div class="msg-header-content">
<div layout="row" layout-align="start center">
<md-button class="iconButton" aria-label="flagged" ng-click="message.toggleFlag()">
<i class="md-icon-star"
ng-class="{'flagged': message.isflagged}"><!-- flag --></i>
<md-button class="sg-icon-button sg-msg-flag" label:aria-label="flagged" ng-click="message.toggleFlag()">
<md-icon ng-class="{'flagged': message.isflagged}">star</md-icon>
</md-button>
<h3 class="sg-md-title-msg" ng-bind="message.subject"><!-- subject --></h3>
</div>
@@ -43,7 +42,7 @@
<button md-chip-remove="md-chip-remove"
class="md-chip-remove"
ng-click="message.removeTag($chip)">
<i class="md-icon-close"><!-- delete tag --></i>
<md-icon>close</md-icon>
</button>
<md-autocomplete
md-selected-item="tags.selected"
@@ -65,37 +64,37 @@
<div class="sg-icon-bar--vertical">
<!-- todo: Replace md-tooltip values by localizable string variable -->
<md-button class="iconButton"
<md-button class="sg-icon-button"
ng-hide="message.isDraft"
ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"
aria-label="reply">
<md-tooltip md-direction="left"><var:string label:value="Reply to Sender Only"/></md-tooltip>
<i class="md-icon-reply"><!-- reply --></i>
<md-icon>reply</md-icon>
</md-button>
<md-button class="iconButton" aria-label="Reply All"
<md-button class="sg-icon-button" aria-label="Reply All"
ng-hide="message.isDraft"
ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})">
<i class="md-icon-reply-all"><!-- reply all --></i>
<md-icon>reply_all</md-icon>
</md-button>
<md-button class="iconButton" aria-label="Forward"
<md-button class="sg-icon-button" aria-label="Forward"
ng-hide="message.isDraft"
ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})">
<i class="md-icon-forward"><!-- forward --></i>
<md-icon>forward</md-icon>
</md-button>
<md-button class="iconButton" aria-label="Edit"
<md-button class="sg-icon-button" aria-label="Edit"
ng-show="message.isDraft"
ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})">
<i class="md-icon-create"><!-- edit --></i>
<md-icon>create</md-icon>
</md-button>
<md-button class="iconButton" aria-label="Delete"
<md-button class="sg-icon-button" aria-label="Delete"
ng-click="doDelete(message)">
<i class="md-icon-delete"><!-- delete --></i>
<md-icon>delete</md-icon>
</md-button>
<md-button class="iconButton" aria-label="Load Images"
<md-button class="sg-icon-button" aria-label="Load Images"
ng-show="message.$hasUnsafeContent"
ng-click="message.loadUnsafeContent()">
<md-tooltip md-direction="left"><var:string label:value="Load Images"/></md-tooltip>
<i class="md-icon-image"><!--icon--></i>
<md-icon>image</md-icon>
</md-button>
</div>
</header>
+3 -3
View File
@@ -115,11 +115,11 @@
</md-switch>
</div>
</form>
<div layout="row" layout-align="end end">
<md-button class="iconButton fg-sogoPaper-500"
<div layout="row" layout-align="end end" ng-cloak="ng-cloak">
<md-button class="sg-icon-button fg-sogoPaper-500"
label:aria-label="About"
ng-click="showAbout()">
<i class="md-icon-info"><!-- about --></i>
<md-icon class="material-icons fg-sogoPaper-500">info</md-icon>
</md-button>
</div>
</div>
+22 -20
View File
@@ -1,15 +1,13 @@
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<var:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:uix="OGo:uix"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label"
className="UIxPageFrame"
>
<md-dialog>
<!DOCTYPE container>
<container
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label"
xmlns:rsrc="OGo:url"
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
<md-dialog flex="50">
<md-dialog-content>
<script type="text/javascript">
var filterId = '<var:string value="filterId"/>';
@@ -64,16 +62,18 @@
<input type="text" ng-model="rule.value"/>
<md-button ng-click="removeMailFilterRule($index)" type="button">
<div class="md-icon-remove"><!-- delete --></div>
<md-button class="sg-icon-button" type="button"
ng-click="removeMailFilterRule($index)">
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
</div>
<md-button ng-click="addMailFilterRule($event)" type="button">
<div class="md-icon-add"><!-- create --></div>
<md-button class="sg-icon-button" type="button"
ng-click="addMailFilterRule($event)">
<md-icon>add</md-icon>
</md-button>
</div>
@@ -116,15 +116,17 @@
<!-- nada -->
<md-button ng-click="removeMailFilterAction($index)" type="button">
<div class="md-icon-remove"><!-- delete --></div>
<md-button class="sg-icon-button" type="button"
ng-click="removeMailFilterAction($index)">
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
<md-button ng-click="addMailFilterAction($event)" type="button">
<div class="md-icon-add"><!-- create --></div>
<md-button class="sg-icon-button" type="button"
ng-click="addMailFilterAction($event)">
<md-icon>add</md-icon>
</md-button>
</div>
@@ -135,4 +137,4 @@
</form>
</md-dialog-content>
</md-dialog>
</var:component>
</container>
+35 -34
View File
@@ -51,8 +51,8 @@
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
<div class="sg-toolbar-group-last">
<md-button class="iconButton" label:aria-label="Menu">
<i class="md-icon-more-vert"><!--icon--></i>
<md-button class="sg-icon-button" label:aria-label="Menu">
<md-icon>more_vert</md-icon>
</md-button>
</div>
</div>
@@ -328,18 +328,20 @@
<md-input-container>
<input type="text" label:aria-label="Calendar Category" ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"/>
</md-input-container>
<md-button type="button"
<md-button class="sg-icon-button" type="button"
layout="row" layout-align="end center"
label:aria-label="Remove Calendar Category"
ng-click="app.removeCalendarCategory($index)">
<div class="md-icon-remove"><!-- delete --></div>
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
<div class="bottomToolbar">
<md-button label:aria-label="Add Calendar Category" ng-click="app.addCalendarCategory()" type="button">
<div class="md-icon-add"><!-- create --></div>
<md-button class="sg-icon-button" type="button"
label:aria-label="Add Calendar Category"
ng-click="app.addCalendarCategory()">
<md-icon>add</md-icon>
</md-button>
</div>
@@ -410,20 +412,19 @@
label:aria-label="Contact Category"
ng-model="app.preferences.defaults.SOGoContactsCategories[$index]"/>
</md-input-container>
<md-button type="button" layout="row" layout-align="end center"
<md-button type="button" class="sg-icon-button"
label:aria-label="Remove Contact Category"
ng-click="app.removeContactCategory($index)"
>
<div class="md-icon-remove md-icon-lg"><!-- delete --></div>
ng-click="app.removeContactCategory($index)">
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
<div class="bottomToolbar">
<md-button type="button"
<md-button class="sg-icon-button" type="button"
label:aria-label="Add Contact Category"
ng-click="app.addContactCategory()">
<div class="md-icon-add"><!-- create --></div>
<md-icon>add</md-icon>
</md-button>
</div>
@@ -574,27 +575,27 @@
<md-input-container>
<input type="text" ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
</md-input-container>
<md-button ng-click="app.editMailFilter($index)"
type="button"
<md-button class="sg-icon-button" type="button"
ng-click="app.editMailFilter($index)"
layout="row" layout-align="end center"
label:aria-label="Edit Filter">
<div class="md-icon-edit md-icon-lg"><!-- edit --></div>
<md-icon>edit</md-icon>
</md-button>
<md-button ng-click="app.removeMailFilter($index)"
type="button"
<md-button class="sg-icon-button" type="button"
ng-click="app.removeMailFilter($index)"
layout="row" layout-align="end center"
label:aria-label="Delete Filter">
<div class="md-icon-remove"><!-- delete --></div>
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
<!-- FIXME: move up/down to be replaced by DnD? -->
<div class="bottomToolbar">
<md-button ng-click="app.addMailFilter($event)"
type="button"
<md-button class="sg-icon-button" type="button"
ng-click="app.addMailFilter($event)"
label:aria-label="Create Filter">
<div class="md-icon-add"><!-- create --></div>
<md-icon>add</md-icon>
</md-button>
</div>
</div>
@@ -616,20 +617,20 @@
label:aria-label="Label"
ng-model="value[0]"/>
</md-input-container>
<md-button type="button"
<md-button class="sg-icon-button" type="button"
layout="row" layout-align="end center"
label:aria-label="Delete Label"
ng-click="app.removeMailLabel(key)">
<div class="md-icon-remove"><!-- delete --></div>
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
<div class="bottomToolbar">
<md-button type="button"
<md-button class="sg-icon-button" type="button"
label:aria-label="Create Label"
ng-click="app.addMailLabel()">
<div class="md-icon-add"><!-- create --></div>
<md-icon>add</md-icon>
</md-button>
</div>
</div>
@@ -651,30 +652,30 @@
ng-model="app.preferences.defaults.AuxiliaryMailAccounts[$index].name"
ng-readonly="$index == 0"/>
</md-input-container>
<md-button ng-click="app.editMailAccount($index)"
type="button"
<md-button class="sg-icon-button" type="button"
ng-click="app.editMailAccount($index)"
layout="row"
layout-align="end center"
label:aria-label="Edit Account">
<div class="md-icon-edit md-icon-lg"><!-- edit --></div>
<md-icon>edit</md-icon>
</md-button>
<md-button ng-click="app.removeMailAccount($index)"
<md-button class="sg-icon-button" type="button"
ng-click="app.removeMailAccount($index)"
ng-show="$index > 0"
type="button"
layout="row"
layout-align="end center"
label:aria-label="Delete Account">
<div class="md-icon-remove md-icon-lg"><!-- delete --></div>
<md-icon>remove</md-icon>
</md-button>
</md-list-item>
</md-list>
<var:if condition="mailAuxiliaryUserAccountsEnabled">
<div class="bottomToolbar">
<md-button ng-click="app.addMailAccount()"
type="button"
<md-button class="sg-icon-button" type="button"
ng-click="app.addMailAccount()"
label:aria-label="Create Account">
<div class="md-icon-add"><!-- create --></div>
<md-icon>add</md-icon>
</md-button>
</div>
</var:if>
@@ -113,14 +113,14 @@
<input type="text" ng-model="attach.value"
sg-focus-on="attachUrl_{{$index}}"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addAttachUrl($event)">
<i class="md-icon-add"><!-- plus icon button--></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Attach"/>
@@ -143,12 +143,12 @@
</md-select>
</md-input-container>
</div>
<md-button type="button" class="iconButton"
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-show="editor.component.repeat.frequency != 'never'"
ng-click="editor.toggleRecurrenceEditor()">
<i ng-class="{'md-icon-more-horiz': !editor.showRecurrenceEditor,
'md-icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></i>
<md-icon ng-class="{'icon-more-horiz': !editor.showRecurrenceEditor,
'icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></md-icon>
</md-button>
</div>
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
@@ -188,10 +188,11 @@
</sg-gravatar-image>
</div>
</div>
<md-button type="button" class="iconButton"
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-click="editor.toggleAttendeesEditor()">
<i ng-class="{'md-icon-expand-more': !editor.showAttendeesEditor, 'md-icon-expand-less': editor.showAttendeesEditor}"><!-- toggle attendees details --></i>
<md-icon ng-class="{'icon-expand-more': !editor.showAttendeesEditor,
'icon-expand-less': editor.showAttendeesEditor}"><!-- toggle attendees details --></md-icon>
</md-button>
</div>
<div ng-show="editor.showAttendeesEditor" class="sg-subcontent attendees">
+4 -4
View File
@@ -22,16 +22,16 @@
<div layout="row" layout-align="center">
<h5>
<md-button
class="iconButton"
class="sg-icon-button"
label:aria-label="Previous Day"
var:date="prevDayQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<var:string value="currentDayName" />
<md-button
class="iconButton"
class="sg-icon-button"
label:aria-label="Next Day"
var:date="nextDayQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
</h5>
</div>
<div id="calendarContent">
+30 -46
View File
@@ -159,10 +159,10 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="New Calendar..."
ng-click="calendars.newCalendar()">
<i class="md-icon-add-circle-outline"><!-- add --></i>
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
@@ -174,14 +174,10 @@
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="calendars.confirmDelete(calendar)">
@@ -211,9 +207,7 @@
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
@@ -222,11 +216,11 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="Subscribe to a Calendar..."
sg-subscribe="calendar"
sg-subscribe-on-select="calendars.subscribeToFolder(folderData)">
<i class="md-icon-add-circle-outline"><!-- add --></i>
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
@@ -238,14 +232,10 @@
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="calendars.confirmDelete(calendar)">
@@ -266,7 +256,6 @@
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
@@ -275,10 +264,10 @@
<md-subheader class="sg-md-subheader">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>
<md-button class="iconButton"
<md-button class="sg-icon-button"
label:aria-label="Subscribe to a web calendar..."
ng-click="calendars.addWebCalendar()">
<i class="md-icon-add-circle-outline"><!-- add --></i>
<md-icon>add_circle_outline</md-icon>
</md-button>
</div>
</md-subheader>
@@ -290,14 +279,10 @@
ng-false-value="0"
label:aria-label="Enable"><!-- enable --></md-checkbox>
<p class="sg-item-name">{{calendar.name}}</p>
<md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
<md-button class="iconButton"
label:aria-label="Options"
ng-click="$mdOpenMenu()">
<i class="md-icon-more-vert" md-menu-origin="md-menu-origin"><!-- options --></i>
</md-button>
<md-icon label:aria-label="Options"
ng-click="$mdOpenMenu()"
md-menu-origin="md-menu-origin">more_vert</md-icon>
<md-menu-content width="2">
<md-menu-item>
<md-button type="button" ng-click="calendars.confirmDelete(calendar)">
@@ -318,7 +303,6 @@
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
</section>
@@ -332,8 +316,8 @@
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
<div class="sg-toolbar-group-2">
<md-button class="iconButton" label:aria-label="Search">
<i class="md-icon-search"><!--icon--></i>
<md-button class="sg-icon-button" label:aria-label="Search">
<md-icon>search</md-icon>
</md-button>
</div>
</div><!-- .md-toolbar-tools -->
@@ -341,7 +325,7 @@
<div class="view-list sg-padded" layout="row" layout-align="space-between center"
sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
<label style="color: white"><md-icon>search</md-icon><var:string label:value="Search"/></label>
<input name="folderSearch" type="search" style="color: white"/>
</md-input-container>
<div class="sg-toolbar-group">
@@ -352,15 +336,15 @@
</div>
</div>
<div class="sg-padded">
<a class="iconButton md-button md-default-theme"
<a class="sg-icon-button md-button"
label:aria-label="Day"
href="#/calendar/day"><i class="md-icon-view-day"><!-- day view --></i></a>
<a class="iconButton md-button md-default-theme"
href="#/calendar/day"><md-icon>view_day</md-icon></a>
<a class="sg-icon-button md-button"
label:aria-label="Week"
href="#/calendar/week"><i class="md-icon-view-week"><!-- week view --></i></a>
<a class="iconButton md-button md-default-theme"
href="#/calendar/week"><md-icon>view_week</md-icon></a>
<a class="sg-icon-button md-button"
label:aria-label="Month"
href="#/calendar/month"><i class="md-icon-view-module"><!-- month view --></i></a>
href="#/calendar/month"><md-icon>view_module</md-icon></a>
</div>
</div>
</md-toolbar>
@@ -383,8 +367,8 @@
<p>{{event.c_location}}</p>
<p class="md-secondary">
{{event.formatted_startdate}}
<i class="md-icon-repeat" ng-show="event.c_iscycle"><!-- recurrent --></i>
<i class="md-icon-alarm" ng-show="event.c_nextalarm"><!-- alarm --></i>
<md-icon ng-show="event.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</p>
</div>
</md-list-item>
@@ -403,8 +387,8 @@
<h3>{{task.c_title}}</h3>
<p class="md-secondary">
{{task.formatted_enddate}}
<i class="md-icon-repeat" ng-show="task.c_iscycle"><!-- recurrent --></i>
<i class="md-icon-alarm" ng-show="task.c_nextalarm"><!-- alarm --></i>
<md-icon ng-show="task.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</p>
</div>
</md-list-item>
@@ -412,10 +396,10 @@
</md-tab>
</md-tabs>
</md-content>
<md-button class="iconButton md-fab md-fab-bottom-right md-accent hide-sm"
<md-button class="md-fab md-fab-bottom-right md-accent hide-sm"
label:aria-label="New Appointment"
ng-click="list.newComponent()">
<i class="md-icon-add"><!--icon--></i>
<md-icon>add</md-icon>
</md-button>
</div>
<md-content class="view-detail sg-padded" ui-view="calendarView"><!-- calendar view --></md-content>
+4 -4
View File
@@ -24,16 +24,16 @@
<div layout="row" layout-align="center">
<h5>
<md-button
class="iconButton"
class="sg-icon-button"
label:aria-label="Previous Month"
var:date="prevMonthQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<var:string value="monthNameOfThisMonth" />
<md-button
class="iconButton"
class="sg-icon-button"
label:aria-label="Next Month"
var:date="nextMonthQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
</h5>
</div>
<div class="monthView">
+4 -4
View File
@@ -9,16 +9,16 @@
<div layout="row" layout-align="center">
<h5>
<md-button
class="iconButton"
class="sg-icon-button"
label:aria-label="Previous Week"
var:date="prevWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
<var:string value="currentWeekName" />
<md-button
class="iconButton"
class="sg-icon-button"
label:aria-label="Next Week"
var:date="nextWeekQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
</h5>
</div>
<div id="calendarContent">
@@ -120,14 +120,14 @@
<input type="text" ng-model="attach.value"
sg-focus-on="attachUrl_{{$index}}"/>
</md-input-container>
<md-button class="iconButton" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<i class="md-icon-remove-circle"><!-- remove --></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
<md-icon>remove_circle</md-icon>
</md-button>
</div>
</div>
<div class="md-layout-margin" layout="row" layout-align="start center">
<md-button class="iconButton" type="button" ng-click="editor.addAttachUrl($event)">
<i class="md-icon-add"><!-- plus icon button--></i>
<md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
<md-icon>add_circle</md-icon>
</md-button>
<label class="button-label">
<var:string label:value="Attach"/>
@@ -150,12 +150,12 @@
</md-select>
</md-input-container>
</div>
<md-button type="button" class="iconButton"
<md-button type="button" class="sg-icon-button"
label:aria-label="repeat_CUSTOM"
ng-show="editor.component.repeat.frequency != 'never'"
ng-click="editor.toggleRecurrenceEditor()">
<i ng-class="{'md-icon-more-horiz': !editor.showRecurrenceEditor,
'md-icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></i>
<md-icon ng-class="{'icon-more-horiz': !editor.showRecurrenceEditor,
'icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></md-icon>
</md-button>
</div>
<div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
+3 -3
View File
@@ -23,10 +23,10 @@
<div class="sg-md-subhead-multi">{{user.cn}}</div>
<div class="sg-md-body-multi">{{user.c_email}}</div>
</div>
<md-button ng-click="acl.removeUser(user)"
type="button"
<md-button class="sg-icon-button" type="button"
ng-click="acl.removeUser(user)"
ng-hide="user.uid != acl.selectedUser.uid || user.$isSpecial()">
<i class="md-icon-delete"><!-- delete --></i>
<md-icon>delete</md-icon>
</md-button>
</div>
</md-button>
+40 -28
View File
@@ -89,16 +89,16 @@
<var:if condition="isCalendar">
<md-list-item>
<md-button class="md-list-item-content" ng-disabled="true">
<i class="md-icon-event"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Calendar"/></span>
<md-icon>event</md-icon>
<var:string label:value="Calendar"/>
</md-button>
</md-list-item>
</var:if>
<var:if condition="isCalendar" const:negate="YES">
<md-list-item>
<md-button class="md-list-item-content" var:href="relativeCalendarPath">
<i class="md-icon-event"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Calendar"/></span>
<md-icon>event</md-icon>
<var:string label:value="Calendar"/>
</md-button>
</md-list-item>
</var:if>
@@ -108,16 +108,16 @@
<var:if condition="isContacts">
<md-list-item>
<md-button class="md-list-item-content" ng-disabled="true">
<i class="md-icon-contacts"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Address Book"/></span>
<md-icon>contacts</md-icon>
<var:string label:value="Address Book"/>
</md-button>
</md-list-item>
</var:if>
<var:if condition="isContacts" const:negate="YES">
<md-list-item>
<md-button class="md-list-item-content" var:href="relativeContactsPath">
<i class="md-icon-contacts"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Address Book"/></span>
<md-icon>contacts</md-icon>
<var:string label:value="Address Book"/>
</md-button>
</md-list-item>
</var:if>
@@ -127,56 +127,68 @@
<var:if condition="isMail">
<md-list-item>
<md-button class="md-list-item-content" ng-disabled="true">
<i class="md-icon-email"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Mail"/></span>
<md-icon>email</md-icon>
<var:string label:value="Mail"/>
</md-button>
</md-list-item>
</var:if>
<var:if condition="isMail" const:negate="YES">
<md-list-item>
<md-button class="md-list-item-content" var:href="relativeMailPath">
<i class="md-icon-email"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Mail"/></span>
<md-icon>email</md-icon>
<var:string label:value="Mail"/>
</md-button>
</md-list-item>
</var:if>
</var:if>
<!-- PREFERENCES -->
<md-list-item>
<md-button class="md-list-item-content" var:ng-href="relativePreferencesPath">
<i class="md-icon-settings"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Preferences"/></span>
</md-button>
</md-list-item>
<var:if condition="isPreferences">
<md-list-item>
<md-button class="md-list-item-content" ng-disabled="true">
<md-icon>settings</md-icon>
<var:string label:value="Preferences"/>
</md-button>
</md-list-item>
</var:if>
<var:if condition="isPreferences" const:negate="YES">
<md-list-item>
<md-button class="md-list-item-content" var:ng-href="relativePreferencesPath">
<md-icon>settings</md-icon>
<var:string label:value="Preferences"/>
</md-button>
</md-list-item>
</var:if>
<!-- ADMINISTRATION -->
<var:if condition="isSuperUser">
<var:if condition="isAdministration">
<md-list-item>
<md-button class="md-list-item-content" ng-disabled="true">
<i class="md-icon-settings-applications"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Administration"/></span>
<md-icon>settings_applications</md-icon>
<var:string label:value="Administration"/>
</md-button>
</md-list-item>
</var:if>
<var:if condition="isAdministration" const:negate="YES">
<md-list-item>
<md-button class="md-list-item-content" var:href="relativeAdministrationPath">
<i class="md-icon-settings-applications"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Administration"/></span>
<md-icon>settings_applications</md-icon>
<var:string label:value="Administration"/>
</md-button>
</md-list-item>
</var:if>
</var:if>
<!-- DISCONNECT -->
<md-list-item>
<md-button class="md-list-item-content" var:ng-href="logoffPath">
<i class="md-icon-settings-power"><!--icon--></i>
<span class="sg-inline-list-icon-label"><var:string label:value="Disconnect"/></span>
</md-button>
</md-list-item>
<var:if condition="canLogoff">
<md-list-item>
<md-button class="md-list-item-content" var:ng-href="logoffPath">
<md-icon>settings_power</md-icon>
<var:string label:value="Disconnect"/>
</md-button>
</md-list-item>
</var:if>
</var:if>
</md-list>
+3 -4
View File
@@ -5,13 +5,12 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label"
>
<md-toolbar class="md-tall" layout-align="start start">
<md-toolbar class="md-tall">
<div class="md-toolbar-tools sg-padded" layout="row" layout-align="start start">
<md-button
class="iconButton sg-button-navicon"
<md-button class="sg-icon-button"
label:aria-label="Apps"
ng-click="openBottomSheet()">
<i class="md-icon-apps"><!-- icon --></i>
<md-icon>apps</md-icon>
</md-button>
<span class="sg-logo"><!-- logo.svg --></span>
</div>
+4 -2
View File
@@ -6,8 +6,10 @@
xmlns:label="OGo:label"
>
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
<md-button ng-click="toggleLeft()"
class="hide-gt-md sg-button-navicon sg-icon-button"
label:aria-label="Toggle Menu">
<md-icon>menu</md-icon>
</md-button>
<div class="sg-date-group" layout="column" layout-align="space-between end">
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
@@ -7,8 +7,23 @@ md-bottom-sheet.md-default-theme {
background-blend-mode: multiply;
}
md-bottom-sheet {
&.md-list {
md-list-item {
.md-list-item-content {
flex-direction: row; // fix for md bug
flex-grow: 1;
md-icon {
margin-right: $bottom-sheet-icon-after-margin;
}
}
}
}
}
md-bottom-sheet.md-default-theme .md-button.md-default-theme {
&:hover:not([disabled]) {
&:hover:not([disabled]),
&:hover:not([disabled]) md-icon {
background-color: inherit;
background-image: url("../img/cardboard-transp.png");
background-blend-mode: multiply;
@@ -12,12 +12,6 @@ md-sidenav md-list .md-button,
.view-list md-list .md-button {
// dirty fix to squash the theme style
background-color: transparent !important;
padding: 0 $mg;
outline: none;
color: inherit;
text-transform: initial;
font-size: sg-size(button);
-webkit-font-smoothing: auto;
}
.view-list md-list .md-button {
@@ -25,20 +19,13 @@ md-sidenav md-list .md-button,
padding: 0;
}
.md-sidenav-left .md-button [class^="md-icon"] {
//margin-right: 1em;
}
md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
margin: 0;
}
// Expandable button for a collapsable list
.sg-expandable {
width: 100%;
}
///
/// iconButton
/// sg-icon-button
/// according to Material design specs:
/// @link www.google.com/design/spec/style/icons.html#icons-system-icons
/// @link www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-touch-target-size
@@ -64,68 +51,46 @@ $iconButton-transition: all $swift-ease-in-duration $swift-ease-in-timing-functi
$button-fab-width: 56px;
$button-fab-height: 56px;
// Classes
.iconButton,
.md-button.md-default-theme:not([disabled]).iconButton {
// z-index provides a stacking context that prevent ripple-effect from overflowing
a.md-button.sg-icon-button,
.md-button.sg-icon-button {
z-index: 1;
overflow: hidden;
//padding: $iconButton-padding 0;
padding: $iconButton-padding 0;
border-radius: 50%;
//color: inherit;
min-width: $iconButton-size;
transition: $iconButton-transition;
&:hover:not(.md-fab),
&:hover,
&:active {
background-color: transparent;
[class^=md-icon],
[class*=md-icon-] {
transform: scale($iconButton-hover-scale);
}
transform: scale($iconButton-hover-scale);
}
[class^=md-icon],
[class*=md-icon-] {
padding: $iconButton-icon-padding;
color: currentColor;
font-size: $iconButton-icon-size;
transition: $iconButton-transition;
vertical-align: middle;
}
.md-icon-arrow-back {
font-size: sg-size('headline')
}
.md-ripple-container {
border-radius: 50%;
}
}
md-toolbar .md-toolbar-tools:first-of-type .iconButton,
md-toolbar .md-toolbar-tools:first-child .iconButton,
md-toolbar .md-toolbar-tools.md-toolbar-tools-top .iconButton,
md-toolbar .md-toolbar-tools:not(.md-toolbar-tools-bottom) .iconButton {
margin-top: ($mg * -1);
}
// md-toolbar .md-toolbar-tools:first-of-type .iconButton,
// md-toolbar .md-toolbar-tools:first-child .iconButton,
// md-toolbar .md-toolbar-tools.md-toolbar-tools-top .iconButton,
// md-toolbar .md-toolbar-tools:not(.md-toolbar-tools-bottom) .iconButton {
// margin-top: ($mg * -1);
// }
// First button must have it's icon align to margin/padding
md-toolbar .md-toolbar-tools .iconButton:first-child,
.sg-toolbar-group-last .iconButton:first-child {
margin-left: ($mg * -1);
}
md-content.md-padding,
md-card-content {
&> .iconButton:first-child {
margin-top: ($mg * -1);
margin-left: ($mg * -1);
}
}
// md-toolbar .md-toolbar-tools .iconButton:first-child,
// .sg-toolbar-group-last .iconButton:first-child {
// margin-left: ($mg * -1);
// }
// md-content.md-padding,
// md-card-content {
// &> .iconButton:first-child {
// margin-top: ($mg * -1);
// margin-left: ($mg * -1);
// }
// }
// Last button must have it's icon align to margin/padding
md-toolbar .md-toolbar-tools .iconButton:last-child,
.sg-toolbar-group-last .iconButton:last-child {
margin-right: ($mg * -1);
}
// md-toolbar .md-toolbar-tools .iconButton:last-child,
// .sg-toolbar-group-last .iconButton:last-child {
// margin-right: ($mg * -1);
// }
// Icon-bars are for iconButtons, by default they're vertical and at the right
// the modifier class is to reflect those values and leave place to other versions
@@ -207,8 +172,8 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
}
// angular-material is overspecifying so we are and so we have to continue
.sg-button-navicon.iconButton span.md-icon-menu,
.sg-button-navicon.iconButton i[class|="md-icon"] {
.sg-button-navicon.sg-icon-button md-icon,
.sg-button-navicon.sg-icon-button {
padding: 0;
font-size: $iconButton-menu-size;
}
@@ -1,28 +1,2 @@
///
/// @filename _extends.scss
/// @project SOGo
/// @version 3.alpha
/// @module icon
///
/// Imports Material Design Iconic Font 1.0.1 from Bower components for extends
/// Sources must be imported here to prevent overrides by updates
/// The source scss MUST be customized it contains mixin that caused dammages
/// if not compiled in a specific order
/// todo : build with grunt
///
//@import "../../../angular-material/src/components/icon/icon.scss";
@import "../../../bower_components/material-design-iconic-font/scss/_variables";
// variables in source are not defaulted, we MUST override here
// relative (to css) path for src fonts
$md-font-path: "../fonts";
// Set style directive prefix to "md-icon-"
$md-css-prefix: md-icon;
@import "../../../bower_components/material-design-iconic-font/scss/_mixins";
//@import "../../../bower_components/material-design-iconic-font/scss/_path"; // Overiden with base64 src
@import "../../../bower_components/material-design-iconic-font/scss/_core";
@import "../../../bower_components/material-design-iconic-font/scss/_sizes";
@import "../../../bower_components/material-design-iconic-font/scss/_border";
@import "../../../bower_components/material-design-iconic-font/scss/_pulled";
@import "../../../bower_components/material-design-iconic-font/scss/_spinned";
@import "../../../bower_components/material-design-iconic-font/scss/_rotated";
@import "../../../bower_components/material-design-iconic-font/scss/_icons";
/*! icon/_extends.scss - */
@import "../../../angular-material/src/components/icon/icon.scss";
File diff suppressed because one or more lines are too long
@@ -22,7 +22,13 @@
//$item-padding-bottom: 0px !default;
// List item label
md-list {
md-list-item {
.md-list-item-inner {
flex-grow: 1; // use all column space
}
.md-button md-icon {
margin-left: 0;
}
.sg-item-name {
font-size: sg-size(button);
max-width: 75%; // leave some place for a secondary button
@@ -32,9 +38,8 @@ md-list {
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-inline-list-icon-label {
text-transform: uppercase;
.sg-inline-list-icon-label {
text-transform: uppercase;
}
}
@@ -70,15 +75,17 @@ div.md-tile-left {
min-width: $sg-md-grid-pitch + $baseline-grid;
}
.sg-tile-icons {
font-size: $sg-font-size-1;
color: $colorGray;
md-icon {
font-size: $sg-font-size-1;
color: $colorGray;
margin: 2px;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
justify-content: start;
width: (2 * $mg);
height:(7 * $line);
}
.sg-avatars {
margin: ($mg / 2) 0 0 ($mg / 2);
@@ -90,38 +97,38 @@ div.md-tile-left {
// Avatar placeholder
// ------------------------------------
.md-tile-left:before {
font-family: 'Material Design Iconic Font';
font-family: 'Material Icons';
font-size: 40px;
color: rgba(0, 0, 0, 0.26);
}
.md-tile-left-card:before {
@extend .md-tile-left;
content: "\f251";
content: "\e7fd"; // person
}
.md-tile-left-list:before {
@extend .md-tile-left;
content: "\f2d4";
content: "\e7ef"; // group
}
.md-tile-left-selected:before {
@extend .md-tile-left;
content: "\f299";
content: "\e5ca"; // check
}
.md-tile-left-accepted:before {
@extend .md-tile-left;
background-color: rgba(0, 255, 0, 0.3) !important;
content: "\f299";
content: "\e5ca"; // check
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-declined:before {
@extend .md-tile-left;
background-color: rgba(255, 0, 0, 0.3) !important;
content: "\f111";
content: "\e15b"; // remove
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-delegated:before {
@extend .md-tile-left;
background-color: rgba(192, 192, 192, 0.3) !important;
content: "\f298";
content: "\e5c8"; // arrow-forward
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-needs-action:before {
@@ -132,5 +139,5 @@ div.md-tile-left {
.md-tile-left-tentative:before {
@extend .md-tile-left;
background-color: rgba(255, 255, 0, 0.3) !important;
content: "\f2d8";
content: "\e7fd"; // person
}