diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 55945ccd2..2427b2a28 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -638,48 +638,45 @@ define([ Pages['/poll/'] = Pages['/poll/index.html'] = function () { return [ - appToolbar(), - h('div#content', [ - h('div#poll', [ - h('div#howItWorks', [ + appToolbar3(), + h('div#cp-app-poll-content', [ + h('div#cp-app-poll-form', [ + h('div#cp-app-poll-help', [ h('h1', 'CryptPoll'), setHTML(h('h2'), Msg.poll_subtitle), h('p', Msg.poll_p_save), h('p', Msg.poll_p_encryption) ]), - h('div.upper', [ - h('button#publish.btn.btn-success', { + h('div.cp-app-poll-upper', [ + h('button#cp-app-poll-action-publish.btn.btn-success', { style: { display: 'none' } }, Msg.poll_publish_button), - h('button#admin.btn.btn-primary', { + h('button#cp-app-poll-action-admin.btn.btn-primary', { style: { display: 'none' }, title: Msg.poll_admin_button }, Msg.poll_admin_button), - h('button#help.btn.btn-secondary', { + h('button#cp-app-poll-action-help.btn.btn-secondary', { title: Msg.poll_show_help_button }, Msg.poll_show_help_button) ]), - h('div.realtime', [ + h('div.cp-app-poll-realtime', [ h('br'), h('center', [ - h('textarea#description', { + h('textarea#cp-app-poll-description', { rows: "5", cols: "50", disabled: true }), h('br') ]), - h('div#tableContainer', [ - h('div#tableScroll'), - h('button#create-user.btn.btn-secondary', { + h('div#cp-app-poll-table-container', [ + h('div#cp-app-poll-table-scroll'), + h('button#cp-app-poll-create-user.btn.btn-secondary', { title: Msg.poll_create_user }, h('span.fa.fa-plus')), - h('button#create-option.btn.btn-secondary', { + h('button#cp-app-poll-create-option.btn.btn-secondary', { title: Msg.poll_create_option }, h('span.fa.fa-plus')), - h('button#commit.btn.btn-secondary', { - title: Msg.poll_commit - }, h('span.fa.fa-check')) ]) ]) ]) diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less index 51450db27..5f7c7e071 100644 --- a/customize.dist/src/less2/main.less +++ b/customize.dist/src/less2/main.less @@ -28,6 +28,6 @@ body.cp-app-code { @import "../../../code/app-code.less"; } body.cp-app-slide { @import "../../../slide/app-slide.less"; } body.cp-app-file { @import "../../../file/app-file.less"; } body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; } -//body.cp-app-poll { @import "../../../poll/app-poll.less"; } +body.cp-app-poll { @import "../../../poll/app-poll.less"; } body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; } diff --git a/www/drive/inner.js b/www/drive/inner.js index f8ed897ed..fdde8d906 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1,6 +1,5 @@ define([ 'jquery', - '/bower_components/chainpad-crypto/crypto.js', '/bower_components/textpatcher/TextPatcher.js', '/common/toolbar3.js', 'json.sortify', @@ -12,7 +11,6 @@ define([ '/common/common-realtime.js', '/common/userObject.js', '/customize/application_config.js', - '/common/mergeDrive.js', '/common/sframe-chainpad-listmap.js', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', @@ -20,7 +18,6 @@ define([ 'less!/customize/src/less2/main.less', ], function ( $, - Crypto, TextPatcher, Toolbar, JSONSortify, @@ -32,7 +29,6 @@ define([ CommonRealtime, FO, AppConfig, - Merge, Listmap) { var Messages = Cryptpad.Messages; diff --git a/www/poll/app-drive.less b/www/poll/app-drive.less new file mode 100644 index 000000000..ea027d76e --- /dev/null +++ b/www/poll/app-drive.less @@ -0,0 +1,820 @@ +@import (once) "../../customize/src/less2/include/browser.less"; +@import (once) "../../customize/src/less2/include/toolbar.less"; +@import (once) "../../customize/src/less2/include/markdown.less"; +@import (once) '../../customize/src/less2/include/fileupload.less'; +@import (once) '../../customize/src/less2/include/alertify.less'; +@import (once) '../../customize/src/less2/include/leftside-menu.less'; +@import (once) "../../customize/src/less2/include/tools.less"; +@import (once) "../../customize/src/less2/include/limit-bar.less"; + +.toolbar_main(); +.fileupload_main(); +.alertify_main(); +.limit-bar_main(); + +@drive_hover: #eee; +@drive_hover-light: lighten(@drive_hover, 20%); +@drive_info-box-bg: #d2e1f2; +@drive_info-box-border: #bbb; +@drive_table-header-fg: #555; +@drive_table-header-bg: #e8e8e8; +@drive_mobile-tree-border-col: #ccc; + +@drive_content-fg: @colortheme_sidebar-right-fg; +@drive_content-bg: @colortheme_sidebar-right-bg; +@drive_content-bg-ro: darken(@drive_content-bg, 10%); + + +/* PAGE */ + +display: flex; +flex-flow: column; +max-height: 100%; +min-height: auto; + +.cp-unselectable { + .tools_unselectable(); +} + +/* local mixins */ +.drive_fileIcon { + li { + display: inline-block; + margin: 10px 10px; + width: 140px; + height: 140px; + text-align: center; + vertical-align: top; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 5px; + padding-bottom: 5px; + + &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { + border: 1px solid #CCC; + } + .cp-app-drive-element-name { + width: 100%; + height: 48px; + margin: 8px 0; + display: inline-block; + //align-items: center; + //justify-content: center; + overflow: hidden; + //text-overflow: ellipsis; + word-wrap: break-word; + } + .cp-app-drive-element-truncated { + display: block; + position: absolute; + bottom: 0px; + left: 0; right: 0; + text-align: center; + } + img.cp-app-drive-content-icon { + height: 48px; + max-height: none; + max-width: none; + margin: 8px 0; + } + .fa { + display: block; + margin: auto; + font-size: 48px; + margin: 8px 0; + text-align: center; + &.listonly { + display: none; + } + } + } +} + +img.cp-app-drive-icon { + max-width: 20px; + max-height: 16px; +} + +.cp-app-drive-container { + flex: 1; + overflow: auto; + width: 100%; + display: flex; + flex-flow: row; + @media screen and (max-width: @browser_media-medium-screen) { + display: block; + #cp-app-drive-toolbar { + .path .element { + display: none; + } + } + #cp-app-drive-tree { + resize: none; + width: 100%; + max-width: unset; + max-height: unset; + border-bottom: 1px solid @drive_mobile-tree-border-col; + .cp-app-drive-tree-category { + margin-top: 0.5em; + } + } + } +} + +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; +} + +.cp-app-drive-context { + display: none; + position: absolute; + z-index: 500; + li { + padding: 0; + font-size: @colortheme_app-font-size; + a { + cursor: pointer; + } + } +} + +.cp-app-drive-element-droppable { + background-color: #FE9A2E; + color: #222; +} + +.cp-app-drive-element-selected { + background: #666 !important; + color: #eee; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @colortheme_sidebar-left-fg; + } +} + +.cp-app-drive-element-selected-tmp { + border: 1px dotted #bbb; + background: #AAA; + color: #ddd; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @colortheme_sidebar-left-fg; + } +} + +span { + &.fa-folder, &.fa-folder-open { + //color: #FEDE8B; + //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; + } +} + +/* TREE */ + + +#cp-app-drive-tree { + font-size: @colortheme_app-font-size; + //border-right: 1px solid #ccc; + box-sizing: border-box; + background: @colortheme_sidebar-left-bg; + overflow: auto; + resize: horizontal; + width: auto; + white-space: nowrap; + max-width: 500px; + min-width: 200px; + padding: 0px; + color: @colortheme_sidebar-left-fg; + display: flex; + flex-flow: column; + max-height: 100%; + .cp-app-drive-tree-categories-container { + flex: 1; + max-width: 500px; + overflow: auto; + } + img.cp-app-drive-icon { + margin-bottom: 3px; + margin-left: -2px; + } + .cp-app-drive-tree-docs { + margin-top: 20px; + //padding: 0 0 0 20px; + padding: 0; + cursor: auto; + &li, li { + padding: 0; + &.cp-app-drive-element-collapsed ul { + display: none; + } + input { + width: ~"calc(100% - 30px)"; + padding: 0 10px; + border: 0; + color: lighten(@colortheme_sidebar-left-fg, 40%); + } + & > span.cp-app-drive-element-row { + overflow: hidden; + text-overflow: ellipsis; + //min-width: ~"calc(100% + 5px)"; + .leftside-menu-category_main(); + width: ~"calc(100% + 5px)"; + margin: 0; + margin-bottom: -6px; + display: inline-block; + cursor: pointer; + margin-left: -5px; + padding-left: 5px; + } + & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover { + } + } + } + span.cp-app-drive-element { + cursor: pointer; + } + .cp-app-drive-tree-category { + margin: 0; + margin-top: 15px; + .cp-app-drive-tree-root { + &> .fa { + min-width: 30px; + cursor: pointer; + } + } + li { + padding: 0; + .cp-app-drive-element-row { + display: block; + padding-left: 20px; + .leftside-menu-category_main(); + margin: 0; + .fa { + width: 25px; + } + } + } + } + .cp-app-drive-tree-category:last-child { + margin-bottom: 20px; + } + .limit-container { + margin-top: 0; + } + #cp-app-drive-tree-search { + text-align: center; + padding: 0; + position: relative; + input { + background: lighten(@colortheme_drive-bg, 8%); + color: @colortheme_drive-color; + .tools_placeholder-color(@colortheme_drive-color); + outline-width: 0px; + border-radius: 0; + width: 100%; + //border: 1px solid #ccc; + border: 0; + border-right: 1px solid lighten(@colortheme_drive-bg, 16%); + //border-right: 0; + height: @variables_bar-height; + padding: 0 5px; + padding-left: 45px; + &:focus { + outline-width: 0px; + } + } + .cp-app-drive-tree-search-con { + color: @colortheme_drive-color; + position: absolute; + left: 20px; // TODO align with drive categories + top: 8px; + } + } + .fa.cp-app-drive-icon-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; + } + } + .cp-app-drive-tree-docs { + .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { + position: relative; + top:0; + left: -10px; + } + .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { + margin-left: -5px; + } + .cp-app-drive-tree-root { + &> .cp-app-drive-element-row { + padding-left: 20px; + } + &> ul { + padding-left: 30px; + } + } + } + + // Expand/collapse lines + .cp-app-drive-tree-docs 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 @colortheme_sidebar-left-branch; + height: ~"calc(1em + 11px)"; + border-bottom: 1px solid @colortheme_sidebar-left-branch; + width: 15px; + } + &:after { + position: absolute; + left: -15px; + bottom: -7px; + content: ''; + display: block; + border-left: 1px solid @colortheme_sidebar-left-branch; + height: 100%; + } + &.cp-app-drive-tree-root { + margin: 0px 0px 0px -10px; + &:before { + display: none; + } + &:after { + display: none; + } + } + &:last-child:after { + display: none; + } + } + } +} + +/* CONTENT */ +#cp-app-drive-content-container { + 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; +} +#cp-app-drive-content { + box-sizing: border-box; + background: @drive_content-bg; + color: @drive_content-fg; + overflow: auto; + flex: 1; + display: flex; + flex-flow: column; + position: relative; + .cp-app-drive-content-select-box { + display: none; + background-color: rgba(100, 100, 100, 0.7); + position: absolute; + z-index: 50; + } + &.cp-app-drive-readonly { + background: @drive_content-bg-ro; + } + h1 { + padding-left: 10px; + margin-top: 10px; + } + .cp-app-drive-content-info-box { + line-height: 2em; + padding: 0.25em 0.75em; + margin: 1em; + background: @drive_info-box-bg; + span { + cursor: pointer; + float: right; + margin-top: 0.5em; + } + } + li { + cursor: default; + &:not(.cp-app-drive-element-header) { + &:hover { + &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { + background-color: @drive_hover; + } + } + } + } + #cp-app-drive-content-folder { + li { + &.cp-app-drive-search-result { + border-bottom: 1px solid @drive_info-box-border; + display: block; + &:hover { + background-color: initial; + } + table { + width: 100%; + .cp-app-drive-search-label2 { + width: 150px; + font-size: 15px; + text-align: right; + padding-right: 15px; + } + .cp-app-drive-search-opendir { + a { + cursor: pointer; + color: #41b7d8; + &:hover { + color: #014c8c; + text-decoration: underline; + } + } + } + .cp-app-drive-search-path { + font-style: italic; + direction: rtl; + .cp-app-drive-path-element { + display: inline-block; + margin-right: 5px; + } + } + .cp-app-drive-search-title { + font-weight: bold; + cursor: pointer; + &:hover { + background-color: @drive_hover; + } + } + .cp-app-drive-search-col2 { + width: 250px; + } + td.cp-app-drive-search-icon { + width: 50px; + font-size: 40px; + } + } + } + } + } + .cp-app-drive-element { + .cp-app-drive-element-truncated { display: none; } + } + div.cp-app-drive-content-grid { + padding: 20px; + .drive_fileIcon; + li { + &.cp-app-drive-element { + position: relative; + } + input { + width: 100%; + margin-top: 5px; + } + .cp-app-drive-element-state { + position: absolute; + top: 3px; + right: 3px; + .fa { + margin:0; + font-size: 18px; + } + } + } + .cp-app-drive-element-list { + display: none; + } + .cp-app-drive-new-ghost { + cursor: pointer; + opacity: 0.5; + padding: 0; + &:hover { + opacity: 0.7; + } + .fa { + cursor: pointer; + font-size: 90px; + margin-top: 5px; + margin-bottom: 0; + } + } + } + + .cp-app-drive-content-list { + .cp-app-drive-element-grid { + 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(.cp-app-drive-element-header) { + height: @variables_bar-height; + line-height: @variables_bar-height; + } + &.cp-app-drive-element-header { + cursor: default; + color: @drive_table-header-fg; + span { + &:not(.fa) { + text-align: left; + } + &.sortasc, &.sortdesc { + float: right; + } + } + &> span { + padding: 15px 5px; + &.cp-app-drive-sort-active { + font-weight: bold; + } + &.cp-app-drive-sort-clickable { + cursor: pointer; + &:hover { + background: @drive_table-header-bg; + } + } + } + } + } + .cp-app-drive-element { + span { + overflow: hidden; + white-space: nowrap; + box-sizing: border-box; + &.cp-app-drive-element-state { + .fa:not(:last-child) { + margin-right: 5px; + } + } + &.cp-app-drive-content-icon, &.cp-app-drive-element-state { + width: 30px; + } + &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime { + width: 175px; + } + &.cp-app-drive-element-title { + width: 250px; + @media screen and (max-width: 1200px) { + display: none; + } + } + &.cp-app-drive-element-folders, &.cp-app-drive-element-files { + width: 150px; + } + } + } + } +} + +#cp-app-drive-content-folder { + padding-right: 10px; + flex: 1; +} + +#cp-app-drive-new-ghost-dialog.cp-modal-container { + .drive_fileIcon; + + li:not(.cp-app-drive-element-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; + .cp-app-drive-new-upload { + 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; + } + .cp-app-drive-new-name { + height: auto; + } + } + } + } + } +} + + +/* Toolbar */ + +#cp-app-drive-toolbar { + background: lighten(@colortheme_drive-bg, 8%); + color: @colortheme_drive-color; + //height: 30px; + //display: flex; + //flex-flow: row; + z-index: 100; + box-sizing: border-box; + height: @variables_bar-height; + padding: 0; + display: flex; + flex-flow: row; + + * { + outline-width: 0; + &:focus { + outline-width: 0; + } + } + + .history { + float: right; + .cp-toolbar-drawer-element { + display: none; + } + } + + .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside { + display: inline-block; + margin: 0; + padding: 0; + .fa { + margin: 0; + } + button { + height: @variables_bar-height; + padding: 0 10px; + border: none; + border-radius: 0; + box-sizing: border-box; + background: transparent; + font-size: @colortheme_app-font-size; + color: @colortheme_drive-color; + transition: all 0.15s; + .drawer { + display: none; + } + .fa, span { + font-size: @colortheme_app-font-size; + } + &:hover { + background: @colortheme_drive-bg; + } + &.cp-app-drive-toolbar-active { + display: none; + } + } + } + .cp-app-drive-toolbar-rightside { + float: right; + & > * { + float: right; + } + #cp-app-drive-toolbar-contextbuttons { + display: inline-block; + height: 100%; + } + padding-left: 10px; + } + .cp-app-drive-toolbar-leftside { + & > span { + height: 100%; + margin: 0; + } + button { + padding: 0 10px; + .fa { + margin-right: 5px; + } + .cp-dropdown-button-title { + display: inline-flex; + height: @variables_bar-height; + align-items: center; + span:not(.fa) { + line-height: 23px; + } + } + } + } + + button { + font: @colortheme_app-font; + span { + font: @colortheme_app-font; + } + .fa, &.fa { + font-family: FontAwesome; + } + } + /* The container