amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-04-14 17:58:51 +00:00
Code Issues Projects Releases Wiki Activity

Style contact-view layout

Browse Source
This commit is contained in:
iRouge
2015-02-23 21:33:47 -05:00
committed by Francis Lachapelle
parent b7adf2814d
commit b81f98236c
8 changed files with 94 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
View File

@@ -10,85 +10,85 @@
</h6>
</hgroup>
<form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
<md-input-container class="PseudoField">
<md-input-container class="pseudo-input">
<var:entity const:name="nbsp"/>
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Display"/>
</label>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
</p>
</md-input-container>
<md-input-container class="PseudoField">
<md-input-container class="pseudo-input">
<div class="action">
<var:entity const:name="nbsp"/>
</div>
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Firstname"/>
</label>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" data-ng-model="card.givenname"/>
</p>
</md-input-container>
<div class="PseudoField">
<div class="pseudo-input">
<div class="action">
<var:entity const:name="nbsp"/>
</div>
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Lastname"/>
</label>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" data-ng-model="card.sn"/>
</p>
</div>
<div class="PseudoField">
<div class="pseudo-input">
<div class="action">
<var:entity const:name="nbsp"/>
</div>
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Nickname"/>
</label>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" data-ng-model="card.nickname"/>
</p>
</div>
<div class="PseudoField">
<div class="pseudo-input">
<div class="action">
<var:entity const:name="nbsp"/>
</div>
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Organization"/>
</label>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" data-ng-model="card.org"/>
</p>
</div>
<div class="PseudoField">
<div class="pseudo-input">
<div class="action">
<var:entity const:name="nbsp"/>
</div>
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Title"/>
</label>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" data-ng-model="card.title"/>
</p>
</div>
<!-- org units -->
<div class="PseudoField">
<div class="pseudo-input">
<div class="attr" data-ng-repeat="unit in card.orgUnits">
<div class="action">
<span class="button alert icon" data-ng-click="card.$delete('orgUnits', $index)">
<i class="md-icon-remove-circle-outline"><!-- remove --></i>
</span>
</div>
<md-input-container class="PseudoField">
<md-input-container class="pseudo-input">
<div class="key">
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Organization Unit"/>
</label>
</div>
@@ -109,18 +109,18 @@
</div>
<!-- birthday -->
<div class="PseudoField">
<div class="pseudo-input">
<div class="attr">
<div class="action">
<var:entity const:name="nbsp"/>
</div>
<div class="key">
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Birthday"/>
</label>
</div>
<div class="value">
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="date" data-ng-model="card.birthday"/>
</p>
</div>
@@ -128,21 +128,21 @@
</div>
<!-- categories -->
<div class="PseudoField">
<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="PseudoField">
<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="PseudoField-label md-flex">
<label class="pseudo-input-label md-flex">
<var:string label:value="Category"/>
</label>
</div>
<div class="value">
<p class="PseudoField-inputLike--underline">
<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"/>-->
@@ -163,7 +163,7 @@
</div>
<!-- emails -->
<div class="PseudoField">
<div class="pseudo-input">
<div class="section">
<div class="attr" data-ng-repeat="email in card.emails">
<div class="action">
@@ -178,7 +178,7 @@
</div>
<div class="value">
<p class="PseudoField-inputLike--underline">
<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>
@@ -195,7 +195,7 @@
</div>
</div>
<!-- phones -->
<div class="PseudoField">
<div class="pseudo-input">
<div class="section">
<div class="attr" data-ng-repeat="phone in card.phones">
<div class="action">
@@ -209,7 +209,7 @@
</select>
</div>
<div class="value">
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="phone number" data-ng-model="phone.value"
data-sg-focus-on="phone_{{$index}}"/>
</p>
@@ -227,7 +227,7 @@
</div>
<!-- urls -->
<div class="PseudoField">
<div class="pseudo-input">
<div class="section">
<div class="attr" data-ng-repeat="url in card.urls">
<div class="action">
@@ -241,7 +241,7 @@
</select>
</div>
<div class="value">
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}"/>
</p>
</div>
@@ -258,7 +258,7 @@
</div>
<!-- addresses -->
<div class="PseudoField">
<div class="pseudo-input">
<div class="section">
<div class="attr" data-ng-repeat="address in card.addresses">
<div class="action">
@@ -272,32 +272,32 @@
</select>
</div>
<div class="value compact">
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="street" data-ng-model="address.street"
data-sg-focus-on="address_{{$index}}"/>
</p>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" data-ng-model="address.street2"/>
</p>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
</p>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="City" data-ng-model="address.locality"/>
</p>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="Region" data-ng-model="address.region"/>
</p>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="Country" data-ng-model="address.country"/>
</p>
<p class="PseudoField-inputLike--underline">
<p class="pseudo-input-inputLike--underline">
<input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
</p>
@@ -320,7 +320,7 @@
<var:entity const:name="nbsp"/>
</div>
<div class="key">
<label class="PseudoField-label right inline">
<label class="pseudo-input-label right inline">
<var:string label:value="Note"/>
</label>
</div>
@@ -364,7 +364,7 @@
<var:entity const:name="nbsp"/>
</div>
<div class="key">
<label class="PseudoField-label right inline">
<label class="pseudo-input-label right inline">
<var:string label:value="Display"/>
</label>
</div>
@@ -377,7 +377,7 @@
<var:entity const:name="nbsp"/>
</div>
<div class="key">
<label class="PseudoField-label right inline">
<label class="pseudo-input-label right inline">
<var:string label:value="Nickname"/>
</label>
</div>
@@ -395,7 +395,7 @@
</span>
</div>
<div class="key">
<label class="PseudoField-label right inline">
<label class="pseudo-input-label right inline">
<var:string label:value="Member"/>
</label>
</div>

