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

Finish UI template of multi-server manager.

Browse Source
This commit is contained in:
Zhongyi Tong
2017-04-20 23:15:01 +08:00
parent 3dade768a7
commit cf8c83e3cf
4 changed files with 131 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/renderer/css/servermanager.css Normal file
View File

@@ -0,0 +1,86 @@
html, body {
height: 100%;
margin: 0;
}
#content {
display: flex;
height: 100%;
}
#sidebar {
background: #222c31;
width: 88px;
padding: 40px 0 20px 0;
justify-content: space-between;
display: flex;
flex-direction: column;
-webkit-app-region: drag;
}
#webview {
width: 100%;
}
.action-button {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.action-button i {
color: #6c8592;
font-size: 28px;
}
#servers-container {
display: flex;
align-items: center;
flex-direction: column;
}
.server-button {
position: relative;
margin: 5px 0 5px 6px;
}
.server-button.active::before{
content: "";
background: #43bba6;
border-radius: 3px;
width: 6px;
position: absolute;
height: 6px;
left: -12px;
top: 25px;
}
.server-button .server-name{
background: #a4d3c4;
border-radius: 22px;
width: 44px;
height: 44px;
position: relative;
margin: 5px 0;
z-index: 11;
line-height: 44px;
font-size: 24px;
font-family: sans-serif;
color: #194a2b;
text-align: center;
overflow: hidden;
}
.server-button.active .server-ring {
background: #43bba6;
border-radius: 24px;
width: 48px;
height: 48px;
position: absolute;
left: -2px;
top: 3px;
z-index: 10;
}

38
app/renderer/main.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en" class="responsive desktop">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>Zulip</title>
<link rel="stylesheet" href="css/servermanager.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="content">
<div id="sidebar">
<div id="servers-container">
<div class="server-button">
<div class="server-name">B</div>
<div class="server-ring"></div>
</div>
<div class="server-button active">
<div class="server-name">C</div>
<div class="server-ring"></div>
</div>
</div>
<div id="actions-container">
<div class="action-button" id="add-action">
<i class="material-icons md-48">add_circle</i>
</div>
<div class="action-button" id="settings-action">
<i class="material-icons md-48">settings</i>
</div>
</div>
</div>
<webview id="webview" src="https://chat.zulip.org" disablewebsecurity webpreferences="allowRunningInsecureContent, javascript=yes">>
</webview>
</div>
</body>
<script src="js/main.js"></script>
</html>