Improve template for sgSubscribe directive
Francis Lachapelle
parent
9571befbfd
commit
62468d21ef
|
|
@ -6,41 +6,49 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label"
|
||||
xmlns:uix="OGo:uix">
|
||||
<md-dialog>
|
||||
<md-content>
|
||||
<md-input-container md-no-float="md-no-float" layout="row">
|
||||
<i class="md-icon-search"><!--icon--></i>
|
||||
<input ng-model="searchString" type="text" placeholder="Name" sg-user-typeahead="sg-user-typeahead"/>
|
||||
</md-input-container>
|
||||
|
||||
<md-list>
|
||||
<md-list-item ng-repeat="user in users" layout="column">
|
||||
<md-button ng-click="selectUser($index)">
|
||||
{{user.$shortFormat()}}
|
||||
<i class="md-icon-chevron-right"
|
||||
ng-show="user.uid != selectedUser.uid"><!--icon--></i>
|
||||
<i class="md-icon-chevron-more"
|
||||
ng-show="user.uid == selectedUser.uid"><!--icon--></i>
|
||||
</md-button>
|
||||
|
||||
<md-list ng-if="user.uid == selectedUser.uid">
|
||||
<md-list-item ng-show="user.$$folders.length == 0">
|
||||
<md-dialog flex="50" flex-sm="100">
|
||||
<md-content>
|
||||
<md-input-container md-no-float="md-no-float" layout="row">
|
||||
<i class="md-icon-search"><!--icon--></i>
|
||||
<input ng-model="searchString" type="text" placeholder="Name" sg-user-typeahead="sg-user-typeahead"/>
|
||||
</md-input-container>
|
||||
<md-list>
|
||||
<md-list-item
|
||||
layout="column"
|
||||
ng-repeat="user in users">
|
||||
<md-button class="sg-expandable" ng-click="selectUser($index)">
|
||||
<div layout="row" layout-align="space-between center" layout-fill="true">
|
||||
<span class="sg-item-name">{{user.$shortFormat()}}</span>
|
||||
<span class="md-display-1">
|
||||
<i class="md-icon-expand-more"
|
||||
ng-show="user.uid != selectedUser.uid"><!--icon--></i>
|
||||
<i class="md-icon-expand-less"
|
||||
ng-show="user.uid == selectedUser.uid"><!--icon--></i>
|
||||
</span>
|
||||
</div>
|
||||
</md-button>
|
||||
<md-list layout-fill="true" ng-if="user.uid == selectedUser.uid">
|
||||
<md-list-item ng-show="user.$$folders.length == 0">
|
||||
<i class="md-icon-warning"><!-- no subscription --></i>
|
||||
<var:string label:value="No possible subscription"/>
|
||||
</md-list-item>
|
||||
<md-list-item
|
||||
ng-repeat="folder in user.$$folders">
|
||||
<i class="md-icon-contacts"
|
||||
ng-show="folder.type == 'Contact'"><!--icon--></i>
|
||||
{{folder.displayName}}
|
||||
<md-button class="button tiny right"
|
||||
ng-click="selectFolder(folder)">Subscribe</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<md-divider><!-- divider --></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
</md-content>
|
||||
</md-list-item>
|
||||
<md-list-item
|
||||
layout="row"
|
||||
layout-fill="true"
|
||||
ng-repeat="folder in user.$$folders">
|
||||
<i class="md-icon-contacts md-padding"
|
||||
ng-show="folder.type == 'Contact'"><!--icon--></i>
|
||||
<i class="md-icon-today md-padding"
|
||||
ng-show="folder.type == 'Appointment'"><!--icon--></i>
|
||||
<p class="md-flex sg-item-name">{{folder.displayName}}</p>
|
||||
<md-button
|
||||
class="md-raised"
|
||||
ng-click="selectFolder(folder)">Subscribe</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<md-divider ng-if="!$last"><!-- divider --></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-content>
|
||||
</md-dialog>
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
// Buttons for the sidenav folder tree
|
||||
// ------------------------------------
|
||||
sg-folder-tree .md-button,
|
||||
md-sidenav md-list button.md-button {
|
||||
md-sidenav md-list .md-button {
|
||||
// dirty fix to squash the theme style
|
||||
background-color: transparent !important;
|
||||
padding: 0 $mg;
|
||||
|
|
@ -20,13 +20,18 @@ md-sidenav md-list button.md-button {
|
|||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
md-sidenav .md-button [class ^= "md-icon"] {
|
||||
.md-sidenav-left .md-button [class^="md-icon"] {
|
||||
margin-right: 1em;
|
||||
}
|
||||
md-sidenav .md-button.iconButton.sg-button-navicon [class ^= "md-icon"] {
|
||||
md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Expandable button for a collapsable list
|
||||
.sg-expandable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
///
|
||||
/// iconButton
|
||||
/// according to Material design specs:
|
||||
|
|
@ -61,9 +66,10 @@ $button-fab-height: 56px;
|
|||
// z-index provides a stacking context that prevent ripple-effect from overflowing
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
padding: $iconButton-padding;
|
||||
padding: $iconButton-padding 0;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
min-width: $iconButton-size;
|
||||
transition: $iconButton-transition;
|
||||
|
||||
&:hover:not(.md-fab),
|
||||
|
|
@ -197,6 +203,7 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
|
|||
//margin-left: ($mg * -1);
|
||||
width: $touch-zone;
|
||||
height: $touch-zone;
|
||||
line-height: $touch-zone;
|
||||
}
|
||||
|
||||
// angular-material is overspecifying so we are and so we have to continue
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/// list.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
// List variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -21,6 +21,17 @@
|
|||
//$item-padding-left: 0px !default;
|
||||
//$item-padding-bottom: 0px !default;
|
||||
|
||||
// List item label
|
||||
md-list {
|
||||
.sg-item-name {
|
||||
font-size: sg-size(button);
|
||||
text-transform: initial;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// The right tile for a list item.
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Reference in New Issue