Style contact editor (model for add and remove)
iRouge
Francis Lachapelle
parent
1d61e33a51
commit
6b58f3a080
|
|
@ -17,38 +17,45 @@
|
|||
</label>
|
||||
<input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<!-- 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 class="pseudo-input-label">
|
||||
<var:string label:value="Firstname"/>
|
||||
</label>
|
||||
<input type="text" data-ng-model="card.givenname"/>
|
||||
<input type="text" data-ng-model="card.givenname"/>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<md-input-container flex="40">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Lastname"/>
|
||||
</label>
|
||||
<input type="text" data-ng-model="card.sn"/>
|
||||
<input type="text" data-ng-model="card.sn"/>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<md-input-container flex="20">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Nickname"/>
|
||||
</label>
|
||||
<input type="text" data-ng-model="card.nickname"/>
|
||||
<input type="text" data-ng-model="card.nickname"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<div class="sg-fieldset" layout="row" layout-sm="column">
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Organization"/>
|
||||
</label>
|
||||
<input type="text" data-ng-model="card.org"/>
|
||||
<input type="text" data-ng-model="card.org"/>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Title"/>
|
||||
</label>
|
||||
<input type="text" data-ng-model="card.title"/>
|
||||
<input type="text" data-ng-model="card.title"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<!-- org units -->
|
||||
|
||||
<!-- org units -->
|
||||
|
||||
<div class="attr" data-ng-repeat="unit in card.orgUnits">
|
||||
|
||||
|
|
@ -64,63 +71,54 @@
|
|||
<i class="md-icon-remove-circle"><!-- remove --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="attr">
|
||||
<div class="value single">
|
||||
<span class="button secondary outline tiny" data-ng-click="addOrgUnit()">
|
||||
<i class="md-icon-add"><!-- new --></i>
|
||||
<var:string label:value="Add Organizational Unit"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-margin" layout="row" layout-align="start center">
|
||||
<md-button class="icon" data-ng-click="addOrgUnit()">
|
||||
<i class="md-icon-add-circle"><!-- plus icon button--></i>
|
||||
</md-button>
|
||||
<label class="button-label">
|
||||
<var:string label:value="Add Organizational Unit"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- birthday -->
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<label class="pseudo-input-label--no-margin">
|
||||
<var:string label:value="Birthday"/>
|
||||
</label>
|
||||
<input type="date" data-ng-model="card.birthday"/>
|
||||
</md-input-container>
|
||||
|
||||
<!-- categories -->
|
||||
<div class="pseudo-input">
|
||||
|
||||
<!-- if there's some categories, here they are (this is sort of a template) -->
|
||||
<div class="attr" data-ng-repeat="category in card.categories">
|
||||
|
||||
<div class="pseudo-input">
|
||||
<i class="md-icon-remove-circle-outline"
|
||||
data-ng-click="card.$delete('categories', $index)"><!-- remove --></i>
|
||||
<div class="key">
|
||||
<label class=" md-flex">
|
||||
<div layout="row" layout-align="center end">
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Category"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="value">
|
||||
<p class="pseudo-input-inputLike--underline">
|
||||
<input type="text" label:placeholder="category" data-ng-model="category.value"
|
||||
data-sg-focus-on="category_{{$index}}" />
|
||||
<!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
|
||||
</p>
|
||||
</div>
|
||||
<input type="text" data-ng-model="category.value"
|
||||
data-sg-focus-on="category_{{$index}}"/>
|
||||
<!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
|
||||
</md-input-container>
|
||||
<md-button class="icon" data-ng-click="card.$delete('categories', $index)">
|
||||
<i class="md-icon-remove-circle"><!-- remove --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- New category button-group -->
|
||||
<div class="attr">
|
||||
<div class="value single">
|
||||
<span class="button secondary outline tiny" data-ng-click="addCategory()">
|
||||
<i class="md-icon-add"><!-- new --></i>
|
||||
<div class="md-layout-margin" layout="row" layout-align="start center">
|
||||
<md-button class="icon" data-ng-click="addCategory()">
|
||||
<i class="md-icon-add-circle"><!-- new --></i>
|
||||
</md-button>
|
||||
<label class="button-label">
|
||||
<var:string label:value="New Category"/>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- emails -->
|
||||
<div class="pseudo-input">
|
||||
|
||||
<div class="section">
|
||||
<div class="attr" data-ng-repeat="email in card.emails">
|
||||
<div class="action">
|
||||
|
|
@ -128,18 +126,18 @@
|
|||
<i class="md-icon-remove-circle-outline"><!-- remove --></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="key">
|
||||
<select class="text-right" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
|
||||
|
||||
<select class="md-select" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
|
||||
<!-- email types -->
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="value">
|
||||
<p class="pseudo-input-inputLike--underline">
|
||||
<input type="email" label:placeholder="email address" data-ng-model="email.value"
|
||||
data-sg-focus-on="email_{{$index}}"/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<md-input-container>
|
||||
<input type="email" label:placeholder="email address" data-ng-model="email.value"
|
||||
data-sg-focus-on="email_{{$index}}"/>
|
||||
</md-input-container>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="attr">
|
||||
<div class="value single">
|
||||
|
|
@ -150,7 +148,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- phones -->
|
||||
<div class="pseudo-input">
|
||||
<div class="section">
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
|
||||
});
|
||||
$mdThemingProvider.definePalette('paper', {
|
||||
'50': 'fcf7f8',
|
||||
'50': 'fcfbf8',
|
||||
'100': 'f7f1dc',
|
||||
'200': 'ede5ca',
|
||||
'300': 'e6d8ba',
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
'A400': 'bdbdbd',
|
||||
'A700': '616161',
|
||||
'contrastDefaultColor': 'dark',
|
||||
'contrastLightColors': '500 600 700 800 900'
|
||||
'contrastLightColors': '800 900'
|
||||
});
|
||||
// Default theme definition
|
||||
// .primaryColor will soon be deprecated in favor of primaryPalette (already on dev builds https://groups.google.com/forum/m/#!topic/ngmaterial/-sXR8CYBMPg)
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
})
|
||||
.accentColor('sogo-green')
|
||||
.backgroundColor('paper', {
|
||||
'default': '600',
|
||||
'default': '500',
|
||||
'hue-1': '200',
|
||||
'hue-2': '50',
|
||||
'hue-3': '100'
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ $sogoPaper: (
|
|||
A100: #fff,
|
||||
A200: #eee,
|
||||
A400: #bdbdbd,
|
||||
A700: #616161
|
||||
A700: #857545
|
||||
);
|
||||
$sogoGreen: (
|
||||
50: #eaf5e9,
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ $input-padding-top: 2px !default;
|
|||
|
||||
}
|
||||
|
||||
.pseudo-input-label {
|
||||
.pseudo-input-label,
|
||||
.button-label {
|
||||
display: inline-block;
|
||||
margin-top: $mg;
|
||||
color: $colorGrayLight;
|
||||
|
|
@ -44,6 +45,10 @@ $input-padding-top: 2px !default;
|
|||
font-size: sg-size(caption);
|
||||
line-height: $sg-line-height-1;
|
||||
}
|
||||
.pseudo-input-label--no-margin,
|
||||
.button-label {
|
||||
margin-top: 0;
|
||||
}
|
||||
// md overqualifies so we are
|
||||
.md-input-focused label.pseudo-input-label,
|
||||
.md-input-has-value label.pseudo-input-label {
|
||||
|
|
@ -98,7 +103,8 @@ input::-webkit-datetime-edit,
|
|||
}
|
||||
|
||||
.md-input-focused input::-webkit-datetime-edit,
|
||||
.md-input-focused /deep/ div#date-time-edit {
|
||||
.md-input-focused /deep/ div#date-time-edit,
|
||||
.md-input-has-value input::-webkit-datetime-edit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,3 +26,10 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
|
|||
width: grid-step($i);
|
||||
}
|
||||
}
|
||||
|
||||
// Rows are included in padded containers, margins are used for vertical spacing
|
||||
// ----------------------------------------------------------------------------
|
||||
[layout="row"].md-layout-margin {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue