paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-17 20:32:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

added toggle switches

Browse Source
This commit is contained in:
ihsavru
2017-09-16 19:09:12 +05:30
parent 48b17a1549
commit 13a7f7475a
3 changed files with 72 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/renderer/css/preference.css
View File

@@ -56,6 +56,11 @@ td:nth-child(odd) {
url(../fonts/MaterialIcons-Regular.ttf) format('truetype'); url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
} }
@font-face {
font-family: 'Montserrat';
src: url(../fonts/Montserrat-Regular.ttf) format('truetype');
}
.material-icons { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
@@ -78,7 +83,7 @@ td:nth-child(odd) {
#content { #content {
display: flex; display: flex;
height: 100%; height: 100%;
font-family: sans-serif; font-family: 'Montserrat';
} }
#sidebar { #sidebar {
@@ -116,7 +121,9 @@ td:nth-child(odd) {
#settings-header { #settings-header {
font-size: 22px; font-size: 22px;
color: #5c6166; color: #576d91;
font-weight: bold;
text-transform: uppercase;
} }
#settings-container { #settings-container {
@@ -134,7 +141,8 @@ td:nth-child(odd) {
.title { .title {
padding: 4px 0 6px 0; padding: 4px 0 6px 0;
font-weight: bold; font-weight: bold;
color: #1e1e1e; color: #576d91;
text-transform: uppercase;
} }
.sub-title { .sub-title {
@@ -328,3 +336,48 @@ i.open-tab-button {
text-decoration: underline; text-decoration: underline;
} }
.onoffswitch {
position: relative; width: 35px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #E3E3E3; border-radius: 36px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
font-size: 35px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #5AD158; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #E3E3E3; color: #666666;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 13px; margin: 1px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 16px;
border: 2px solid #E3E3E3; border-radius: 36px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

BIN
app/renderer/fonts/Montserrat-Regular.ttf Normal file
View File

Binary file not shown.

20
app/renderer/js/pages/preference/base-section.js
View File

@@ -19,14 +19,26 @@ class BaseSection extends BaseComponent {
generateOptionTemplate(settingOption) { generateOptionTemplate(settingOption) {
if (settingOption) { if (settingOption) {
return ` return `
<div class="action green"> <div class="action">
<span>On</span> <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div> </div>
`; `;
} else { } else {
return ` return `
<div class="action red"> <div class="action">
<span>Off</span> <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" >
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div> </div>
`; `;
} }