amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-20 10:55:25 +00:00
Code Issues Projects Releases Wiki Activity

(html,css) Improve forms

Browse Source 
Improved pseudo-input and used md-inline-form
This commit is contained in:
Francis Lachapelle
2016-06-14 16:11:12 -04:00
parent 4744170628
commit 85b764c179
6 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/PreferencesUI/UIxPreferences.m
+5
View File
@@ -1243,6 +1243,11 @@ static NSArray *reminderValues = nil;
return fontSizes;
}
- (NSString *) itemFontSizeText
{
return [NSString stringWithFormat: @"%@ px", item];
}
//
// Used by templates
//
UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+7 -9
View File
@@ -32,7 +32,7 @@
</hgroup>
<!-- contact editor -->
<form name="cardForm" ng-show="editor.card.$isCard()" ng-submit="editor.save(cardForm)">
<form class="md-inline-form" name="cardForm" ng-show="editor.card.$isCard()" ng-submit="editor.save(cardForm)">
<md-input-container class="md-block md-flex">
<var:entity const:name="nbsp"/>
<label>
@@ -123,7 +123,7 @@
<!-- emails -->
<div class="section">
<div class="attr" ng-repeat="email in editor.card.emails">
<div layout="row">
<div layout="row" layout-align="start center">
<md-input-container flex="20">
<md-select ng-model="email.type" label:placeholder="Type">
<md-option ng-repeat="type in ::editor.allEmailTypes" ng-value="type">{{ type }}</md-option>
@@ -155,7 +155,7 @@
<div class="section">
<div layout="row" ng-show="editor.card.c_screenname != null">
<md-input-container class="md-flex">
<label class="pseudo-input-label">
<label>
<var:string label:value="Screen Name"/>
</label>
<input type="text" ng-model="editor.card.c_screenname"/>
@@ -201,7 +201,7 @@
<!-- phones -->
<div class="section">
<div class="attr" ng-repeat="phone in editor.card.phones">
<div layout="row">
<div layout="row" layout-align="start center">
<md-input-container flex="20">
<md-select ng-model="phone.type" label:placeholder="Type">
<md-option ng-repeat="type in ::editor.allTelTypes" ng-value="type">{{ type }}</md-option>
@@ -232,7 +232,7 @@
<!-- urls -->
<div class="section">
<div class="attr" ng-repeat="url in editor.card.urls">
<div layout="row">
<div layout="row" layout-align="start center">
<md-input-container flex="20">
<md-select ng-model="url.type" label:placeholder="Type">
<md-option ng-repeat="type in ::editor.allUrlTypes" ng-value="type">{{ type }}</md-option>
@@ -304,7 +304,7 @@
<input type="text" ng-model="address.region"/>
</md-input-container>
</div>
<div layout="row">
<div layout="row" layout-align="start center">
<md-input-container flex="50" flex-xs="100">
<label>
<var:string label:value="Country"/>
@@ -334,9 +334,7 @@
<!-- note -->
<md-input-container class="md-block md-flex">
<label class="right inline">
<var:string label:value="Note"/>
</label>
<label><var:string label:value="Note"/></label>
<textarea ng-model="editor.card.note"><!-- note --></textarea>
</md-input-container>
</form>
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+12 -36
View File
@@ -74,11 +74,7 @@
<section class="msg-body">
<div class="pseudo-input-container" ng-show="editor.card.birthday">
<div class="key">
<label class="pseudo-input-label">
<var:string label:value="Birthday"/>
</label>
</div>
<label class="pseudo-input-label"><var:string label:value="Birthday"/></label>
<div class="pseudo-input-field">
<span>{{editor.card.$birthday}}</span>
</div>
@@ -86,9 +82,7 @@
<!-- list members -->
<div class="section" ng-show="editor.card.refs.length > 0">
<label class="pseudo-input-label">
<var:string label:value="Members"/>
</label>
<label class="pseudo-input-label"><var:string label:value="Members"/></label>
<md-list>
<md-list-item class="md-2-line" ng-repeat="ref in editor.card.refs track by ref.reference">
<sg-avatar-image class="md-tile-left"
@@ -111,73 +105,55 @@
<div class="section" ng-show="editor.card.emails.length > 0">
<div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
<div class="key">
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
</div>
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
<div class="pseudo-input-field">
<a href="#" ng-bind="email.value"
ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.c_screenname">
<div class="pseudo-input-container">
<div class="key">
<label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
</div>
<label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
<div class="pseudo-input-field">{{editor.card.c_screenname}}</div>
</div>
</div>
<div class="section" ng-show="editor.card.phones.length > 0">
<div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
<div class="key">
<label class="pseudo-input-label">{{phone.type}}</label>
</div>
<label class="pseudo-input-label">{{phone.type}}</label>
<div class="pseudo-input-field">
<a href="tel:{{phone.value}}">{{phone.value}}</a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.urls">
<div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
<div class="key">
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
</label>
</div>
<label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}</label>
<div class="pseudo-input-field">
<a href="#" target="_new" ng-href="{{url.value}}">{{url.value}}</a>
</div>
</div>
</div>
<div class="section" ng-show="editor.card.addresses">
<div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
<div class="key">
<label class="pseudo-input-label">{{address.type}}</label>
</div>
<label class="pseudo-input-label">{{address.type}}</label>
<div class="pseudo-input-field">
<div sg-address="address"><!-- address --></div>
</div>
</div>
</div>
<div class="pseudo-input-container" ng-show="editor.card.note">
<div class="key">
<label class="pseudo-input-label">
<var:string label:value="Note"/>
</label>
</div>
<label class="pseudo-input-label"><var:string label:value="Note"/></label>
<div class="pseudo-input-field">
<div ng-bind-html="editor.card.note"><!-- note --></div>
</div>
</div>
</section>
</md-card-content>
</md-card>
UI/Templates/PreferencesUI/UIxFilterEditor.wox
+13 -6
View File
@@ -8,7 +8,7 @@
xmlns:rsrc="OGo:url"
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
<md-dialog flex="50" flex-sm="80" flex-xs="100">
<form id="filterForm" name="filterForm" ng-submit="filterEditor.save(filterForm)">
<form id="filterForm" name="filterForm" class="md-inline-form" ng-submit="filterEditor.save(filterForm)">
<md-toolbar>
<div class="md-toolbar-tools">
<md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
@@ -18,19 +18,23 @@
type="text"
md-autofocus="true"
ng-model="filterEditor.filter.name"
label:placeholder="Filter name"
required="required"/>
</md-input-container>
</div>
</md-toolbar>
<md-dialog-content class="md-dialog-content">
<md-dialog-content class="sg-has-form-sections">
<script type="text/javascript">
var filterId = '<var:string value="filterId"/>';
var sieveFolderEncoding = '<var:string value="sieveFolderEncoding"/>';
var mailTags = <var:string value="labels" const:escapeHTML="NO"/>;
</script>
<div layout="row" layout-align="start center">
<p><var:string label:value="For incoming messages that"/></p>
<div class="sg-form-section">
<div layout="row" layout-align="start center">
<div class="pseudo-input-container">
<p class="pseudo-input-field"><var:string label:value="For incoming messages that"/></p>
</div>
<md-input-container class="md-flex">
<md-select ng-model="filterEditor.filter.match">
<md-option const:value="all">
@@ -49,7 +53,7 @@
<!-- CONDITIONS -->
<div layout="column">
<div id="filterRules"><!-- empty --></div>
<div layout="row"
<div layout="row" layout-align="start center"
ng-repeat="rule in filterEditor.filter.rules">
<md-input-container class="md-block" flex="25">
@@ -97,12 +101,14 @@
</md-button>
</div>
</div>
</div>
<div class="sg-form-section">
<!-- ACTIONS -->
<div layout="column">
<p><var:string label:value="Perform these actions"/></p>
<div id="filterActions"><!-- empty --></div>
<div layout="row"
<div layout="row" layout-align="start center"
ng-repeat="action in filterEditor.filter.actions">
<md-input-container class="md-block md-flex">
@@ -173,6 +179,7 @@
</md-button>
</div>
</div>
</div>
</md-dialog-content>
<md-dialog-actions>
<md-button type="button" ng-click="filterEditor.cancel()"><var:string label:value="Cancel"/></md-button>
UI/Templates/PreferencesUI/UIxPreferences.wox
+6 -6
View File
@@ -100,7 +100,7 @@
<md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
<md-content layout="row"
aria-labelledby="generalOptionsView"
id="generalOptionsView-content" class="md-padding">
id="generalOptionsView-content" class="md-inline-form md-padding">
<div layout="column" flex="100">
<md-input-container>
<label><var:string label:value="SOGo Version"/></label>
@@ -520,7 +520,7 @@
<!-- MAIL > GENERAL -->
<md-tab id="mailGeneralTab" aria-controls="mailGeneralTab-content" label:label="General">
<md-content role="tabpanel" aria-labelledby="mailGeneralView"
id="mailGeneralView-content" class="md-padding">
id="mailGeneralView-content" class="md-padding md-inline-form">
<div>
<md-checkbox
@@ -635,11 +635,10 @@
ng-model="app.preferences.defaults.SOGoMailComposeFontSize">
<var:foreach list="fontSizesList" item="item">
<md-option var:value="item">
<var:string value="item"/>
<var:string value="itemFontSizeText"/>
</md-option>
</var:foreach>
</md-select>
<div class="md-char-counter">px</div>
</md-input-container>
</div>
</div>
@@ -817,7 +816,8 @@
<var:string label:value="Enable vacation auto reply"/>
</md-checkbox>
<div layout="column" flex-offset="5" ng-show="app.preferences.defaults.Vacation.enabled == 1">
<div class="md-inline-form" layout="column" flex-offset="5" ng-show="app.preferences.defaults.Vacation.enabled == 1">
<md-input-container class="md-block md-flex">
<label><var:string label:value="Auto reply message"/></label>
<var:if condition="vacationHeader.length">
@@ -865,7 +865,7 @@
</md-checkbox>
</div>
<div layout="row">
<div>
<md-checkbox
ng-model="app.preferences.defaults.Vacation.startDateEnabled"
ng-true-value="1"
UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+10
View File
@@ -18,6 +18,7 @@
.pseudo-input-container {
display: block; // Should be (reset to ?) a plain block element
padding: 0 2px;
vertical-align: middle;
}
.sg-search-field-container {
margin-bottom: 12px;
@@ -42,6 +43,10 @@
@include rtl(transform-origin, left top, right top);
}
.button-label {
@include rtl(transform-origin, left center, right center);
}
.pseudo-input-label--no-margin,
.button-label {
margin-top: 0;
@@ -55,6 +60,11 @@
.pseudo-input-field {
display: block;
padding-top: $input-padding-top + 2;
padding-bottom: $input-border-width-focused - $input-border-width-default;
padding-left: 2px;
padding-right: 2px;
border-width: 0;
}
.pseudo-input-field--underline {