57
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
View File

@@ -8,35 +8,36 @@
<md-card class="viewer">
<md-card-content>
<header>
<div class="sg-avatar">
<!--avatar--><!-- currentCard.tag = vcard || vlist -->
</div>
<div class="msg-header-content">
<h1 class="sg-md-display-1" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-subheader-1">{{card.$description()}}
<h1 class="sg-md-display-2--light" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
<h6 class="sg-md-display-2-subheader">{{card.$description()}}
<span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
</h6>
</div>
<div class="sg-icon-bar">
<span data-ng-show="addressbook.isEditable">
<a class="button tiny radius" data-ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
<i class="md-icon-create"><!-- edit --></i>
</a>
<span class="button tiny radius alert" data-ng-click="confirmDelete(card)">
<i class="md-icon-delete"><!-- delete --></i>
</span>
</span>
<span class="button tiny radius alert" data-ng-click="confirmDelete(card)">
<i class="md-icon-delete"><!-- delete --></i>
</span>
</div>
</header>
<md-divider class="md-inset"><!-- divider --></md-divider>
<section class="msg-body">
<section class="content">
<div class="attr" data-ng-show="card.birthday">
<div class="pseudo-input-container" data-ng-show="card.birthday">
<div class="key">
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Birthday"/>
</label>
</div>
<div class="value">
<div class="pseudo-input-field">
<span>{{card.$birthday() | date}}</span>
</div>
</div>
@@ -44,7 +45,7 @@
<div class="section" data-ng-repeat="ref in card.refs track by ref.reference">
<!-- list members -->
<div class="attr">
<div class="pseudo-input-container">
<div class="value single">
<a data-ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: ref.reference})">
{{ref.$fullname()}}
@@ -59,13 +60,13 @@
</div>
<div class="section">
<div class="attr" data-ng-repeat="email in card.emails">
<div class="pseudo-input-container" data-ng-repeat="email in card.emails">
<div class="key">
<label class="PseudoField-label"><var:entity const:name="nbsp"/>{{email.type}}
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}
</label>
</div>
<div class="value">
<div class="pseudo-input-field">
<a href="mailto:{{email.value}}">{{email.value}}</a>
</div>
@@ -75,47 +76,47 @@
<div class="section" data-ng-show="card.phones.length > 0">
<div class="attr" data-ng-repeat="phone in card.phones">
<div class="pseudo-input-container" data-ng-repeat="phone in card.phones">
<div class="key">
<label class="PseudoField-label">{{phone.type}}</label>
<label class="pseudo-input-label">{{phone.type}}</label>
</div>
<div class="value">
<div class="pseudo-input-field">
<a href="tel:{{phone.value}}">{{phone.value}}</a>
</div>
</div>
</div>
<div class="section" data-ng-show="card.urls">
<div class="attr" data-ng-repeat="url in card.urls">
<div class="pseudo-input-container" data-ng-repeat="url in card.urls">
<div class="key">
<label class="PseudoField-label"><var:entity const:name="nbsp"/>{{url.type}}
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
</label>
</div>
<div class="value">
<div class="pseudo-input-field">
<a href="#" data-ng-href="{{url.value}}">{{url.value}}</a>
</div>
</div>
</div>
<div class="section" data-ng-show="card.addresses">
<div class="attr" data-ng-repeat="address in card.addresses">
<div class="pseudo-input-container" data-ng-repeat="address in card.addresses">
<div class="key">
<label class="PseudoField-label">{{address.type}}</label>
<label class="pseudo-input-label">{{address.type}}</label>
</div>
<div class="value">
<div class="pseudo-input-field">
<div data-sg-address="address"><!-- address --></div>
</div>
</div>
</div>
<div class="attr" data-ng-show="card.note">
<div class="pseudo-input-container" data-ng-show="card.note">
<div class="key">
<label class="PseudoField-label">
<label class="pseudo-input-label">
<var:string label:value="Note"/>
</label>
</div>
<div class="value">
<div class="pseudo-input-field">
<div data-ng-bind-html="card.note"><!-- note --></div>
</div>
</div>

