diff --git a/frappe/desk/desktop.py b/frappe/desk/desktop.py index 49ca04abd4..d9e02b90e5 100644 --- a/frappe/desk/desktop.py +++ b/frappe/desk/desktop.py @@ -386,7 +386,7 @@ def get_workspace_sidebar_items(): for page in all_pages: try: workspace = Workspace(page, True) - if workspace.is_permitted() and workspace.is_page_allowed() or has_access: + if has_access or (workspace.is_permitted() and workspace.is_page_allowed()): if page.public: pages.append(page) elif page.for_user == frappe.session.user: diff --git a/frappe/public/js/frappe/views/workspace/blocks/block.js b/frappe/public/js/frappe/views/workspace/blocks/block.js index 23cb9dcb99..0777a3384b 100644 --- a/frappe/public/js/frappe/views/workspace/blocks/block.js +++ b/frappe/public/js/frappe/views/workspace/blocks/block.js @@ -31,7 +31,7 @@ export default class Block { rendered() { !this.readOnly && this.resizer(); var e = this.wrapper.closest('.ce-block'); - e.classList.add("col-" + this.get_col()); + this.set_col_class(e, this.get_col()); } resizer(wrapper) { @@ -224,108 +224,100 @@ export default class Block { }); } - add_tune_button() { - let $widget_control = $(this.wrapper).find('.widget-control'); - frappe.utils.add_custom_button( - frappe.utils.icon('dot-horizontal', 'xs'), - (event) => { - let evn = event; - !$('.ce-settings.ce-settings--opened').length && - setTimeout(() => { - this.api.toolbar.toggleBlockSettings(); - var position = $(evn.target).offset(); - $('.ce-settings.ce-settings--opened').offset({ - top: position.top + 25, - left: position.left - 77 - }); - }, 50); - }, - "tune-btn", - `${__('Tune')}`, - null, - $widget_control, - true - ); - } - get_col() { let col = this.col || 12; - let class_name = "col-12"; + let class_name = "col-xs-12"; let wrapper = this.wrapper.closest('.ce-block'); const col_class = new RegExp(/\bcol-.+?\b/, "g"); if (wrapper && wrapper.className.match(col_class)) { wrapper.classList.forEach(function (cn) { - cn.match(col_class) && (class_name = cn); + if (cn.match(col_class)) { + class_name = cn; + } }); let parts = class_name.split("-"); - col = parseInt(parts[1]); + col = parseInt(parts[2]); } return col; } decrease_width() { + this.update_width('decrease'); + } + + increase_width() { + this.update_width('increase'); + } + + update_width(action) { let min_width = this.options && this.options.min_width || 3; - const currentBlockIndex = this.api.blocks.getCurrentBlockIndex(); - - if (currentBlockIndex < 0) { + const current_block_index = this.api.blocks.getCurrentBlockIndex(); + if (current_block_index < 0) { return; } - let currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex); - if (!currentBlock) { + let current_block = this.api.blocks.getBlockByIndex(current_block_index); + if (!current_block) { return; } - let currentBlockElement = currentBlock.holder; + const current_block_element = current_block.holder; - let className = 'col-12'; - let colClass = new RegExp(/\bcol-.+?\b/, 'g'); - if (currentBlockElement.className.match(colClass)) { - currentBlockElement.classList.forEach( cn => { + let className = 'col-xs-12'; + const colClass = new RegExp(/\bcol-.+?\b/, 'g'); + if (current_block_element.className.match(colClass)) { + current_block_element.classList.forEach( cn => { if (cn.match(colClass)) { className = cn; } }); let parts = className.split('-'); - let width = parseInt(parts[1]); - if (width > min_width) { - currentBlockElement.classList.remove('col-'+width); + let width = parseInt(parts[2]); + + let condition = true; + + if (action == 'increase') { + condition = width <= 11; + width = width + 1; + } else if (action == 'decrease') { + condition = width > min_width; width = width - 1; - currentBlockElement.classList.add('col-'+width); + } + + if (condition) { + this.set_col_class(current_block_element, width); } } } - increase_width() { - const currentBlockIndex = this.api.blocks.getCurrentBlockIndex(); + set_col_class(node, width) { + let classes = $.grep(node.classList, function (item) { + return item.indexOf("col-") !== 0; + }); - if (currentBlockIndex < 0) { - return; - } - - const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex); - if (!currentBlock) { - return; - } - - const currentBlockElement = currentBlock.holder; - - let className = 'col-12'; - const colClass = new RegExp(/\bcol-.+?\b/, 'g'); - if (currentBlockElement.className.match(colClass)) { - currentBlockElement.classList.forEach( cn => { - if (cn.match(colClass)) { - className = cn; - } - }); - let parts = className.split('-'); - let width = parseInt(parts[1]); - if (width <= 11) { - currentBlockElement.classList.remove('col-'+width); - width = width + 1; - currentBlockElement.classList.add('col-'+width); - } + node.classList = ''; + + classes.forEach(cl => { + node.classList.add(cl); + }); + + let col = 'col-xs-12'; + if (width <= 12 && width >= 7) { + col = 'col-xs-' + width; + } else if (width == 6 || width == 5) { + node.classList.add('col-xs-12'); + col = 'col-sm-' + width; + } else if (width == 4) { + node.classList.add('col-xs-12'); + node.classList.add('col-sm-6'); + col = 'col-md-' + width; + } else if (width == 3) { + node.classList.add('col-xs-12'); + node.classList.add('col-sm-6'); + node.classList.add('col-md-4'); + col = 'col-lg-' + width; } + node.classList.add(col); } move_block(direction) { diff --git a/frappe/public/js/frappe/views/workspace/blocks/header.js b/frappe/public/js/frappe/views/workspace/blocks/header.js index d47b1f5cff..e39c9ce2d3 100644 --- a/frappe/public/js/frappe/views/workspace/blocks/header.js +++ b/frappe/public/js/frappe/views/workspace/blocks/header.js @@ -77,7 +77,7 @@ export default class Header extends Block { rendered() { !this.readOnly && this.resizer(this._element); var e = this._element.closest('.ce-block'); - e.classList.add("col-" + this.get_col()); + this.set_col_class(e, this.get_col()); } static get sanitize() { diff --git a/frappe/public/js/frappe/views/workspace/blocks/index.js b/frappe/public/js/frappe/views/workspace/blocks/index.js index e484cc72e3..5fac17bd02 100644 --- a/frappe/public/js/frappe/views/workspace/blocks/index.js +++ b/frappe/public/js/frappe/views/workspace/blocks/index.js @@ -8,7 +8,6 @@ import Spacer from "./spacer"; import Onboarding from "./onboarding"; // import tunes -import SpacingTune from "./spacing_tune"; import HeaderSize from "./header_size"; frappe.provide("frappe.workspace_block"); @@ -24,6 +23,5 @@ frappe.workspace_block.blocks = { }; frappe.workspace_block.tunes = { - spacing_tune: SpacingTune, header_size: HeaderSize, }; \ No newline at end of file diff --git a/frappe/public/js/frappe/views/workspace/blocks/onboarding.js b/frappe/public/js/frappe/views/workspace/blocks/onboarding.js index 6ea427df77..92780619ef 100644 --- a/frappe/public/js/frappe/views/workspace/blocks/onboarding.js +++ b/frappe/public/js/frappe/views/workspace/blocks/onboarding.js @@ -31,7 +31,7 @@ export default class Onboarding extends Block { if (this.readOnly && !$(this.wrapper).find('.onboarding-widget-box').is(':visible')) { $(e).hide(); } - e.classList.add("col-" + this.get_col()); + this.set_col_class(e, this.get_col()); } new(block, widget_type = block) { diff --git a/frappe/public/js/frappe/views/workspace/blocks/paragraph.js b/frappe/public/js/frappe/views/workspace/blocks/paragraph.js index 1f0b131947..cf2bf43e83 100644 --- a/frappe/public/js/frappe/views/workspace/blocks/paragraph.js +++ b/frappe/public/js/frappe/views/workspace/blocks/paragraph.js @@ -158,7 +158,7 @@ export default class Paragraph extends Block { rendered() { !this.readOnly && this.resizer(this._element); var e = this._element.closest('.ce-block'); - e.classList.add("col-" + this.get_col()); + this.set_col_class(e, this.get_col()); } onPaste(event) { diff --git a/frappe/public/js/frappe/views/workspace/blocks/spacing_tune.js b/frappe/public/js/frappe/views/workspace/blocks/spacing_tune.js deleted file mode 100644 index 365f7f590e..0000000000 --- a/frappe/public/js/frappe/views/workspace/blocks/spacing_tune.js +++ /dev/null @@ -1,123 +0,0 @@ -export default class SpacingTune { - static get isTune() { - return true; - } - - constructor({api, settings}) { - this.api = api; - this.settings = settings; - this.CSS = { - button: 'ce-settings__button', - wrapper: 'ce-tune-layout', - sidebar: 'cdx-settings-sidebar', - animation: 'wobble', - }; - this.data = { colWidth: 12 }; - this.wrapper = undefined; - this.sidebar = undefined; - } - - render() { - let me = this; - let layoutWrapper = document.createElement('div'); - layoutWrapper.classList.add(this.CSS.wrapper); - let decreaseWidthButton = document.createElement('div'); - decreaseWidthButton.classList.add(this.CSS.button, 'ce-shrink-button'); - let increaseWidthButton = document.createElement('div'); - increaseWidthButton.classList.add(this.CSS.button, 'ce-expand-button'); - - layoutWrapper.appendChild(decreaseWidthButton); - layoutWrapper.appendChild(increaseWidthButton); - - decreaseWidthButton.innerHTML = ``; - this.api.tooltip.onHover(decreaseWidthButton, 'Shrink', { - placement: 'top', - hidingDelay: 500, - }); - this.api.listeners.on( - decreaseWidthButton, - 'click', - () => me.decreaseWidth(), - false - ); - - increaseWidthButton.innerHTML = ``; - this.api.tooltip.onHover(increaseWidthButton, 'Expand', { - placement: 'top', - hidingDelay: 500, - }); - this.api.listeners.on( - increaseWidthButton, - 'click', - () => me.increaseWidth(), - false - ); - - this.wrapper = layoutWrapper; - return layoutWrapper; - } - - decreaseWidth() { - const currentBlockIndex = this.api.blocks.getCurrentBlockIndex(); - - if (currentBlockIndex < 0) { - return; - } - - let currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex); - if (!currentBlock) { - return; - } - - let currentBlockElement = currentBlock.holder; - - let className = 'col-12'; - let colClass = new RegExp(/\bcol-.+?\b/, 'g'); - if (currentBlockElement.className.match(colClass)) { - currentBlockElement.classList.forEach( cn => { - if (cn.match(colClass)) { - className = cn; - } - }); - let parts = className.split('-'); - let width = parseInt(parts[1]); - if (width >= 4) { - currentBlockElement.classList.remove('col-'+width); - width = width - 1; - currentBlockElement.classList.add('col-'+width); - } - } - } - - increaseWidth() { - const currentBlockIndex = this.api.blocks.getCurrentBlockIndex(); - - if (currentBlockIndex < 0) { - return; - } - - const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex); - if (!currentBlock) { - return; - } - - const currentBlockElement = currentBlock.holder; - - let className = 'col-12'; - const colClass = new RegExp(/\bcol-.+?\b/, 'g'); - if (currentBlockElement.className.match(colClass)) { - currentBlockElement.classList.forEach( cn => { - if (cn.match(colClass)) { - className = cn; - } - }); - let parts = className.split('-'); - let width = parseInt(parts[1]); - if (width <= 11) { - currentBlockElement.classList.remove('col-'+width); - width = width + 1; - currentBlockElement.classList.add('col-'+width); - } - } - } -} \ No newline at end of file diff --git a/frappe/public/js/frappe/views/workspace/workspace.js b/frappe/public/js/frappe/views/workspace/workspace.js index 13101973b3..e28225904d 100644 --- a/frappe/public/js/frappe/views/workspace/workspace.js +++ b/frappe/public/js/frappe/views/workspace/workspace.js @@ -646,12 +646,6 @@ frappe.views.Workspace = class Workspace { icon: frappe.utils.icon('edit', 'sm'), action: () => this.edit_page(item) }, - { - label: 'Delete', - title: 'Delete Workspace', - icon: frappe.utils.icon('delete-active', 'sm'), - action: () => this.delete_page(item) - }, { label: 'Duplicate', title: 'Duplicate Workspace', @@ -659,11 +653,11 @@ frappe.views.Workspace = class Workspace { action: () => this.duplicate_page(item) }, { - label: 'Settings', - title: 'Settings', - icon: frappe.utils.icon('setting-gear', 'sm'), - action: () => frappe.set_route(`workspace/${item.name}`) - }, + label: 'Delete', + title: 'Delete Workspace', + icon: frappe.utils.icon('delete-active', 'sm'), + action: () => this.delete_page(item) + } ]; let $button = $(` diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss index b90ea5553d..a124ce18d8 100644 --- a/frappe/public/scss/desk/desktop.scss +++ b/frappe/public/scss/desk/desktop.scss @@ -521,7 +521,7 @@ body { } } - @media (max-width: map-get($grid-breakpoints, "sm")) { + @media (max-width: map-get($grid-breakpoints, "md")) { .widget-body { flex-direction: column; .onboarding-steps-wrapper { @@ -840,8 +840,6 @@ body { } .layout-main-section { - background-color: var(--fg-color); - border-radius: var(--border-radius-lg); padding: var(--padding-md); margin-bottom: var(--margin-sm); } @@ -852,6 +850,20 @@ body { } } + @media (max-width: map-get($grid-breakpoints, "sm")) { + .ce-block.col-xs-12 { + .divider { + border-right: none; + } + } + } + + .layout-main-section { + background-color: var(--fg-color); + padding: var(--padding-sm); + border-radius: var(--border-radius-lg); + } + .block-menu-item-icon svg{ width: 18px; height: 18px; @@ -954,7 +966,7 @@ body { margin: 0px -7px; padding-bottom: 20px !important; - .ce-block{ + .ce-block { width: 100%; padding-left: 0; padding-right: 0; @@ -1252,47 +1264,6 @@ body { } } - @media (max-width: 1199px) { - .ce-block.col-4 { - flex: 0 0 50%; - max-width: 50%; - } - } - - @media (max-width: 995px) { - .ce-block.col-3 { - flex: 0 0 100%; - max-width: 33.33%; - } - } - - @media (max-width: 750px) { - .ce-block.col-3 { - flex: 0 0 50%; - max-width: 50%; - } - } - - @media (max-width: 550px) { - .ce-block.col-3 { - flex: 0 0 100%; - max-width: 100%; - } - } - - @media (max-width: 750px) { - .ce-block.col-4 { - flex: 0 0 100%; - max-width: 100%; - } - } - @media (max-width: 750px) { - .ce-block.col-6 { - flex: 0 0 100%; - max-width: 100%; - } - } - } .cdx-marker {