paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-03 13:33:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

design: Update UI for server section #340

Browse Source
This commit is contained in:
akashnimare
2017-12-11 15:41:08 +05:30
parent 7697d5d698
commit ae7374475f
4 changed files with 112 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ body {
cursor: default; cursor: default;
user-select: none; user-select: none;
font-family: menu, "Helvetica Neue", sans-serif; font-family: menu, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
background: #efefef; background: #efefef;
@@ -24,7 +24,9 @@ kbd {
white-space: nowrap; white-space: nowrap;
} }
table, th, td { table,
th,
td {
border-collapse: collapse; border-collapse: collapse;
color: #383430; color: #383430;
} }
@@ -33,51 +35,54 @@ table {
width: 100%; width: 100%;
margin-top: 18px; margin-top: 18px;
margin-bottom: 18px; margin-bottom: 18px;
} }
table tr:nth-child(even) { background-color: #f7eee6; } table tr:nth-child(even) {
background-color: #f7eee6;
}
table tr:nth-child(odd) { background-color: #fff8ef; } table tr:nth-child(odd) {
background-color: #fff8ef;
}
td {
td { padding: 5px; } padding: 5px;
}
td:nth-child(odd) { td:nth-child(odd) {
text-align: right; text-align: right;
width: 50%; width: 50%;
} }
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Material Icons'), src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
local('MaterialIcons-Regular'),
url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
} }
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
src: url(../fonts/Montserrat-Regular.ttf) format('truetype'); 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;
font-style: normal; font-style: normal;
/* Preferred icon size */ /* Preferred icon size */
font-size: 24px; font-size: 24px;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
word-wrap: normal; word-wrap: normal;
white-space: nowrap; white-space: nowrap;
direction: ltr; direction: ltr;
/* Support for all WebKit browsers. */ /* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */ /* Support for Safari and Chrome. */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
#content { #content {
@@ -144,6 +149,13 @@ td:nth-child(odd) {
color: #222c31; color: #222c31;
} }
.page-title {
color: #222c31;
font-size: 15px;
font-weight: bold;
padding: 4px 0 6px 0;
}
.sub-title { .sub-title {
padding: 4px 0 6px 0; padding: 4px 0 6px 0;
font-weight: bold; font-weight: bold;
@@ -188,16 +200,18 @@ img.server-info-icon {
.setting-input-value { .setting-input-value {
flex-grow: 1; flex-grow: 1;
font-size: 14px; font-size: 14px;
height: 24px; height: 22px;
border: none; border-radius: 3px;
border-bottom: #ededed 1px solid; padding: 7px;
border: #ededed 2px solid;
outline-width: 0; outline-width: 0;
background: transparent; background: transparent;
max-width: 500px; max-width: 500px;
} }
.setting-input-value:focus { .setting-input-value:focus {
border-bottom: #7cb980 1px solid; border: #7cb980 2px solid;
border-radius: 3px;
} }
.setting-block { .setting-block {
@@ -314,75 +328,82 @@ i.open-tab-button {
} }
#server-info-container { #server-info-container {
min-height: calc(100% - 235px); min-height: calc(100% - 235px);
} }
#create-organization-container { #create-organization-container {
font-size: 1.15em; font-size: 1.15em;
margin-bottom: 15px; margin-bottom: 15px;
} }
#create-organization-container i { #create-organization-container i {
position: relative; position: relative;
top: 3px; top: 3px;
} }
#open-create-org-link { #open-create-org-link {
color: #666; color: #666;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
#open-create-org-link:hover { #open-create-org-link:hover {
color: #005580;; color: #005580;
text-decoration: underline; ;
text-decoration: underline;
} }
.toggle { .toggle {
position: absolute; position: absolute;
margin-left: -9999px; margin-left: -9999px;
visibility: hidden; visibility: hidden;
}
.toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
} }
input.toggle-round + label { .toggle+label {
padding: 2px; display: block;
width: 50px; position: relative;
height: 25px; cursor: pointer;
background-color: #dddddd; outline: none;
border-radius: 25px; user-select: none;
} }
input.toggle-round + label:before,
input.toggle-round + label:after { input.toggle-round+label {
display: block; padding: 2px;
position: absolute; width: 50px;
top: 2px; height: 25px;
left: 2px; background-color: #dddddd;
bottom: 2px; border-radius: 25px;
content: "";
} }
input.toggle-round + label:before {
right: 2px; input.toggle-round+label:before,
background-color: #f1f1f1; input.toggle-round+label:after {
border-radius: 25px; display: block;
transition: background 0.4s; position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
content: "";
} }
input.toggle-round + label:after {
width: 25px; input.toggle-round+label:before {
height: 25px; right: 2px;
background-color: #fff; background-color: #f1f1f1;
border-radius: 100%; border-radius: 25px;
transition: margin 0.4s; transition: background 0.4s;
} }
input.toggle-round:checked + label:before {
background-color: #4EBFAC; input.toggle-round+label:after {
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 100%;
transition: margin 0.4s;
} }
input.toggle-round:checked + label:after {
margin-left: 25px; input.toggle-round:checked+label:before {
background-color: #4EBFAC;
}
input.toggle-round:checked+label:after {
margin-left: 25px;
} }

1
app/renderer/js/pages/preference/new-server-form.js
View File

@@ -13,6 +13,7 @@ class NewServerForm extends BaseComponent {
return ` return `
<div class="settings-card"> <div class="settings-card">
<div class="server-info-right"> <div class="server-info-right">
<div class="title">Enter URL of your Zulip Organization</div>
<div class="server-info-row"> <div class="server-info-row">
<input class="setting-input-value" autofocus placeholder="example.zulipchat.com"/> <input class="setting-input-value" autofocus placeholder="example.zulipchat.com"/>
</div> </div>

6
app/renderer/js/pages/preference/servers-section.js
View File

@@ -15,7 +15,7 @@ class ServersSection extends BaseSection {
template() { template() {
return ` return `
<div class="settings-pane" id="server-settings-pane"> <div class="settings-pane" id="server-settings-pane">
<div class="title">Enter URL of your Zulip organization</div> <div class="page-title">Register or login to a Zulip Organization to get started</div>
<div id="new-server-container"></div> <div id="new-server-container"></div>
<div class="title" id="existing-servers"></div> <div class="title" id="existing-servers"></div>
<div id="server-info-container"></div> <div id="server-info-container"></div>
@@ -38,9 +38,9 @@ class ServersSection extends BaseSection {
this.$newServerContainer = document.getElementById('new-server-container'); this.$newServerContainer = document.getElementById('new-server-container');
this.$newServerButton = document.getElementById('new-server-action'); this.$newServerButton = document.getElementById('new-server-action');
this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!'; this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
// Show Existing servers if servers are there otherwise hide it // Show Existing servers if servers are there otherwise hide it
this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing Servers'; this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing Organizations';
this.initNewServerForm(); this.initNewServerForm();
this.$createOrganizationContainer = document.getElementById('create-organization-container'); this.$createOrganizationContainer = document.getElementById('create-organization-container');

2
app/renderer/preference.html
View File

@@ -12,5 +12,5 @@
<div id="settings-container"></div> <div id="settings-container"></div>
</div> </div>
</body> </body>
<script src="js/pages/preference/preference.js"></script> <script src="js/pages/preference/preference.js"></script>
</html> </html>