Settings page UI/UX
This commit is contained in:
Sébastien Hut
Sébastien Hut
parent
c0f7e12ba8
commit
cd49158025
|
|
@ -111,6 +111,9 @@ module.exports = {
|
|||
|
||||
new Router();
|
||||
app.history = Backbone.history;
|
||||
app.history.on("route", function(route, params) {
|
||||
app.state.pageChanged = params;
|
||||
});
|
||||
|
||||
self.view = new MainView({
|
||||
model: app.state,
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@ module.exports = HumanModel.define({
|
|||
pageTitle: 'string',
|
||||
hasActiveCall: ['boolean', false, false],
|
||||
cacheStatus: 'string',
|
||||
deviceID: ['string', false, '']
|
||||
deviceID: ['string', false, ''],
|
||||
pageChanged: ['string', false, '']
|
||||
},
|
||||
derived: {
|
||||
title: {
|
||||
|
|
@ -64,6 +65,12 @@ module.exports = HumanModel.define({
|
|||
fn: function () {
|
||||
return (this.connected && !!this.deviceID);
|
||||
}
|
||||
},
|
||||
currentPageIsSettings: {
|
||||
deps: ['pageChanged'],
|
||||
fn: function () {
|
||||
return this.pageChanged === 'settings' ? 'active' : '';
|
||||
}
|
||||
}
|
||||
},
|
||||
markActive: function () {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var templates = require('../templates');
|
|||
|
||||
|
||||
module.exports = BasePage.extend({
|
||||
template: templates.pages.main,
|
||||
template: templates.pages.settings,
|
||||
classBindings: {
|
||||
shouldAskForAlertsPermission: '.enableAlerts',
|
||||
soundEnabledClass: '.soundNotifs'
|
||||
|
|
@ -2,22 +2,22 @@
|
|||
"use strict";
|
||||
|
||||
var Backbone = require('backbone');
|
||||
var MainPage = require('./pages/main');
|
||||
var SettingsPage = require('./pages/settings');
|
||||
var ChatPage = require('./pages/chat');
|
||||
var GroupChatPage = require('./pages/groupchat');
|
||||
|
||||
|
||||
module.exports = Backbone.Router.extend({
|
||||
routes: {
|
||||
'': 'main',
|
||||
'': 'settings',
|
||||
'chat/:jid': 'chat',
|
||||
'chat/:jid/:resource': 'chat',
|
||||
'groupchat/:jid': 'groupchat',
|
||||
'logout': 'logout'
|
||||
},
|
||||
// ------- ROUTE HANDLERS ---------
|
||||
main: function () {
|
||||
app.renderPage(new MainPage({
|
||||
settings: function () {
|
||||
app.renderPage(new SettingsPage({
|
||||
model: me
|
||||
}));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ exports.pages = {};
|
|||
exports.body = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<body><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg></a></section><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Direct messages</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></aside><header id="topbar"><div id="connectionStatus"><p>You\'re currently <strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></div><div id="me"><img class="avatar"/><div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></header><main id="pages"></main></div></body>');
|
||||
buf.push('<body><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span><a href="/" class="button secondary settings"><svg id="settingssvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg></a></section><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Direct messages</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></aside><header id="topbar"><div id="connectionStatus"><p>You\'re currently <strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></div><div id="me"><img class="avatar"/><div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></header><main id="pages"></main></div></body>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
@ -508,11 +508,11 @@ exports.pages.groupchat = function anonymous(locals) {
|
|||
return buf.join("");
|
||||
};
|
||||
|
||||
// main.jade compiled template
|
||||
exports.pages.main = function anonymous(locals) {
|
||||
// settings.jade compiled template
|
||||
exports.pages.settings = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page main"><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">sound notifications</button></div><div><button class="logout">Logout</button></div></section>');
|
||||
buf.push('<section class="page main"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 30 30" height="30" width="30"><g transform="scale(0.5)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">sound notifications</button></div><div><button class="logout">Logout</button></div></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ body
|
|||
section#organization
|
||||
span#orga_name
|
||||
a(href="/", class="button secondary settings")
|
||||
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
|
||||
svg(id='settingssvg', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
|
||||
g(transform='scale(0.4)')
|
||||
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
|
||||
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
section.page.main
|
||||
|
||||
h1#title Settings
|
||||
|
||||
div#avatarChanger
|
||||
h4 Change Avatar
|
||||
div.uploadRegion
|
||||
p Drag and drop a new avatar here
|
||||
img
|
||||
form
|
||||
input#uploader(type="file")
|
||||
|
||||
div
|
||||
h4 Desktop Integration
|
||||
button.enableAlerts Enable alerts
|
||||
button.primary.installFirefox Install app
|
||||
button.soundNotifs sound notifications
|
||||
|
||||
div
|
||||
button.logout Logout
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
section.page.main
|
||||
|
||||
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 30 30", height="30", width="30")
|
||||
g(transform='scale(0.5)')
|
||||
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
|
||||
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
|
||||
h1#title Settings
|
||||
|
||||
div#avatarChanger
|
||||
h4 Change Avatar
|
||||
div.uploadRegion
|
||||
p Drag and drop a new avatar here
|
||||
img
|
||||
form
|
||||
input#uploader(type="file")
|
||||
|
||||
div
|
||||
h4 Desktop Integration
|
||||
button.enableAlerts Enable alerts
|
||||
button.primary.installFirefox Install app
|
||||
button.soundNotifs sound notifications
|
||||
|
||||
div
|
||||
button.logout Logout
|
||||
|
|
@ -34,7 +34,8 @@ module.exports = HumanView.extend({
|
|||
classBindings: {
|
||||
connected: '#topbar',
|
||||
cacheStatus: '#updateBar',
|
||||
hasActiveCall: '#wrapper'
|
||||
hasActiveCall: '#wrapper',
|
||||
currentPageIsSettings: '.settings'
|
||||
},
|
||||
render: function () {
|
||||
$('head').append(templates.head());
|
||||
|
|
|
|||
|
|
@ -565,6 +565,9 @@ button.secondary:hover:not(:disabled) {
|
|||
#menu #organization .settings:hover svg {
|
||||
fill: #94b021;
|
||||
}
|
||||
#menu #organization .settings.active svg {
|
||||
fill: #94b021;
|
||||
}
|
||||
#menu .main {
|
||||
margin: 10px 0 0 0;
|
||||
text-align: center;
|
||||
|
|
@ -1521,9 +1524,24 @@ button.secondary:hover:not(:disabled) {
|
|||
.embed a.source {
|
||||
display: none;
|
||||
}
|
||||
.main svg {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 16px;
|
||||
margin: 0px;
|
||||
margin-top: -13px;
|
||||
fill: #9e9ea6;
|
||||
z-index: 101;
|
||||
}
|
||||
.main h1 {
|
||||
padding: 34px 20px 0 20px;
|
||||
color: #192a47;
|
||||
color: #555459;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
left: 266px;
|
||||
right: 200px;
|
||||
z-index: 101;
|
||||
}
|
||||
.main > div {
|
||||
padding: 20px;
|
||||
|
|
@ -1559,7 +1577,7 @@ button.secondary:hover:not(:disabled) {
|
|||
-o-border-radius: 3px;
|
||||
-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 0;
|
||||
margin: 50px 0;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@
|
|||
svg
|
||||
fill: $settingsHoverText
|
||||
|
||||
&.active
|
||||
svg
|
||||
fill: $settingsHoverText
|
||||
|
||||
.main
|
||||
margin: 10px 0 0 0
|
||||
text-align: center
|
||||
|
|
|
|||
|
|
@ -4,9 +4,24 @@
|
|||
// Settings
|
||||
.main
|
||||
|
||||
svg
|
||||
position: absolute
|
||||
top: 24px
|
||||
left: 16px
|
||||
margin: 0px
|
||||
margin-top: -13px
|
||||
fill: $gray
|
||||
z-index: 101
|
||||
|
||||
h1
|
||||
padding: 34px 20px 0 20px
|
||||
color: $blue-saturated
|
||||
color: $gray-dark
|
||||
padding: 0
|
||||
margin: 0
|
||||
position: fixed
|
||||
top: 14px
|
||||
left: 266px
|
||||
right: 200px
|
||||
z-index: 101
|
||||
|
||||
> div
|
||||
padding: 20px
|
||||
|
|
@ -37,7 +52,7 @@
|
|||
.uploadRegion
|
||||
padding: 15px
|
||||
roundall(3px)
|
||||
margin: 10px 0
|
||||
margin: 50px 0
|
||||
border: 1px solid $gray-lighter
|
||||
background: lighten($gray-lighter, 80%)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue