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('

Update available!

You\'re currently disconnected

'); + buf.push('

Update available!

You\'re currently disconnected

'); } 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%)