mirror of
https://github.com/zulip/zulip-desktop.git
synced 2025-11-06 06:53:18 +00:00
Finish UI template of multi-server manager.
This commit is contained in:
Zhongyi Tong
@@ -54,10 +54,14 @@ const targetURL = function () {
|
|||||||
if (data.domain === undefined) {
|
if (data.domain === undefined) {
|
||||||
return staticURL;
|
return staticURL;
|
||||||
}
|
}
|
||||||
|
// TODO: Use new main window
|
||||||
|
return 'file://' + path.join(__dirname, '../renderer', 'main.html');
|
||||||
return data.domain;
|
return data.domain;
|
||||||
};
|
};
|
||||||
|
|
||||||
function serverError(targetURL) {
|
function serverError(targetURL) {
|
||||||
|
// TODO: disabled
|
||||||
|
return;
|
||||||
if (targetURL.indexOf('localhost:') < 0 && data.domain) {
|
if (targetURL.indexOf('localhost:') < 0 && data.domain) {
|
||||||
const req = https.request(targetURL + '/static/audio/zulip.ogg', res => {
|
const req = https.request(targetURL + '/static/audio/zulip.ogg', res => {
|
||||||
console.log('Server StatusCode:', res.statusCode);
|
console.log('Server StatusCode:', res.statusCode);
|
||||||
@@ -184,11 +188,12 @@ function createMainWindow() {
|
|||||||
icon: iconPath(),
|
icon: iconPath(),
|
||||||
minWidth: 600,
|
minWidth: 600,
|
||||||
minHeight: 400,
|
minHeight: 400,
|
||||||
|
titleBarStyle: 'hidden-inset',
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
preload: path.join(__dirname, '../renderer/js/preload.js'),
|
preload: path.join(__dirname, '../renderer/js/preload.js'),
|
||||||
plugins: true,
|
plugins: true,
|
||||||
allowDisplayingInsecureContent: true,
|
allowDisplayingInsecureContent: true,
|
||||||
nodeIntegration: false
|
nodeIntegration: true
|
||||||
},
|
},
|
||||||
show: false
|
show: false
|
||||||
});
|
});
|
||||||
|
|||||||
86
app/renderer/css/servermanager.css
Normal file
86
app/renderer/css/servermanager.css
Normal 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
38
app/renderer/main.html
Normal 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>
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
"win": {
|
"win": {
|
||||||
"target": "nsis",
|
"target": "nsis",
|
||||||
"icon": "build/icon.ico"
|
"icon": "build/icon.ico"
|
||||||
},
|
},
|
||||||
"nsis": {
|
"nsis": {
|
||||||
"perMachine": true,
|
"perMachine": true,
|
||||||
"oneClick": false
|
"oneClick": false
|
||||||
|
|||||||
Reference in New Issue
Block a user