mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 15:45:55 +08:00
Better (material) components design
This commit is contained in:
djmaze
parent
30bec04a75
commit
a92d5a0f4f
|
|
@ -1,28 +1,3 @@
|
|||
import ko from 'ko';
|
||||
import { AbstractCheckbox } from 'Component/AbstractCheckbox';
|
||||
|
||||
export class CheckboxMaterialDesignComponent extends AbstractCheckbox {
|
||||
/**
|
||||
* @param {Object} params
|
||||
*/
|
||||
constructor(params) {
|
||||
super(params);
|
||||
|
||||
this.animationBox = ko.observable(false).extend({ falseTimeout: 200 });
|
||||
this.animationCheckmark = ko.observable(false).extend({ falseTimeout: 200 });
|
||||
|
||||
this.disposable.push(
|
||||
this.value.subscribe(value => this.triggerAnimation(value), this)
|
||||
);
|
||||
}
|
||||
|
||||
triggerAnimation(box) {
|
||||
if (box) {
|
||||
this.animationBox(true);
|
||||
setTimeout(()=>this.animationCheckmark(true), 200);
|
||||
} else {
|
||||
this.animationCheckmark(true);
|
||||
setTimeout(()=>this.animationBox(true), 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
export class CheckboxMaterialDesignComponent extends AbstractCheckbox {}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
left: 5px;
|
||||
width: 10px;
|
||||
height: 18px;
|
||||
|
||||
border: 2px solid #0F9D58;
|
||||
border-width: 0 2px 2px 0;
|
||||
|
||||
transform: rotate(45deg);
|
||||
|
|
@ -31,21 +31,23 @@
|
|||
|
||||
.e-component {
|
||||
|
||||
&.e-select {
|
||||
white-space: nowrap;
|
||||
|
||||
select:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
* {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
&.e-checkbox {
|
||||
|
||||
cursor: pointer;
|
||||
margin-bottom: 6px;
|
||||
margin-left: -2px;
|
||||
padding: 2px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
|
@ -56,92 +58,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.e-radio {
|
||||
span {
|
||||
margin-left: 0.5em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
select + span {
|
||||
line-height: 1.43em;
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.e-component.material-design {
|
||||
.e-checkbox.material-design {
|
||||
|
||||
line-height: 20px;
|
||||
|
||||
&.e-checkbox {
|
||||
> div {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
margin-top: 2px;
|
||||
padding: 2px 2px 1px 2px;
|
||||
> div > div {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1px;
|
||||
|
||||
.sub-checkbox-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transform: translateZ(0);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
animation: checkmark-to-box 200ms ease-out forwards;
|
||||
}
|
||||
|
||||
.sub-label {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.sub-checkbox {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1px;
|
||||
|
||||
.checkbox-box-sizes();
|
||||
}
|
||||
|
||||
.sub-checkbox.checked {
|
||||
border-color: #0F9D58;
|
||||
|
||||
.checkbox-mark-sizes();
|
||||
}
|
||||
|
||||
// animation
|
||||
.sub-checkbox.checked {
|
||||
&.box {
|
||||
border: solid 2px;
|
||||
animation: box-shrink 140ms ease-out forwards;
|
||||
}
|
||||
&.checkmark {
|
||||
animation: checkmark-expand 140ms ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-checkbox.unchecked {
|
||||
&.box {
|
||||
animation: box-expand 140ms ease-out forwards;
|
||||
}
|
||||
&.checkmark {
|
||||
transform: rotate(45deg);
|
||||
animation: checkmark-shrink 140ms ease-out forwards;
|
||||
}
|
||||
}
|
||||
div.checked {
|
||||
animation: box-to-checkmark 200ms ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box-shrink {
|
||||
@keyframes box-to-checkmark {
|
||||
0% { .checkbox-box-sizes(); }
|
||||
100% { .checkbox-result-sizes(); }
|
||||
}
|
||||
|
||||
@keyframes checkmark-expand {
|
||||
0% { .checkbox-result-sizes(); }
|
||||
50% { .checkbox-result-sizes(); }
|
||||
100% { .checkbox-mark-sizes(); }
|
||||
}
|
||||
|
||||
@keyframes checkmark-shrink {
|
||||
@keyframes checkmark-to-box {
|
||||
0% { .checkbox-mark-sizes(); }
|
||||
100% { .checkbox-result-sizes(); }
|
||||
}
|
||||
|
||||
@keyframes box-expand {
|
||||
0% { .checkbox-result-sizes(); }
|
||||
50% { .checkbox-result-sizes(); }
|
||||
100% { .checkbox-box-sizes(); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
display: inline-block;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-left: 0.5em;
|
||||
|
||||
&::after {
|
||||
font-family: "snappymail";
|
||||
content: " ";
|
||||
display: block;
|
||||
margin-left: 1em;
|
||||
opacity: 0;
|
||||
transition: opacity 1s linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
|
||||
label.inline, span.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -82,8 +82,7 @@
|
|||
name: 'Checkbox',
|
||||
params: {
|
||||
label: 'TAB_GENERAL/LABEL_SHOW_THUMBNAILS',
|
||||
value: capaAttachmentThumbnails,
|
||||
inline: false
|
||||
value: capaAttachmentThumbnails
|
||||
}
|
||||
}"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
|
||||
<div class="e-component e-checkbox" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
|
||||
<i role="checkbox" class="e-checkbox-icon fontastic" data-bind="text: value() ? '☑' : '☐'"></i>
|
||||
<!-- ko if: labeled -->
|
||||
<span class="sub-label" data-bind="attr: {'data-i18n': label}"></span>
|
||||
<span data-bind="attr: {'data-i18n': label}"></span>
|
||||
<!-- /ko -->
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
<span class="e-component e-checkbox material-design inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
|
||||
<div class="sub-checkbox-container" role="checkbox">
|
||||
<div class="sub-checkbox" data-bind="css: {'checked': value(),
|
||||
'unchecked': !value(),
|
||||
'box': animationBox, 'checkmark': animationCheckmark}"></div>
|
||||
<div class="e-component e-checkbox material-design" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
|
||||
<div role="checkbox">
|
||||
<div data-bind="css: {'checked': value()}"></div>
|
||||
</div>
|
||||
<!-- ko if: labeled -->
|
||||
<span class="sub-label" data-bind="attr: {'data-i18n': label}"></span>
|
||||
<span data-bind="attr: {'data-i18n': label}"></span>
|
||||
<!-- /ko -->
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<div class="e-component e-select inline">
|
||||
<div class="e-component e-select">
|
||||
<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
|
||||
optionsCaption: optionsCaption, css: className, optionsAfterRender: defaultOptionsAfterRender"></select>
|
||||
<!-- ko if: labeled -->
|
||||
|
||||
<span data-bind="attr: {'data-i18n': label}"></span>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: trigger -->
|
||||
|
|
|
|||
BIN
vendors/fontastic/fonts/snappymail.woff
vendored
BIN
vendors/fontastic/fonts/snappymail.woff
vendored
Binary file not shown.
BIN
vendors/fontastic/fonts/snappymail.woff2
vendored
BIN
vendors/fontastic/fonts/snappymail.woff2
vendored
Binary file not shown.
Loading…
Reference in a new issue