2
UI/Templates/MailerUI/UIxMailEditor.wox
View File

@@ -39,7 +39,7 @@
<label class="pseudo-input-label">
<var:string label:value="Cc"/>
</label>
<div class="PseudoField-inputLike">
<div class="pseudo-input-inputLike">
<tags-input type="text" name="cc"
ng-model="message.editable.cc"
label:placeholder="Add a recipient">

2
UI/Templates/MailerUI/UIxMailViewTemplate.wox
View File

@@ -33,7 +33,7 @@
<!-- <p class="flags">
&lt;!&ndash; Todo: change the text for an icon (conditional ?) The read/unread flag doesn't make sense at his place&ndash;&gt;
<span class="PseudoField-label" data-ng-repeat="flag in message.flags">{{flag}}</span>
<span class="pseudo-input-label" data-ng-repeat="flag in message.flags">{{flag}}</span>
</p>
-->

1
UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
View File

@@ -87,4 +87,5 @@
.sg-avatar {
@extend .md-tile-left;
margin-right: 0;
margin-left: 0;
}

4
UI/WebServerResources/scss/components/divider/divider.scss
View File

@@ -5,7 +5,7 @@ md-divider {
border-top: 1px solid;
margin: 0;
&[md-inset] {
margin-left: $baseline-grid * 9; // fix for vs-repeat
&.md-inset {
margin-left: $baseline-grid * 9;
}
}

2
UI/WebServerResources/scss/components/toolbar/toolbar.scss
View File

@@ -10,7 +10,7 @@ md-toolbar {
}
header {
flex-direction: row;
flex-wrap: wrap;
flex-wrap: nowrap;
align-items: stretch;
justify-content: space-between;
display: flex;

15
UI/WebServerResources/scss/core/typography/typography.scss
View File

@@ -214,7 +214,8 @@ $sg-line-height-9: $sg-font-size-9 + $sg-md-typo-baseline;
// Google Material Design specifications strongly recommend to avoid bold
// font weight. Here are some variables to define weights more conveniently
// ----------------------------------------------------------------------------
$sg-font-light: 200;
$sg-font-thin: 200;
$sg-font-light: 300;
$sg-font-regular: 400;
$sg-font-medium: 600;
$sg-font-bold: $sg-font-medium;
@@ -360,6 +361,12 @@ h6 {
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-display-2--light {
$lineHeight: $sg-line-height-7;
font-size: $sg-font-size-7;
line-height: $lineHeight;
font-weight: $sg-font-light;
}
.#{$md}-display-3 {
$lineHeight : $sg-line-height-8;
font-size: $sg-font-size-8;
@@ -374,7 +381,11 @@ h6 {
font-weight: $sg-font-light;
white-space: nowrap;
}
.#{$md}-display-2-subheader {
@extend .#{$md}-title;
margin-bottom: $mg;
font-weight: $sg-font-thin;
}
a,
a:hover,
a:active,