Use the APP toolbar in profile
This commit is contained in:
yflory
@@ -282,10 +282,6 @@ define([
|
||||
return h('div#container');
|
||||
};
|
||||
|
||||
Pages['/profile/'] = Pages['/profile/index.html'] = function () {
|
||||
return h('div#container');
|
||||
};
|
||||
|
||||
Pages['/register/'] = Pages['/register/index.html'] = function () {
|
||||
return [h('div#main', [
|
||||
h('div.mainOverlay'),
|
||||
@@ -513,5 +509,13 @@ define([
|
||||
];
|
||||
};
|
||||
|
||||
Pages['/profile/'] = Pages['/profile/index.html'] = function () {
|
||||
return [
|
||||
h('div#toolbar'),
|
||||
h('div#container'),
|
||||
loadingScreen()
|
||||
];
|
||||
};
|
||||
|
||||
return Pages;
|
||||
});
|
||||
|
||||
97
customize.dist/src/less/sidebar-layout.less
Normal file
97
customize.dist/src/less/sidebar-layout.less
Normal file
@@ -0,0 +1,97 @@
|
||||
@import '/customize/src/less/variables.less';
|
||||
@import '/customize/src/less/mixins.less';
|
||||
|
||||
@leftside-bg: #eee;
|
||||
@leftside-color: #000;
|
||||
@rightside-color: #000;
|
||||
@description-color: #777;
|
||||
|
||||
@button-width: 400px;
|
||||
@button-bg: #3066e5;
|
||||
@button-alt-bg: #fff;
|
||||
@button-red-bg: #e54e4e;
|
||||
|
||||
|
||||
.cp {
|
||||
input[type="text"] {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#container {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
#leftSide {
|
||||
color: @leftside-color;
|
||||
width: 250px;
|
||||
background: @leftside-bg;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.categories {
|
||||
flex: 1;
|
||||
.category {
|
||||
.leftsideCategory();
|
||||
}
|
||||
}
|
||||
}
|
||||
#rightSide {
|
||||
flex: 1;
|
||||
padding: 5px 20px;
|
||||
color: @rightside-color;
|
||||
overflow: auto;
|
||||
.element {
|
||||
label:not(.noTitle), .label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.description {
|
||||
display: block;
|
||||
color: @description-color;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
[type="text"], button {
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.inputBlock {
|
||||
display: inline-flex;
|
||||
width: @button-width;
|
||||
input {
|
||||
flex: 1;
|
||||
border-radius: 0.25em 0 0 0.25em;
|
||||
border: 1px solid #adadad;
|
||||
border-right: 0px;
|
||||
}
|
||||
button {
|
||||
border-radius: 0 0.25em 0.25em 0;
|
||||
//border: 1px solid #adadad;
|
||||
border-left: 0px;
|
||||
}
|
||||
}
|
||||
button.btn {
|
||||
background-color: @button-bg;
|
||||
border-color: darken(@button-bg, 10%);
|
||||
color: white;
|
||||
&:hover {
|
||||
background-color: darken(@button-bg, 10%);
|
||||
}
|
||||
&.btn-danger {
|
||||
background-color: @button-red-bg;
|
||||
border-color: darken(@button-red-bg, 10%);
|
||||
color: white;
|
||||
&:hover {
|
||||
background-color: darken(@button-red-bg, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&>div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
.whiteboardColor { color: @toolbar-whiteboard-bg; }
|
||||
.driveColor { color: @toolbar-drive-bg; }
|
||||
.settingsColor { color: @toolbar-settings-bg; }
|
||||
.profileColor { color: @toolbar-settings-bg; }
|
||||
.defaultColor { color: @toolbar-default-bg; }
|
||||
|
||||
.toolbar-container {
|
||||
@@ -268,6 +269,11 @@ body {
|
||||
@color: @toolbar-settings-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
&.app-profile {
|
||||
@bgcolor: @toolbar-profile-bg;
|
||||
@color: @toolbar-profile-color;
|
||||
.addToolbarColors(@color, @bgcolor);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -105,6 +105,8 @@
|
||||
@toolbar-default-color: #000;
|
||||
@toolbar-settings-bg: #0087ff;
|
||||
@toolbar-settings-color: #fff;
|
||||
@toolbar-profile-bg: #0087ff;
|
||||
@toolbar-profile-color: #fff;
|
||||
|
||||
|
||||
@topbar-back: #fff;
|
||||
|
||||
@@ -12,7 +12,7 @@ $(function () {
|
||||
var Messages = Cryptpad.Messages;
|
||||
var $body = $('body');
|
||||
var isMainApp = function () {
|
||||
return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings)\/$/.test(location.pathname);
|
||||
return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings|profile)\/$/.test(location.pathname);
|
||||
};
|
||||
|
||||
var rightLink = function (ref, loc, txt) {
|
||||
@@ -145,7 +145,7 @@ $(function () {
|
||||
} else if (/drive/.test(pathname)) {
|
||||
$('body').append(h('body', Pages[pathname]()).innerHTML);
|
||||
require(['/drive/main.js'], ready);
|
||||
} else if (/file/.test(pathname)) {
|
||||
} else if (/\/file\//.test(pathname)) {
|
||||
$('body').append(h('body', Pages[pathname]()).innerHTML);
|
||||
require([ '/file/main.js' ], ready);
|
||||
} else if (/friends/.test(pathname)) {
|
||||
@@ -163,6 +163,9 @@ $(function () {
|
||||
} else if (/^\/settings\//.test(pathname)) {
|
||||
$('body').append(h('body', Pages[pathname]()).innerHTML);
|
||||
require([ '/settings/main.js', ], ready);
|
||||
} else if (/^\/profile\//.test(pathname)) {
|
||||
$('body').append(h('body', Pages[pathname]()).innerHTML);
|
||||
require([ '/profile/main.js', ], ready);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -176,9 +179,7 @@ $(function () {
|
||||
], function () {
|
||||
$body.append($topbar).append($main).append($footer);
|
||||
|
||||
if (/^\/profile\//.test(pathname)) {
|
||||
require([ '/profile/main.js'], function () {});
|
||||
} else if (/^\/user\//.test(pathname)) {
|
||||
if (/^\/user\//.test(pathname)) {
|
||||
require([ '/user/main.js'], function () {});
|
||||
} else if (/^\/register\//.test(pathname)) {
|
||||
require([ '/register/main.js' ], function () {});
|
||||
|
||||
Reference in New Issue
Block a user