fix: Miscellaneous changes

frappe/public/js/frappe/views/wiki.js

@@ -15,6 +15,37 @@ frappe.views.Wiki = class Wiki {
 		this.new_page = null;
 		this.prepare_container();
 		this.setup_wiki_pages();
+
+		this.tools = {
+			header: {
+				class: frappe.wiki_block.blocks['header'],
+				inlineToolbar: true
+			},
+			paragraph: {
+				class: frappe.wiki_block.blocks['paragraph'],
+				inlineToolbar: true
+			},
+			chart: {
+				class: frappe.wiki_block.blocks['chart'],
+				config: {
+					page_data: this.page_data || []
+				}
+			},
+			card: {
+				class: frappe.wiki_block.blocks['card'],
+				config: {
+					page_data: this.page_data || []
+				}
+			},
+			shortcut: {
+				class: frappe.wiki_block.blocks['shortcut'],
+				config: {
+					page_data: this.page_data || []
+				}
+			},
+			spacer: frappe.wiki_block.blocks['spacer'],
+			spacingTune: frappe.wiki_block.tunes['spacing_tune'],
+		};
 	}
 
 	prepare_container() {
@@ -99,6 +130,11 @@ frappe.views.Wiki = class Wiki {
 			};
 	
 			const make_sidebar_child_item = item => {
+
+				if (frappe.router.slug(item.name) == this.get_page_to_show() || item.name == this.new_page) {
+					child_item_section.classList.toggle("hidden");
+				}
+
 				let $child_item = get_child_item(item);
 				let sidebar_control = $child_item.find('.sidebar-item-control');
 				this.add_sidebar_actions(item, sidebar_control);
@@ -146,36 +182,6 @@ frappe.views.Wiki = class Wiki {
 		this.get_content(page).then(() => {
 			this.get_data(page).then(() => {
 				if (this.content) {
-					this.tools = {
-						header: {
-							class: frappe.wiki_block.blocks['header'],
-							inlineToolbar: true
-						},
-						paragraph: {
-							class: frappe.wiki_block.blocks['paragraph'],
-							inlineToolbar: true
-						},
-						chart: {
-							class: frappe.wiki_block.blocks['chart'],
-							config: {
-								page_data: this.page_data || []
-							}
-						},
-						card: {
-							class: frappe.wiki_block.blocks['card'],
-							config: {
-								page_data: this.page_data || []
-							}
-						},
-						shortcut: {
-							class: frappe.wiki_block.blocks['shortcut'],
-							config: {
-								page_data: this.page_data || []
-							}
-						},
-						spacer: frappe.wiki_block.blocks['spacer'],
-						spacingTune: frappe.wiki_block.tunes['spacing_tune'],
-					};
 					if (this.editor) {
 						this.editor.isReady.then(() => {
 							this.editor.configuration.tools.chart.config.page_data = this.page_data;
@@ -258,6 +264,7 @@ frappe.views.Wiki = class Wiki {
 	}
 
 	setup_actions() {
+		if (!this.isReadOnly) return;
 		this.page.clear_inner_toolbar();
 		this.page.set_secondary_action(
 			__("Customize"),

frappe/public/js/frappe/wiki_blocks/card.js

@@ -44,7 +44,7 @@ export default class Card {
 		if (!this.readOnly) {
 			let $widget_control = $(this.wrapper).find('.widget-control');
 			this.add_custom_button(
-				frappe.utils.icon('dot-vertical', 'xs'),
+				frappe.utils.icon('dot-horizontal', 'xs'),
 				(event) => {
 					let evn = event;
 					!$('.ce-settings.ce-settings--opened').length &&
@@ -55,7 +55,7 @@ export default class Card {
 							top: position.top + 25,
 							left: position.left - 77
 						});
-					}, 50)
+					}, 50);
 				},
 				"tune-btn",
 				`${__('Tune')}`,

frappe/public/js/frappe/wiki_blocks/chart.js

@@ -44,7 +44,7 @@ export default class Chart {
 		if (!this.readOnly) {
 			let $widget_control = $(this.wrapper).find('.widget-control');
 			this.add_custom_button(
-				frappe.utils.icon('dot-vertical', 'xs'),
+				frappe.utils.icon('dot-horizontal', 'xs'),
 				(event) => {
 					let evn = event;
 					!$('.ce-settings.ce-settings--opened').length &&
@@ -55,7 +55,7 @@ export default class Chart {
 							top: position.top + 25,
 							left: position.left - 77
 						});
-					}, 50)
+					}, 50);
 				},
 				"tune-btn",
 				`${__('Tune')}`,

frappe/public/js/frappe/wiki_blocks/header.js

@@ -56,7 +56,7 @@ export default class Header {
 			this.wrapper.classList.add('widget', 'header');
 
 			this.add_custom_button(
-				frappe.utils.icon('dot-vertical', 'xs'),
+				frappe.utils.icon('dot-horizontal', 'xs'),
 				(event) => {
 					let evn = event;
 					!$('.ce-settings.ce-settings--opened').length &&
@@ -67,7 +67,7 @@ export default class Header {
 							top: position.top + 25,
 							left: position.left - 77
 						});
-					}, 50)
+					}, 50);
 				},
 				"tune-btn",
 				`${__('Tune')}`,

frappe/public/js/frappe/wiki_blocks/paragraph.js

@@ -69,7 +69,7 @@ export default class Paragraph {
 			this.wrapper.classList.add('widget');
 
 			this.add_custom_button(
-				frappe.utils.icon('dot-vertical', 'xs'),
+				frappe.utils.icon('dot-horizontal', 'xs'),
 				(event) => {
 					let evn = event;
 					!$('.ce-settings.ce-settings--opened').length &&
@@ -80,7 +80,7 @@ export default class Paragraph {
 							top: position.top + 25,
 							left: position.left - 77
 						});
-					}, 50)
+					}, 50);
 				},
 				"tune-btn",
 				`${__('Tune')}`,

frappe/public/js/frappe/wiki_blocks/shortcut.js

@@ -43,7 +43,7 @@ export default class Shortcut {
 		if (!this.readOnly) {
 			let $widget_control = $(this.wrapper).find('.widget-control');
 			this.add_custom_button(
-				frappe.utils.icon('dot-vertical', 'xs'),
+				frappe.utils.icon('dot-horizontal', 'xs'),
 				(event) => {
 					let evn = event;
 					!$('.ce-settings.ce-settings--opened').length &&
@@ -54,7 +54,7 @@ export default class Shortcut {
 							top: position.top + 25,
 							left: position.left - 77
 						});
-					}, 50)
+					}, 50);
 				},
 				"tune-btn",
 				`${__('Tune')}`,

frappe/public/js/frappe/wiki_blocks/spacer.js

@@ -40,7 +40,7 @@ export default class Spacer {
 			let $widget_control = $spacer.find('.widget-control');
 
 			this.add_custom_button(
-				frappe.utils.icon('dot-vertical', 'xs'),
+				frappe.utils.icon('dot-horizontal', 'xs'),
 				(event) => {
 					let evn = event;
 					!$('.ce-settings.ce-settings--opened').length &&
@@ -51,7 +51,7 @@ export default class Spacer {
 							top: position.top + 25,
 							left: position.left - 77
 						});
-					}, 50)
+					}, 50);
 				},
 				"tune-btn",
 				`${__('Tune')}`,

