vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

fix: updated code to make workspace responsive

Browse source
This commit is contained in:
Shariq Ansari 2022-01-24 10:49:41 +05:30
parent 178ec8e687
commit 4c994aeca2
9 changed files with 87 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frappe/desk/desktop.py
View file

@ -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:

132
frappe/public/js/frappe/views/workspace/blocks/block.js
View file

@ -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) {

2
frappe/public/js/frappe/views/workspace/blocks/header.js
View file

@ -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() {

2
frappe/public/js/frappe/views/workspace/blocks/index.js
View file

@ -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,
};

2
frappe/public/js/frappe/views/workspace/blocks/onboarding.js
View file

@ -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) {

2
frappe/public/js/frappe/views/workspace/blocks/paragraph.js
View file

@ -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) {

123
frappe/public/js/frappe/views/workspace/blocks/spacing_tune.js
View file

@ -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 = `<svg version="1.1" height="10" x="0px" y="0px" viewBox="-674 380 17 10" style="enable-background:new -674 380 17 10;" xml:space="preserve"><path d="M-674,383.9h3.6l-1.7-1.7c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.1-0.4,1.6,0l3.2,3.2c0.6,0.2,0.8,0.8,0.6,1.4 c-0.1,0.1-0.1,0.3-0.2,0.4l-3.8,3.8c-0.4,0.4-1.1,0.4-1.5,0c-0.4-0.4-0.4-1.1,0-1.5l1.8-1.8h-3.6V383.9z"/><path d="M-657,386.1h-3.6l1.7,1.7c0.4,0.4,0.4,1.2,0,1.6c-0.4,0.4-1.1,0.4-1.6,0l-3.2-3.2c-0.6-0.2-0.8-0.8-0.6-1.4 c0.1-0.1,0.1-0.3,0.2-0.4l3.8-3.8c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-1.8,1.8h3.6V386.1z"/></svg>`;
this.api.tooltip.onHover(decreaseWidthButton, 'Shrink', {
placement: 'top',
hidingDelay: 500,
});
this.api.listeners.on(
decreaseWidthButton,
'click',
() => me.decreaseWidth(),
false
);
increaseWidthButton.innerHTML = `<svg width="17" height="10" viewBox="0 0 17 10"><path d="M13.568 5.925H4.056l1.703 1.703a1.125 1.125 0 0 1-1.59 1.591L.962 6.014A1.069 1.069 0 0 1 .588 4.26L4.38.469a1.069 1.069 0 0 1 1.512 1.511L4.084 3.787h9.606l-1.85-1.85a1.069 1.069 0 1 1 1.512-1.51l3.792 3.791a1.069 1.069 0 0 1-.475 1.788L13.514 9.16a1.125 1.125 0 0 1-1.59-1.591l1.644-1.644z"/></svg>`;
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);
}
}
}
}

16
frappe/public/js/frappe/views/workspace/workspace.js
View file

@ -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 = $(`

61
frappe/public/scss/desk/desktop.scss
View file

@ -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 {