diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 810646e24..055e60fb6 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -270,11 +270,11 @@ define([ 'class': 'lag' }); var title; - if (typeof lag !== "undefined") { + if (lag) { lagErrors = 0; firstConnection = false; title = Messages.lag + ' : ' + lag + ' ms\n'; - if (lag.waiting || lag > 1000) { + if (lag && lag.waiting || lag > 1000) { lagLight.addClass('lag-orange'); title += Messages.orangeLight; } else { diff --git a/www/drive/file.css b/www/drive/file.css index f406bf4c7..4ac44552f 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -180,6 +180,9 @@ span.fa-folder-open { display: flex; flex-flow: column; } +#content.readonly { + background: #e6e6e6; +} #content h1 { padding-left: 10px; margin-top: 10px; diff --git a/www/drive/file.less b/www/drive/file.less index 20b7175ca..fd18f54f3 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -3,6 +3,7 @@ @tree-lines-col: #888; @content-bg: @tree-bg; +@content-bg-ro: darken(@content-bg, 10%); @content-fg: @tree-fg; @info-box-bg: #ddddff; @info-box-border: #bbb; @@ -219,6 +220,9 @@ span { flex: 1; display: flex; flex-flow: column; + &.readonly { + background: @content-bg-ro; + } h1 { padding-left: 10px; margin-top: 10px; diff --git a/www/drive/main.js b/www/drive/main.js index aa823c968..a6a440354 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -18,6 +18,15 @@ define([ var $iframe = $('#pad-iframe').contents(); var ifrw = $('#pad-iframe')[0].contentWindow; + var $tree = $iframe.find("#tree"); + var $content = $iframe.find("#content"); + var $driveToolbar = $iframe.find("#driveToolbar"); + var $contextMenu = $iframe.find("#treeContextMenu"); + var $contentContextMenu = $iframe.find("#contentContextMenu"); + var $defaultContextMenu = $iframe.find("#defaultContextMenu"); + var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu"); + var $trashContextMenu = $iframe.find("#trashContextMenu"); + Cryptpad.addLoadingScreen(); var onConnectError = function (info) { Cryptpad.errorLoadingScreen(Messages.websocketError); @@ -127,8 +136,14 @@ define([ var setEditable = function (state) { APP.editable = state; - if (!state) { $iframe.find('[draggable="true"]').attr('draggable', false); } - else { $iframe.find('[draggable="false"]').attr('draggable', true); } + if (!state) { + $content.addClass('readonly'); + $iframe.find('[draggable="true"]').attr('draggable', false); + } + else { + $content.removeClass('readonly'); + $iframe.find('[draggable="false"]').attr('draggable', true); + } }; // Icons @@ -196,16 +211,6 @@ define([ var lastSelectTime; var selectedElement; - var $tree = $iframe.find("#tree"); - var $content = $iframe.find("#content"); - var $driveToolbar = $iframe.find("#driveToolbar"); - var $contextMenu = $iframe.find("#treeContextMenu"); - var $contentContextMenu = $iframe.find("#contentContextMenu"); - var $defaultContextMenu = $iframe.find("#defaultContextMenu"); - var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu"); - var $trashContextMenu = $iframe.find("#trashContextMenu"); - - if (!APP.readOnly) { setEditable(true); } @@ -1288,7 +1293,10 @@ define([ var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside')); var $title = createTitle(path).appendTo($toolbar.find('.rightside')); - createNewButton(isInRoot).appendTo($toolbar.find('.leftside')); + + // NewButton can be undefined if we're in read only mode + $toolbar.find('.leftside').append(createNewButton(isInRoot)); + var $folderHeader = getFolderListHeader(); var $fileHeader = getFileListHeader(true);