diff --git a/www/newdrive/file.less b/www/newdrive/file.less deleted file mode 100644 index 42019501f..000000000 --- a/www/newdrive/file.less +++ /dev/null @@ -1,820 +0,0 @@ -@import "/customize/src/less/variables.less"; -@import "/customize/src/less/mixins.less"; - -@tree-bg: #eee; -@tree-fg: #000; -@tree-lines-col: #888; - -@drive-hover: #eee; -@drive-hover-light: lighten(@drive-hover, 20%); - -@content-bg: #fff; -@content-bg-ro: darken(@content-bg, 10%); -@content-fg: @tree-fg; -@info-box-bg: #d2e1f2; -@info-box-border: #bbb; -@table-header-fg: #555; -@table-header-bg: #e8e8e8; - -@toolbar-bg: #ddd; -@toolbar-fg: #555; -@toolbar-border-col: #ccc; -@toolbar-button-bg: #888; -@toolbar-button-border: #888; -@toolbar-button-bg-hover: #777; -@toolbar-button-fg: #eee; -@toolbar-path-bg: #fff; -@toolbar-path-border: #888; - -@size-mobile: 600px; - -/* PAGE */ - -html, body { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 0; - margin: 0; - position: relative; - font-size: @main-font-size; - overflow: auto; -} - -body { - display: flex; - flex-flow: column; -} -img.icon { - max-width: 20px; - max-height: 16px; -} - -.unselectable { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.app-container { - flex: 1; - overflow: auto; - width: 100%; - display: flex; - flex-flow: row; - @media screen and (max-width: @size-mobile) { - display: block; - #driveToolbar { - .path .element { - display: none; - } - } - #tree { - resize: none; - width: 100%; - max-width: unset; - max-height: unset; - border-bottom: 1px solid @toolbar-border-col; - .category { - margin-top: 0.5em; - } - } - } -} - -.padColor { color: @toolbar-pad-bg; } -.codeColor { color: @toolbar-code-bg; } -.slideColor { color: @toolbar-slide-bg; } -.pollColor { color: @toolbar-poll-bg; } -.fileColor { color: @toolbar-file-bg; } -.whiteboardColor { color: @toolbar-whiteboard-bg; } -.driveColor { color: @toolbar-drive-bg; } -.defaultColor { color: @toolbar-default-bg; } - -div:focus { - outline: none; -} - -.fa { - font-family: FontAwesome; -} - -ul { - list-style: none; - padding-left: 0px; // Remove the default padding -} - -li { - padding: 0px 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.contextMenu { - display: none; - position: absolute; - z-index: 500; - li { - padding: 0; - font-size: @main-font-size; - a { - cursor: pointer; - } - } -} - -.droppable { - background-color: #FE9A2E; - color: #222; -} - -.selected { - background: #666 !important; - color: #eee; - margin: -1px; - .fa-minus-square-o, .fa-plus-square-o { - color: @tree-fg; - } -} - -.selectedTmp { - border: 1px dotted #bbb; - background: #AAA; - color: #ddd; - margin: -1px; - .fa-minus-square-o, .fa-plus-square-o { - color: @tree-fg; - } -} - -span { - &.fa-folder, &.fa-folder-open { - //color: #FEDE8B; - //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; - } -} - -/* TREE */ - - -#tree { - font-size: @main-font-size; - //border-right: 1px solid #ccc; - box-sizing: border-box; - background: @tree-bg; - overflow: auto; - resize: horizontal; - width: auto; - white-space: nowrap; - max-width: 500px; - min-width: 200px; - padding: 0px; - color: @tree-fg; - display: flex; - flex-flow: column; - max-height: 100%; - .categories-container { - flex: 1; - max-width: 500px; - overflow: auto; - } - img.icon { - margin-bottom: 3px; - margin-left: -2px; - } - .docTree { - margin-top: 20px; - //padding: 0 0 0 20px; - padding: 0; - cursor: auto; - &li, li { - padding: 0; - &.collapsed ul { - display: none; - } - input { - width: ~"calc(100% - 30px)"; - padding: 0 10px; - border: 0; - color: lighten(@tree-fg, 40%); - } - & > span.element-row { - overflow: hidden; - text-overflow: ellipsis; - //min-width: ~"calc(100% + 5px)"; - .leftsideCategory(); - width: ~"calc(100% + 5px)"; - margin: 0; - margin-bottom: -6px; - display: inline-block; - cursor: pointer; - margin-left: -5px; - padding-left: 5px; - } - & > span.element-row:not(.selected):not(.active):hover { - //background-color: @drive-hover; - } - } - } - span.element { - cursor: pointer; - } - /*.active { - &:not(.selected):not(.droppable) { - background-color: darken(@drive-hover, 15%); - } - }*/ - .category { - margin: 0; - margin-top: 15px; - .root { - &> .fa { - min-width: 30px; - cursor: pointer; - } - } - li { - padding: 0; - .element-row { - display: block; - padding-left: 20px; - .leftsideCategory(); - margin: 0; - .fa { - width: 25px; - } - } - } - } - .category:last-child { - margin-bottom: 20px; - } - #allfilesTree { - margin-top: 0; - } - .limit-container { - margin-top: 0; - } - #searchContainer { - text-align: center; - padding: 0; - position: relative; - input { - background: lighten(@toolbar-drive-bg, 8%); - color: @toolbar-drive-color; - .placeholderColor(@toolbar-drive-color); - outline-width: 0px; - border-radius: 0; - width: 100%; - //border: 1px solid #ccc; - border: 0; - border-right: 1px solid lighten(@toolbar-drive-bg, 16%); - //border-right: 0; - height: @toolbar-line-height; - padding: 0 5px; - padding-left: 45px; - &:focus { - outline-width: 0px; - } - } - .searchIcon { - color: @toolbar-drive-color; - position: absolute; - left: 20px; // TODO align with drive categories - top: 8px; - } - } - .fa.expcol { - margin-left: -10px; - font-size: 14px; - position: absolute; - left: -20px; - top: 10px; - width: 11px !important; - height: 11px !important; - padding: 0; - margin: 0; - background: white; - z-index: 10; - cursor: default; - &:before { - position:relative; - top: -1px; - } - } - .docTree { - .root > .element-row > .expcol { - position: relative; - top:0; - left: -10px; - } - .root > .element-row > .folder { - margin-left: -5px; - } - .root { - &> .element-row { - padding-left: 20px; - } - &> ul { - padding-left: 30px; - } - } - } - - // Expand/collapse lines - .docTree ul { - margin: 0px 0px 0px 10px; - list-style: none; - padding-left: 10px; - li { - position: relative; - &:before { - position: absolute; - left: -15px; - top: -11px; - content: ''; - display: block; - border-left: 1px solid @tree-lines-col; - height: ~"calc(1em + 11px)"; - border-bottom: 1px solid @tree-lines-col; - width: 15px; - } - &:after { - position: absolute; - left: -15px; - bottom: -7px; - content: ''; - display: block; - border-left: 1px solid @tree-lines-col; - height: 100%; - } - &.root { - margin: 0px 0px 0px -10px; - &:before { - display: none; - } - &:after { - display: none; - } - } - &:last-child:after { - display: none; - } - } - } -} - -/* CONTENT */ -#rightCol { - display: flex; - flex-flow: column; - flex: 1; - // Needed to avoid the folder's path to overflows - // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout - min-width: 0; -} -#content { - box-sizing: border-box; - background: @content-bg; - color: @content-fg; - overflow: auto; - flex: 1; - display: flex; - flex-flow: column; - position: relative; - .selectBox { - display: none; - background-color: rgba(100, 100, 100, 0.7); - position: absolute; - z-index: 50; - } - &.readonly { - background: @content-bg-ro; - } - h1 { - padding-left: 10px; - margin-top: 10px; - } - .info-box { - line-height: 2em; - padding: 0.25em 0.75em; - margin: 1em; - background: @info-box-bg; - span { - cursor: pointer; - float: right; - margin-top: 0.5em; - } - &.noclose { - } - } - li { - cursor: default; - &:not(.header) { - *:not(input) { - /*pointer-events: none;*/ - } - &:hover { - &:not(.selected, .selectedTmp) { - background-color: @drive-hover; - } - .name { - /*text-decoration: underline;*/ - } - } - } - } - #folderContent { - li { - &.searchResult { - border-bottom: 1px solid @info-box-border; - display: block; - &:hover { - background-color: initial; - } - table { - width: 100%; - .label2 { - width: 150px; - font-size: 15px; - text-align: right; - padding-right: 15px; - } - .openDir { - a { - cursor: pointer; - color: #41b7d8; - &:hover { - color: #014c8c; - text-decoration: underline; - } - } - } - .path { - font-style: italic; - direction: rtl; - .element { - display: inline-block; - margin-right: 5px; - } - } - .title { - font-weight: bold; - cursor: pointer; - &:hover { - background-color: @drive-hover; - } - } - .col2 { - width: 250px; - } - td.icon { - width: 50px; - font-size: 40px; - } - } - } - } - } - .element { - .truncated { display: none; } - } - div.grid { - padding: 20px; - .fileIcon; - li { - &.element { - position: relative; - } - input { - width: 100%; - margin-top: 5px; - } - .state { - position: absolute; - top: 3px; - right: 3px; - .fa { - margin:0; - font-size: 18px; - } - } - } - .listElement { - display: none; - } - .addpad { - cursor: pointer; - opacity: 0.5; - padding: 0; - &:hover { - opacity: 0.7; - } - .fa { - cursor: pointer; - font-size: 90px; - margin-top: 5px; - margin-bottom: 0; - } - } - } - - .list { - .grid-element { - display: none; - } - // Make it act as a table! - padding-left: 20px; - ul { - display: table; - width: 100%; - padding: 0px 10px; - } - li { - display: table-row; - &> span { - padding: 0 5px; - display: table-cell; - } - &:not(.header) { - height: @toolbar-line-height; - line-height: @toolbar-line-height; - } - &.header { - cursor: default; - color: @table-header-fg; - span { - &:not(.fa) { - text-align: left; - } - &.sortasc, &.sortdesc { - float: right; - } - } - &> span { - padding: 15px 5px; - &.active { - font-weight: bold; - } - &.clickable { - cursor: pointer; - &:hover { - background: @table-header-bg; - } - } - } - } - } - .element { - span { - overflow: hidden; - white-space: nowrap; - box-sizing: border-box; - &.state { - .fa:not(:last-child) { - margin-right: 5px; - } - } - &.icon, &.state { - width: 30px; - } - &.type, &.atime, &.ctime { - width: 175px; - } - &.title { - width: 250px; - @media screen and (max-width: 1200px) { - display: none; - } - } - &.folders, &.files { - width: 150px; - } - } - } - } -} - -.parentFolder { - cursor: pointer; - margin-left: 10px; - &:hover { - text-decoration: underline; - } -} - -#folderContent { - padding-right: 10px; - flex: 1; -} - -#addPadDialog.cp-modal-container { - .fileIcon; - - li:not(.selected):hover { - border: 1px solid white; - } - .cp-modal { - display: flex; - flex-flow: column; - li, li .fa { - cursor: pointer; - } - &> p { - margin: 50px; - } - &> div { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-content: center; - overflow-y: auto; - .uploadFile { - break-after: always; - page-break-after: always; - } - } - } - - @media screen and (max-height: @browser_media-not-big) { - .cp-modal { - & > p { - display: none; - } - & > div { - align-content: unset; - li { - height: 40px; - width: 90%; - display: flex; - align-items: center; - .fa { - font-size: 32px; - } - .name { - height: auto; - } - } - } - } - } -} - - -/* Toolbar */ - -#driveToolbar { - background: lighten(@toolbar-drive-bg, 8%); - color: @toolbar-drive-color; - //height: 30px; - //display: flex; - //flex-flow: row; - z-index: 100; - box-sizing: border-box; - height: @toolbar-line-height; - padding: 0; - display: flex; - flex-flow: row; - - * { - outline-width: 0; - &:focus { - outline-width: 0; - } - } - - .newPadContainer { - display: inline-block; - height: 100%; - } - - .history { - float: right; - } - - .rightside, .leftside { - display: inline-block; - margin: 0; - padding: 0; - .fa { - margin: 0; - } - button { - height: @toolbar-line-height; - padding: 0 10px; - border: none; - border-radius: 0; - box-sizing: border-box; - background: transparent; - font-size: @main-font-size; - color: @toolbar-drive-color; - transition: all 0.15s; - .drawer { - display: none; - } - .fa, span { - font-size: @main-font-size; - } - &:hover { - background: @toolbar-drive-bg; - } - &.active { - display: none; - } - } - } - .rightside { - float: right; - & > * { - float: right; - } - #contextButtonsContainer { - display: inline-block; - height: 100%; - } - padding-left: 10px; - } - .leftside { - & > span { - height: 100%; - margin: 0; - } - button { - padding: 0 10px; - .fa { - margin-right: 5px; - } - .cp-dropdown-button-title { - display: inline-flex; - height: @toolbar-line-height; - align-items: center; - span:not(.fa) { - line-height: 23px; - } - } - } - } - - button { - font: @toolbar-button-font; - span { - font: @toolbar-button-font; - } - .fa, &.fa { - font-family: FontAwesome; - } - } - /* The container
- needed to position the dropdown content */ - .cp-dropdown-container { - margin: 2px 2px; - line-height: 1em; - position: relative; - display: inline-block; - } - .cp-dropdown-content { - margin-right: 2px; - } - - .path { - flex: 1; - width: 100%; - height: @toolbar-line-height; - line-height: @toolbar-line-height; - cursor: default; - width: auto; - overflow: hidden; - white-space: nowrap; - direction: rtl; - max-width: 100%; - text-align: left; - .element { - display: inline-block; - height: @toolbar-line-height; - line-height: @toolbar-line-height; - font-size: @main-font-size; - padding: 0 5px; - border: 0; - background: darken(@toolbar-drive-bg, 10%); - color: @toolbar-drive-color; - box-sizing: border-box; - transition: all 0.15s; - &.separator { - color: #ccc; - } - &.clickable { - cursor: pointer; - &:hover { - background: darken(@toolbar-drive-bg, 15%); - } - } - } - } -} - - - diff --git a/www/newdrive/inner.js b/www/newdrive/inner.js index 1b6844a4e..887be9994 100644 --- a/www/newdrive/inner.js +++ b/www/newdrive/inner.js @@ -18,7 +18,6 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'less!/bower_components/components-font-awesome/css/font-awesome.min.css', 'less!/customize/src/less2/main.less', - 'less!/newdrive/file.less', ], function ( $, Crypto,