Improve the toolbar style and the way the userlist is displayed

This commit is contained in:
yflory
2016-10-12 18:40:26 +02:00
parent d2389a5729
commit 24fbe22c9d
15 changed files with 618 additions and 311 deletions

View File

@@ -19,23 +19,35 @@
html, body {
overflow-y: hidden;
}
#iframe-container {
position: fixed;
top: 2.5em;
bottom: 0px;
right: 0px;
left: 0px;
padding: 0px;
}
#pad-iframe {
position:fixed;
top:2.5em;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
box-sizing: border-box;
}
/* We use !important here to override the 96% set to the element in DecorateToolbar.js
when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
#pad-iframe.fullscreen {
top: 0px;
height: 100% !important;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<div id="iframe-container">
<iframe id="pad-iframe" src="inner.html"></iframe>
</div>
</body>
</html>

View File

@@ -31,24 +31,24 @@
<script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
<script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
<style>
html {
height: 100%;
html, body{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
body {
height: 100%;
margin: 0px;
display: flex;
flex-flow: column;
}
.CodeMirror {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
height: auto;
height: 100%;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
height: 25px;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */

View File

@@ -309,6 +309,9 @@ define([
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var $userBlock = $bar.find('.' + Toolbar.constants.username);
var $editShare = $bar.find('.' + Toolbar.constants.editShare);
var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@@ -322,8 +325,8 @@ define([
var usernameCb = function (newName) {
setName (newName);
};
var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
$rightside.append($username);
var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
$userBlock.append($username);
});
/* add an export button */
@@ -353,10 +356,18 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
if (!readOnly && viewHash) {
if (!readOnly) {
var $links = Cryptpad.createButton('editshare', false, {editHash: editHash});
$editShare.append($links);
}
if (viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash});
$rightside.append($links);
var $links = Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
if (!readOnly) {
var $links = Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'});
$viewShare.append($links);
}
}
var configureLanguage = function (cb) {