paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-10-23 03:31:56 +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');
}
@font-face {
font-family: 'Montserrat';
src: url(../fonts/Montserrat-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
@@ -78,7 +83,7 @@ td:nth-child(odd) {
#content {
display: flex;
height: 100%;
font-family: sans-serif;
font-family: 'Montserrat';
}
#sidebar {
@@ -116,7 +121,9 @@ td:nth-child(odd) {
#settings-header {
font-size: 22px;
color: #5c6166;
color: #576d91;
font-weight: bold;
text-transform: uppercase;
}
#settings-container {
@@ -134,7 +141,8 @@ td:nth-child(odd) {
.title {
padding: 4px 0 6px 0;
font-weight: bold;
color: #1e1e1e;
color: #576d91;
text-transform: uppercase;
}
.sub-title {
@@ -328,3 +336,48 @@ i.open-tab-button {
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) {
if (settingOption) {
return `
<div class="action green">
<span>On</span>
<div class="action">
<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>
`;
} else {
return `
<div class="action red">
<span>Off</span>
<div class="action">
<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>
`;
}