added control panel icons

khaelar · Oct 10, 2023 · 6c6312b · 6c6312b
1 parent 7940e27
commit 6c6312b
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 1 deletion.
diff --git a/src/static/css/control-panel.css b/src/static/css/control-panel.css
@@ -112,6 +112,90 @@
 	opacity: 0;
 }
 
+.controlPanel button.pageMenu .icon,
+.controlPanel button.newBlock .icon {
+	display: inline-block;
+	position: relative;
+	width: 16px;
+	height: 16px;
+	box-sizing: border-box;
+	margin-right: 8px;
+	overflow: hidden;
+	transform: scale(1.15);
+}
+
+.controlPanel button.pageMenu .icon {
+	padding: 7px 0;
+	background-clip: content-box;
+	transition: padding 150ms ease;
+	background-color: var(--tg-theme-text-color);
+}
+
+.controlPanel button.newBlock .icon {
+	transition: transform 150ms ease;
+	transform-origin: center;
+}
+
+.controlPanel button.newBlock.active .icon {
+	transform: scale(1.15) rotate(45deg);
+}
+
+.controlPanel button.pageMenu .icon::before,
+.controlPanel button.pageMenu .icon::after {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	transform-origin: 1px;
+	height: 2px;
+	width: 200%;
+	background-color: var(--tg-theme-text-color);
+	transition: transform 150ms ease;
+}
+
+.controlPanel button.pageMenu .icon::before {
+	top: 0;
+}
+
+.controlPanel button.pageMenu .icon::after {
+	bottom: 0;
+}
+
+.controlPanel button.pageMenu.active .icon {
+	padding: 8px 0;
+}
+
+.controlPanel button.pageMenu.active .icon::before {
+	transform: rotate(45deg);
+}
+
+.controlPanel button.pageMenu.active .icon::after {
+	transform: rotate(-45deg);
+}
+
+
+.controlPanel button.newBlock .icon::before,
+.controlPanel button.newBlock .icon::after {
+	content: "";
+	display: block;
+	position: absolute;
+	background-color: var(--tg-theme-text-color);
+}
+
+.controlPanel button.newBlock .icon::before {
+	top: 0;
+	left: calc(50% - 1px);
+	width: 2px;
+	height: 100%;
+}
+
+.controlPanel button.newBlock .icon::after {
+	top: calc(50% - 1px);
+	left: 0;
+	width: 100%;
+	height: 2px;
+}
+
 /* menus */
 
 .controlPanel>.menus {

diff --git a/src/static/css/telegram.css b/src/static/css/telegram.css
@@ -35,13 +35,25 @@ button:not(.noTgStyle) {
 	text-transform: uppercase;
 	outline: none;
 	height: 40px;
+	transition: background-color 100ms ease;
+}
+
+button.active:not(.danger):not(.noTgStyle) {
+	background-color: var(--button-highlight-color);
 }
 
 button.danger:not(.noTgStyle) {
 	background-color: var(--danger-color);
 	color: white;
 }
 
+button:not(.noTgStyle) .buttonContent {
+	display: grid;
+	grid-template-columns: auto auto;
+	justify-content: center;
+	align-content: center;
+}
+
 @media (hover: hover) {
 	button:not(.noTgStyle) {
 		cursor: pointer;

diff --git a/src/static/js/control-panel.js b/src/static/js/control-panel.js
@@ -24,6 +24,13 @@ export class ControlPanel {
 		else
 			this.activeMenu = menuName;
 
+		// TODO: refactor
+		Array.from(this.modesContainer.querySelectorAll("button.pageMenu"))
+			.map(btn => btn.classList.toggle("active",
+				this.activeMenu == "pageMenu"));
+		Array.from(this.modesContainer.querySelectorAll("button.newBlock"))
+			.map(btn => btn.classList.toggle("active",
+				this.activeMenu == "blockCatalog"));
 
 		this.menusContainer.classList.toggle("active", this.activeMenu);
 		switchActiveChild(this.menusContainer, this.activeMenu ?

diff --git a/src/static/js/util.js b/src/static/js/util.js
@@ -69,9 +69,10 @@ export function tgConfirm(message) {
 export function buildButton(classes, text, parent = null, onClick = null) {
 	const button = build(`button${classes || ""}`, parent);
 	const contentElement = build("div.buttonContent", button);
+	build("span.icon", contentElement);
 	build("div.rippleJS", button);
 
-	contentElement.textContent = text || "";
+	text && contentElement.append(text);
 	if (onClick) button.addEventListener("click", onClick);
 	return button;
 }