the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2025-02-03 12:39:09 +08:00
Code Issues Projects Releases Packages Wiki Activity

Some small UI design improvements

Browse source
This commit is contained in:
djmaze 2021-08-27 09:59:13 +02:00
parent c8678953fe
commit 202fac8295
6 changed files with 85 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
dev/Styles/Ui.less
View file

@ -91,21 +91,24 @@ textarea + .settings-save-trigger {
// Actual tabs
.tabs label {
grid-row-start: 1;
color: #555;
margin: 0 2px -1px 0;
line-height: @baseLineHeight;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
cursor: pointer;
grid-row-start: 1;
line-height: @baseLineHeight;
opacity: 0.6;
margin: 0 2px -1px 0;
padding: 5px;
text-align: center;
&:hover {
border-color: @grayLighter @grayLighter #ddd;
border-color: @grayLighter;
opacity: 0.8;
}
}
.tabs [id^="tab"]:checked + label {
color: @gray;
background-color: @white;
border-color: #ddd #ddd transparent #ddd;
opacity: 1;
z-index: 1;
}

136
snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
View file

@ -26,38 +26,38 @@
data-bind="css: { 'testing-done': testingDone, 'testing-error': testingImapError }, tooltipErrorTip: testingImapErrorDesc"
data-i18n="POPUPS_DOMAIN/LABEL_IMAP"></label>
<div class="tab-content" role="tabpanel" aria-hidden="false">
<div class="row">
<div class="span3">
<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
<br />
<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: imapServer, hasfocus: imapServerFocus" />
</div>
<div class="span2">
<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
<br />
<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
style="width:6em" data-bind="textInput: imapPort" />
</div>
<div class="row">
<div class="span3">
<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
<br />
<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: imapServer, hasfocus: imapServerFocus" />
</div>
<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
<br />
<select data-bind="value: imapSecure">
<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
</select>
<br /><br />
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'POPUPS_DOMAIN/LABEL_USE_SHORT_LOGIN',
value: imapShortLogin,
inline: true
}
}"></div>
&nbsp;&nbsp;
<span style="color: #aaa">(user@domain.com → user)</span>
<div class="span2">
<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
<br />
<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
style="width:6em" data-bind="textInput: imapPort" />
</div>
</div>
<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
<br />
<select data-bind="value: imapSecure">
<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
</select>
<br /><br />
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'POPUPS_DOMAIN/LABEL_USE_SHORT_LOGIN',
value: imapShortLogin,
inline: true
}
}"></div>
&nbsp;&nbsp;
<span style="color: #aaa">(user@domain.com → user)</span>
</div>
<input type="radio" name="helptabs" id="tab-help2" />
@ -135,40 +135,40 @@
<span data-i18n="POPUPS_DOMAIN/LABEL_SIEVE"></span>
</label>
<div class="tab-content" role="tabpanel" aria-hidden="true">
<div class="row">
<div class="span5">
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'POPUPS_DOMAIN/LABEL_ALLOW_SIEVE_SCRIPTS',
value: useSieve
}
}"></div>
</div>
</div>
<div data-bind="visible: useSieve">
<div class="row">
<div class="span5">
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'POPUPS_DOMAIN/LABEL_ALLOW_SIEVE_SCRIPTS',
value: useSieve
}
}"></div>
<div class="span3">
<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
<br />
<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: sieveServer, hasfocus: sieveServerFocus" />
</div>
<div class="span1">
<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
<br />
<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
style="width:6em" data-bind="textInput: sievePort" />
</div>
</div>
<div data-bind="visible: useSieve">
<div class="row">
<div class="span3">
<span data-i18n="POPUPS_DOMAIN/LABEL_SERVER"></span>
<br />
<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: sieveServer, hasfocus: sieveServerFocus" />
</div>
<div class="span1">
<span data-i18n="POPUPS_DOMAIN/LABEL_PORT"></span>
<br />
<input type="number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
style="width:6em" data-bind="textInput: sievePort" />
</div>
</div>
<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
<br />
<select data-bind="value: sieveSecure">
<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
</select>
</div>
<span data-i18n="POPUPS_DOMAIN/LABEL_SECURE"></span>
<br />
<select data-bind="value: sieveSecure">
<option value="0" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_NONE"></option>
<option value="1" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_SSL"></option>
<option value="2" data-i18n="POPUPS_DOMAIN/SECURE_OPTION_STARTTLS"></option>
</select>
</div>
</div>
<input type="radio" name="helptabs" id="tab-help4" />
@ -194,11 +194,13 @@
<i class="fontastic">✖</i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></span>
</a>
<a class="btn buttonClear" data-bind="command: createOrAddCommand">
<i class="fontastic" data-bind="text: edit() ? '✔' : '✚', visible: !saving()"></i>
<i class="icon-spinner" data-bind="visible: saving"></i>
<span data-bind="visible: !edit()" data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
<span data-bind="visible: edit()" data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>
<a class="btn" data-bind="command: createOrAddCommand, visible: edit()">
<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">✔</i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>
</a>
<a class="btn" data-bind="command: createOrAddCommand, visible: !edit()">
<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">✚</i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
</a>
</div>
</div>

2
snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
View file

@ -40,7 +40,7 @@
<i class="fontastic">✖</i>
<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
</a>
<a class="btn buttonClear" data-bind="command: createCommand">
<a class="btn" data-bind="command: createCommand">
<i class="fontastic" data-bind="visible: !saving()">✚</i>
<i class="icon-spinner" data-bind="visible: saving"></i>
<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>

2
snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
View file

@ -25,7 +25,7 @@
<i class="fontastic">✖</i>
<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
</a>
<a class="btn buttonClear" data-bind="command: saveCommand, visible: hasConfiguration">
<a class="btn" data-bind="command: saveCommand, visible: hasConfiguration">
<i class="fontastic">✔</i>
<span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span>
</a>

2
snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger buttonClear" data-bind="command: clearCommand">
<a class="btn btn-danger" data-bind="command: clearCommand">
<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
<span data-i18n="GLOBAL/CLEAR"></span>
</a>

4
snappymail/v/0.0.0/themes/SquaresDark/styles.less
View file

@ -143,3 +143,7 @@
.b-folders li a.focused {
background-color: #111;
}
.tabs [id^="tab"]:checked + label {
color: #000;
}