From 410d576c0f6b3b3de09cd30b321b750fc68974fb Mon Sep 17 00:00:00 2001 From: Zsolt Viczian Date: Sat, 7 May 2022 11:02:43 +0200 Subject: [PATCH] 0.0.4 improved mobile device styling --- manifest.json | 2 +- src/Settings.ts | 39 ++++++++++++++----------- src/Suggesters/ToolsPanel.ts | 20 +++++++------ styles.css | 56 +++++++++++++++++++++++++++++++----- 4 files changed, 84 insertions(+), 33 deletions(-) diff --git a/manifest.json b/manifest.json index 6b94ede..025f5b3 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "excalibrain", "name": "ExcaliBrain", - "version": "0.0.3", + "version": "0.0.4", "minAppVersion": "0.14.0", "description": "A clean, intuitive and editable graph view for Obsidian", "author": "Zsolt Viczian", diff --git a/src/Settings.ts b/src/Settings.ts index 69722a5..8c7d178 100644 --- a/src/Settings.ts +++ b/src/Settings.ts @@ -314,11 +314,10 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { opacityLabel.style.opacity = isDisabled ? "0.3" : "1"; displayText.style.opacity = isDisabled ? "0.3" : "1"; } - if(allowOverride) { setting.addToggle(toggle => { toggleComponent = toggle; - toggleComponent.toggleEl.style.marginRight = "5px"; + toggle.toggleEl.addClass("excalibrain-settings-toggle"); toggle .setValue(typeof getValue() !== "undefined") .setTooltip(t("NODESTYLE_INCLUDE_TOGGLE")) @@ -334,12 +333,18 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { }) }) } - - colorLabel = createEl("span",{text:"color:"}); - colorLabel.style.paddingRight="5px"; + setting.settingEl.removeClass("mod-toggle"); + colorLabel = createEl("span",{ + text: "color:", + cls: "excalibrain-settings-colorlabel" + }); + setting.controlEl.appendChild(colorLabel) - picker = createEl("input", {type:"color"},(el:HTMLInputElement)=>{ + picker = createEl("input", { + type: "color", + cls: "excalibrain-settings-colorpicker" + },(el:HTMLInputElement)=>{ el.value = getHex(getValue()??defaultValue); el.onchange = () => { setValue(el.value+ getAlphaHex(sliderComponent.getValue())); @@ -347,9 +352,10 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { }); setting.controlEl.appendChild(picker); - opacityLabel = createEl("span",{text: "opacity:"}); - opacityLabel.style.paddingLeft = "10px"; - opacityLabel.style.paddingRight = "5px"; + opacityLabel = createEl("span",{ + text: "opacity:", + cls: "excalibrain-settings-opacitylabel" + }); setting.controlEl.appendChild(opacityLabel); setting.addSlider(slider => { @@ -364,10 +370,9 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { }) }) - displayText = createDiv("", (el) => { - el.style.minWidth = "2em"; - el.style.textAlign = "right"; - el.innerText = ` ${sliderComponent.getValue().toString()}`; + displayText = createDiv({ + text: `${sliderComponent.getValue().toString()}`, + cls: "excalibrain-settings-sliderlabel" }); setting.controlEl.appendChild(displayText); picker.style.opacity = sliderComponent.getValue().toString(); @@ -407,7 +412,7 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { if(allowOverride) { setting.addToggle(toggle => { toggleComponent = toggle; - toggleComponent.toggleEl.style.marginRight = "5px"; + toggle.toggleEl.addClass("excalibrain-settings-toggle"); toggle .setValue(typeof getValue() !== "undefined") .setTooltip(t("NODESTYLE_INCLUDE_TOGGLE")) @@ -479,7 +484,7 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { if(allowOverride) { setting.addToggle(toggle => { toggleComponent = toggle; - toggleComponent.toggleEl.style.marginRight = "5px"; + toggle.toggleEl.addClass("excalibrain-settings-toggle"); toggle .setValue(typeof getValue() !== "undefined") .setTooltip(t("NODESTYLE_INCLUDE_TOGGLE")) @@ -539,7 +544,7 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { if(allowOverride) { prefixSetting.addToggle(toggle => { toggleComponent = toggle; - toggleComponent.toggleEl.style.marginRight = "5px"; + toggle.toggleEl.addClass("excalibrain-settings-toggle"); toggle .setValue(typeof setting.prefix !== "undefined") .setTooltip(t("NODESTYLE_INCLUDE_TOGGLE")) @@ -1295,7 +1300,7 @@ export class ExcaliBrainSettingTab extends PluginSettingTab { this.demoNodeImg = containerEl.createEl("img",{cls: "excalibrain-settings-demoimg"}); nodeStyleDiv = containerEl.createDiv({ - cls: "excalibrain-setting-nodestyle-section" + cls: "excalibrain-setting-style-section" }); removeStylesheet(HIDE_DISABLED_STYLE); nodeStylesDropdown diff --git a/src/Suggesters/ToolsPanel.ts b/src/Suggesters/ToolsPanel.ts index 5a02c0e..53d3f85 100644 --- a/src/Suggesters/ToolsPanel.ts +++ b/src/Suggesters/ToolsPanel.ts @@ -15,8 +15,9 @@ export class ToolsPanel { private plugin: ExcaliBrain ) { contentEl.addClass("excalibrain-contentEl"); - this.wrapperDiv = this.contentEl.createDiv(); - this.wrapperDiv.addClass("excalibrain-search-wrapper"); + this.wrapperDiv = this.contentEl.createDiv({ + cls: "excalibrain-toolspanel-wrapper" + }); //------ //search @@ -39,11 +40,14 @@ export class ToolsPanel { this.plugin ); - + + const buttonsWrapperDiv = this.wrapperDiv.createDiv({ + cls: "excalibrain-buttons" + }) //------------ //Edit drawing //------------ - const saveAsDrawingButton = this.wrapperDiv.createEl("button", { + const saveAsDrawingButton = buttonsWrapperDiv.createEl("button", { cls: "excalibrain-button", text: "✏" }); @@ -70,7 +74,7 @@ export class ToolsPanel { this.plugin, ()=>this.plugin.settings.showAttachments, (val:boolean)=>this.plugin.settings.showAttachments = val, - this.wrapperDiv, + buttonsWrapperDiv, { display: "📎", tooltip: t("SHOW_HIDE_ATTACHMENTS") @@ -86,7 +90,7 @@ export class ToolsPanel { this.plugin, ()=>this.plugin.settings.showVirtualNodes, (val:boolean)=>this.plugin.settings.showVirtualNodes = val, - this.wrapperDiv, + buttonsWrapperDiv, { display: "∅", tooltip: t("SHOW_HIDE_VIRTUAL") @@ -102,7 +106,7 @@ export class ToolsPanel { this.plugin, ()=>this.plugin.settings.showInferredNodes, (val:boolean)=>this.plugin.settings.showInferredNodes = val, - this.wrapperDiv, + buttonsWrapperDiv, { display: "🤔", tooltip: t("SHOW_HIDE_INFERRED") @@ -118,7 +122,7 @@ export class ToolsPanel { this.plugin, ()=>this.plugin.settings.renderAlias, (val:boolean)=>this.plugin.settings.renderAlias = val, - this.wrapperDiv, + buttonsWrapperDiv, { display: "🧥", tooltip: t("SHOW_HIDE_ALIAS") diff --git a/styles.css b/styles.css index 4083be3..b25176f 100644 --- a/styles.css +++ b/styles.css @@ -18,11 +18,16 @@ color: var(--text-title-h1); } -.excalibrain-setting-nodestyle-section { +.excalibrain-setting-style-section { padding-left: 30px; border-left: 10px solid var(--background-modifier-border); } +/*.isMobile .excalibrain-setting-style-section { + flex-direction: column; + align-items: flex-start; +}*/ + .excalibrain-settings-demoimg { max-width: 400px; } @@ -31,20 +36,22 @@ position: relative; } -.excalibrain-search-wrapper { +.excalibrain-toolspanel-wrapper { z-index: 1; position: absolute; top: 10px; - left: 10px; + padding-left: 10px; + width: 100%; + padding-right: 10px; } .excalibrain-button { vertical-align: middle; padding-left: 5px; padding-right: 5px; - margin-left: 5px; - margin-right: 0px; - width: 2em; + margin-left: 5px !important; + margin-right: 0px !important; + width: 2em !important; } .excalibrain-button span { @@ -60,6 +67,41 @@ } .excalibrain-searchinput { - width: 400px; + max-width: 400px; + width: 100%; vertical-align: middle; +} + +.excalibrain-buttons { + display: inline-flex; + width: 100%; + margin-top: 5px; + margin-left: -5px; +} + +.excalibrain-settings-colorlabel { + padding-right: 5px; + min-width: 3em; +} + +.excalibrain-settings-colorpicker { + max-width: 32px; + min-width: 32px; + width: 32px !important; +} + +.excalibrain-settings-opacitylabel { + padding-right: 5px; + padding-left: 10px; + min-width: 5em; +} + +.excalibrain-settings-sliderlabel { + min-width: 2em; + text-align: right; +} + +.excalibrain-settings-toggle { + min-width: 2em; + margin-right: 5px; } \ No newline at end of file