frappe/public/scss/desk/wiki.scss

@@ -36,6 +36,16 @@
 				margin-right: 0;
 			}
 		}
+
+		.sidebar-item-label {
+			flex: 1;
+		}
+
+		.item-anchor {
+			display: flex;
+			overflow: hidden;
+			flex: 1;
+		}
 	}
 
 	.sidebar-child-item-container {
@@ -46,16 +56,6 @@
 		}
 	}
 
-	.sidebar-item-label {
-		flex: 1;
-	}
-
-	.item-anchor {
-		display: flex;
-		overflow: hidden;
-		flex: 1;
-	}
-
 	.standard-sidebar-section.show-control {
 		.desk-sidebar-item.standard-sidebar-item {
 			&:hover {
@@ -81,65 +81,86 @@
 	}
 }
 
-.ce-settings {
-	width: fit-content;
-}
-
-.tune-btn > * {
-	pointer-events: none;
-}
-
-.ce-toolbar__settings-btn {
-	display: none;
-}
-
-.ce-header {
-	padding: 0 !important;
-	margin-bottom: 0 !important;
-	flex: 1;
-}
+.codex-editor {
+	min-height: 630px;
 
-.widget{
-	&.header {
+	.codex-editor__redactor{
 		display: flex;
-		justify-content: center;
-		flex: 1;
-		padding-left: 15px !important;
-		padding-right: 15px !important;
-		min-height: 50px;
-		box-shadow: none;
-		background-color: var(--control-bg);
-		color: var(--text-muted);
-	}
-
-	&:focus {
-		outline: none;
-	}
+		flex-wrap: wrap;
+		flex-direction: row;
+		margin: 0px -7px;
+		padding-bottom: 20px !important;
 	
-	&.new-widget {
-		align-items: inherit;
-	}
+		.ce-block{
+			width: 100%;
+			padding-left: 0;
+			padding-right: 0;
+
+			&.ce-block--selected {
+				.ce-block__content {
+					background-color: inherit;
+				}
+			}
+		
+			.ce-block__content {
+				max-width: 100%;
+				height: 100%;
+				padding: 7px;
+			
+				&> div {
+					height: 100%;
+				}
 
-	.paragraph-control {
-		display: flex;
-		flex-direction: row-reverse;
-		position: absolute;
-		right: 20px;
-		gap: 5px;
-		background-color: var(--card-bg);
-		padding-left: 5px;
+				.tune-btn > * {
+					pointer-events: none;
+				}
 
-		.drag-handle {
-			cursor: all-scroll;
-			cursor: -webkit-grabbing;
+				.ce-header {
+					padding: 0 !important;
+					margin-bottom: 0 !important;
+					flex: 1;
+				}
+
+				.widget{
+					&.header {
+						display: flex;
+						justify-content: center;
+						flex: 1;
+						padding-left: 15px !important;
+						padding-right: 15px !important;
+						min-height: 50px;
+						box-shadow: none;
+						background-color: var(--control-bg);
+						color: var(--text-muted);
+					}
+
+					&:focus {
+						outline: none;
+					}
+
+					&.new-widget {
+						align-items: inherit;
+					}
+
+					.paragraph-control {
+						display: flex;
+						flex-direction: row-reverse;
+						position: absolute;
+						right: 20px;
+						gap: 5px;
+						background-color: var(--card-bg);
+						padding-left: 5px;
+				
+						.drag-handle {
+							cursor: all-scroll;
+							cursor: -webkit-grabbing;
+						}
+					}
+				}
+			}
 		}
 	}
 
-}
-
-.codex-editor {
-	min-height: 630px;
-
 	svg {
 		fill: none;
 	}
@@ -153,6 +174,29 @@
 			stroke: none;
 			width: fit-content;
 		}
+
+		.ce-settings {
+			width: fit-content;
+		
+			.cdx-settings-button.disabled{
+				pointer-events: none;
+				opacity: .5
+			}
+			.cdx-settings-sidebar{
+				position: absolute;
+				right: 100%;
+				top:0;
+				background: #fff;
+				width: 108px;
+				height: 145px;
+				box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
+				border-radius: 0 4px 4px 0;z-index: 0;
+			}
+		}
+
+		.ce-toolbar__settings-btn {
+			display: none;
+		}
 	}
 
 	.ce-inline-tool, .ce-inline-toolbar__dropdown {
@@ -160,6 +204,7 @@
 			fill: currentColor;
 		}
 	}
+
 	@media (min-width: 1199px) {
 		.ce-toolbar__content {
 			max-width: 930px;
@@ -190,57 +235,5 @@
 			max-width: 100%;
 		}
 	}
-	
-	div[card_name] {
-		height: inherit;
-	}
-	
-}
-
-.codex-editor__redactor{
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	margin: 0px -7px;
-}
-.ce-block{
-	width: 100%;
-	padding-left: 0;
-	padding-right: 0;
-}
-.cdx-settings-input{
-	border: 1px solid rgba(201,201,204,.48);
-	-webkit-box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);
-	box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);
-	border-radius: 3px;padding: 3px 8px;outline: none;
-	width: 100%;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-.cdx-small{
-	font-size: .6rem
-}
-.ce-block__content {
-	max-width: 100%;
-	height: 100%;
-	padding: 7px;
-
-	&> div {
-		height: 100%;
-	}
-}
 
-.cdx-settings-button.disabled{
-	pointer-events: none;
-	opacity: .5
-}
-.cdx-settings-sidebar{
-	position: absolute;
-	right: 100%;
-	top:0;
-	background: #fff;
-	width: 108px;
-	height: 145px;
-	box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
-	border-radius: 0 4px 4px 0;z-index: 0;
 }