0.0.4 improved mobile device styling

zsviczian · May 7, 2022 · 410d576 · 410d576
1 parent fa44224
commit 410d576
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 33 deletions.
diff --git 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
@@ -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,22 +333,29 @@ 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()));
       }
     });
     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
@@ -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
@@ -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;
 }