Style contact editor (model for add and remove)
This commit is contained in:
parent
1d61e33a51
commit
6b58f3a080
|
@ -17,38 +17,45 @@
|
||||||
</label>
|
</label>
|
||||||
<input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
|
<input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<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-->
|
||||||
<label class="pseudo-input-label">
|
<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"/>
|
<var:string label:value="Firstname"/>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" data-ng-model="card.givenname"/>
|
<input type="text" data-ng-model="card.givenname"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<md-input-container>
|
<md-input-container flex="40">
|
||||||
<label class="pseudo-input-label">
|
<label class="pseudo-input-label">
|
||||||
<var:string label:value="Lastname"/>
|
<var:string label:value="Lastname"/>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" data-ng-model="card.sn"/>
|
<input type="text" data-ng-model="card.sn"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<md-input-container>
|
<md-input-container flex="20">
|
||||||
<label class="pseudo-input-label">
|
<label class="pseudo-input-label">
|
||||||
<var:string label:value="Nickname"/>
|
<var:string label:value="Nickname"/>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" data-ng-model="card.nickname"/>
|
<input type="text" data-ng-model="card.nickname"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-fieldset" layout="row" layout-sm="column">
|
||||||
<md-input-container>
|
<md-input-container>
|
||||||
<label class="pseudo-input-label">
|
<label class="pseudo-input-label">
|
||||||
<var:string label:value="Organization"/>
|
<var:string label:value="Organization"/>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" data-ng-model="card.org"/>
|
<input type="text" data-ng-model="card.org"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<md-input-container>
|
<md-input-container>
|
||||||
<label class="pseudo-input-label">
|
<label class="pseudo-input-label">
|
||||||
<var:string label:value="Title"/>
|
<var:string label:value="Title"/>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" data-ng-model="card.title"/>
|
<input type="text" data-ng-model="card.title"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- org units -->
|
|
||||||
|
<!-- org units -->
|
||||||
|
|
||||||
<div class="attr" data-ng-repeat="unit in card.orgUnits">
|
<div class="attr" data-ng-repeat="unit in card.orgUnits">
|
||||||
|
|
||||||
|
@ -64,63 +71,54 @@
|
||||||
<i class="md-icon-remove-circle"><!-- remove --></i>
|
<i class="md-icon-remove-circle"><!-- remove --></i>
|
||||||
</md-button>
|
</md-button>
|
||||||
</div>
|
</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>
|
||||||
|
<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 -->
|
<!-- birthday -->
|
||||||
<md-input-container>
|
<md-input-container>
|
||||||
<label class="pseudo-input-label">
|
<label class="pseudo-input-label--no-margin">
|
||||||
<var:string label:value="Birthday"/>
|
<var:string label:value="Birthday"/>
|
||||||
</label>
|
</label>
|
||||||
<input type="date" data-ng-model="card.birthday"/>
|
<input type="date" data-ng-model="card.birthday"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
|
|
||||||
<!-- categories -->
|
<!-- categories -->
|
||||||
<div class="pseudo-input">
|
|
||||||
|
|
||||||
<!-- if there's some categories, here they are (this is sort of a template) -->
|
<!-- 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="attr" data-ng-repeat="category in card.categories">
|
||||||
|
|
||||||
<div class="pseudo-input">
|
<div layout="row" layout-align="center end">
|
||||||
<i class="md-icon-remove-circle-outline"
|
<md-input-container>
|
||||||
data-ng-click="card.$delete('categories', $index)"><!-- remove --></i>
|
<label class="pseudo-input-label">
|
||||||
<div class="key">
|
|
||||||
<label class=" md-flex">
|
|
||||||
<var:string label:value="Category"/>
|
<var:string label:value="Category"/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
<input type="text" data-ng-model="category.value"
|
||||||
<div class="value">
|
data-sg-focus-on="category_{{$index}}"/>
|
||||||
<p class="pseudo-input-inputLike--underline">
|
<!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
|
||||||
<input type="text" label:placeholder="category" data-ng-model="category.value"
|
</md-input-container>
|
||||||
data-sg-focus-on="category_{{$index}}" />
|
<md-button class="icon" data-ng-click="card.$delete('categories', $index)">
|
||||||
<!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
|
<i class="md-icon-remove-circle"><!-- remove --></i>
|
||||||
</p>
|
</md-button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- New category button-group -->
|
<!-- New category button-group -->
|
||||||
<div class="attr">
|
<div class="md-layout-margin" layout="row" layout-align="start center">
|
||||||
<div class="value single">
|
<md-button class="icon" data-ng-click="addCategory()">
|
||||||
<span class="button secondary outline tiny" data-ng-click="addCategory()">
|
<i class="md-icon-add-circle"><!-- new --></i>
|
||||||
<i class="md-icon-add"><!-- new --></i>
|
</md-button>
|
||||||
|
<label class="button-label">
|
||||||
<var:string label:value="New Category"/>
|
<var:string label:value="New Category"/>
|
||||||
</span>
|
</label>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- emails -->
|
<!-- emails -->
|
||||||
<div class="pseudo-input">
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="attr" data-ng-repeat="email in card.emails">
|
<div class="attr" data-ng-repeat="email in card.emails">
|
||||||
<div class="action">
|
<div class="action">
|
||||||
|
@ -128,18 +126,18 @@
|
||||||
<i class="md-icon-remove-circle-outline"><!-- remove --></i>
|
<i class="md-icon-remove-circle-outline"><!-- remove --></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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 -->
|
<!-- email types -->
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
<md-input-container>
|
||||||
<p class="pseudo-input-inputLike--underline">
|
<input type="email" label:placeholder="email address" data-ng-model="email.value"
|
||||||
<input type="email" label:placeholder="email address" data-ng-model="email.value"
|
data-sg-focus-on="email_{{$index}}"/>
|
||||||
data-sg-focus-on="email_{{$index}}"/>
|
</md-input-container>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="attr">
|
<div class="attr">
|
||||||
<div class="value single">
|
<div class="value single">
|
||||||
|
@ -150,7 +148,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- phones -->
|
<!-- phones -->
|
||||||
<div class="pseudo-input">
|
<div class="pseudo-input">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|
|
@ -52,7 +52,7 @@
|
||||||
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
|
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
|
||||||
});
|
});
|
||||||
$mdThemingProvider.definePalette('paper', {
|
$mdThemingProvider.definePalette('paper', {
|
||||||
'50': 'fcf7f8',
|
'50': 'fcfbf8',
|
||||||
'100': 'f7f1dc',
|
'100': 'f7f1dc',
|
||||||
'200': 'ede5ca',
|
'200': 'ede5ca',
|
||||||
'300': 'e6d8ba',
|
'300': 'e6d8ba',
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
'A400': 'bdbdbd',
|
'A400': 'bdbdbd',
|
||||||
'A700': '616161',
|
'A700': '616161',
|
||||||
'contrastDefaultColor': 'dark',
|
'contrastDefaultColor': 'dark',
|
||||||
'contrastLightColors': '500 600 700 800 900'
|
'contrastLightColors': '800 900'
|
||||||
});
|
});
|
||||||
// Default theme definition
|
// 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)
|
// .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')
|
.accentColor('sogo-green')
|
||||||
.backgroundColor('paper', {
|
.backgroundColor('paper', {
|
||||||
'default': '600',
|
'default': '500',
|
||||||
'hue-1': '200',
|
'hue-1': '200',
|
||||||
'hue-2': '50',
|
'hue-2': '50',
|
||||||
'hue-3': '100'
|
'hue-3': '100'
|
||||||
|
|
|
@ -73,7 +73,7 @@ $sogoPaper: (
|
||||||
A100: #fff,
|
A100: #fff,
|
||||||
A200: #eee,
|
A200: #eee,
|
||||||
A400: #bdbdbd,
|
A400: #bdbdbd,
|
||||||
A700: #616161
|
A700: #857545
|
||||||
);
|
);
|
||||||
$sogoGreen: (
|
$sogoGreen: (
|
||||||
50: #eaf5e9,
|
50: #eaf5e9,
|
||||||
|
|
|
@ -36,7 +36,8 @@ $input-padding-top: 2px !default;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pseudo-input-label {
|
.pseudo-input-label,
|
||||||
|
.button-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: $mg;
|
margin-top: $mg;
|
||||||
color: $colorGrayLight;
|
color: $colorGrayLight;
|
||||||
|
@ -44,6 +45,10 @@ $input-padding-top: 2px !default;
|
||||||
font-size: sg-size(caption);
|
font-size: sg-size(caption);
|
||||||
line-height: $sg-line-height-1;
|
line-height: $sg-line-height-1;
|
||||||
}
|
}
|
||||||
|
.pseudo-input-label--no-margin,
|
||||||
|
.button-label {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
// md overqualifies so we are
|
// md overqualifies so we are
|
||||||
.md-input-focused label.pseudo-input-label,
|
.md-input-focused label.pseudo-input-label,
|
||||||
.md-input-has-value 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 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;
|
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);
|
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 a new issue