diff --git a/clientapp/app.js b/clientapp/app.js
index 993a802..7f8fab2 100644
--- a/clientapp/app.js
+++ b/clientapp/app.js
@@ -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,
diff --git a/clientapp/models/state.js b/clientapp/models/state.js
index af9acc6..61cac76 100644
--- a/clientapp/models/state.js
+++ b/clientapp/models/state.js
@@ -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 () {
diff --git a/clientapp/pages/main.js b/clientapp/pages/settings.js
similarity index 98%
rename from clientapp/pages/main.js
rename to clientapp/pages/settings.js
index e8495c4..3da5822 100644
--- a/clientapp/pages/main.js
+++ b/clientapp/pages/settings.js
@@ -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'
diff --git a/clientapp/router.js b/clientapp/router.js
index 219eddc..c465f57 100644
--- a/clientapp/router.js
+++ b/clientapp/router.js
@@ -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
}));
},
diff --git a/clientapp/templates.js b/clientapp/templates.js
index 0bfcc66..6b5746d 100644
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) {
var buf = [];
with (locals || {}) {
- buf.push('
');
+ buf.push('');
}
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('Settings
Change Avatar
Drag and drop a new avatar here
Desktop Integration
');
+ buf.push('Settings
Change Avatar
Drag and drop a new avatar here
Desktop Integration
');
}
return buf.join("");
};
diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade
index 12d2f61..d8b1dab 100644
--- a/clientapp/templates/body.jade
+++ b/clientapp/templates/body.jade
@@ -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')
diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade
deleted file mode 100644
index ad253c6..0000000
--- a/clientapp/templates/pages/main.jade
+++ /dev/null
@@ -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
diff --git a/clientapp/templates/pages/settings.jade b/clientapp/templates/pages/settings.jade
new file mode 100644
index 0000000..4caa4dd
--- /dev/null
+++ b/clientapp/templates/pages/settings.jade
@@ -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
diff --git a/clientapp/views/main.js b/clientapp/views/main.js
index 6d8e96f..b98214d 100644
--- a/clientapp/views/main.js
+++ b/clientapp/views/main.js
@@ -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());
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 540b41f..9a3035f 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -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;
}
diff --git a/public/css/pages/roster.styl b/public/css/pages/roster.styl
index e1c7bd4..1cea884 100644
--- a/public/css/pages/roster.styl
+++ b/public/css/pages/roster.styl
@@ -50,6 +50,10 @@
svg
fill: $settingsHoverText
+ &.active
+ svg
+ fill: $settingsHoverText
+
.main
margin: 10px 0 0 0
text-align: center
diff --git a/public/css/pages/settings.styl b/public/css/pages/settings.styl
index c446257..fe0a5c5 100644
--- a/public/css/pages/settings.styl
+++ b/public/css/pages/settings.styl
@@ -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%)