add an option to select text-orientation

deathau · May 22, 2021 · e2b9be0 · e2b9be0
1 parent 6926fb9
commit e2b9be0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -2,7 +2,7 @@ import './styles.scss'
 import { FileView, Plugin, TAbstractFile, WorkspaceLeaf, WorkspaceItem, WorkspaceSplit } from 'obsidian';
 import { WorkspaceItemExt } from './obsidian-ext';
 import { Editor, Position, Token } from 'codemirror';
-import { SlidingPanesSettings, SlidingPanesSettingTab, SlidingPanesCommands } from './settings';
+import { SlidingPanesSettings, SlidingPanesSettingTab, SlidingPanesCommands, Orientation } from './settings';
 
 
 export default class SlidingPanesPlugin extends Plugin {
@@ -152,6 +152,16 @@ export default class SlidingPanesPlugin extends Plugin {
         el.innerText += `body.plugin-sliding-panes .mod-root>.workspace-leaf{width:${this.settings.leafWidth + this.settings.headerWidth}px;}`;
       }
     }
+
+    if (this.settings.rotateHeaders){
+      this.selectOrientation(this.settings.orienation);
+    }
+  }
+
+  selectOrientation(orient: Orientation) {
+    document.body.classList.toggle('plugin-sliding-select-orientation-mixed', orient == 'mixed');
+    document.body.classList.toggle('plugin-sliding-select-orientation-upright', orient == 'upright');
+    document.body.classList.toggle('plugin-sliding-select-orientation-sideway', orient == 'sideway');
   }
 
   handleResize = () => {

diff --git a/src/settings.ts b/src/settings.ts
@@ -1,5 +1,7 @@
 import { App, Plugin, PluginSettingTab, Setting } from 'obsidian';
 
+export type Orientation = "sideway" | "mixed" | "upright"
+
 declare class SlidingPanesPlugin extends Plugin {
   settings: SlidingPanesSettings;
   disable(): void;
@@ -14,6 +16,7 @@ export class SlidingPanesSettings {
   disabled: boolean = false;
   rotateHeaders: boolean = true;
   headerAlt: boolean = false;
+  orienation: Orientation = "mixed";
   stackingEnabled: boolean = true;
 }
 
@@ -86,6 +89,20 @@ export class SlidingPanesSettingTab extends PluginSettingTab {
           this.plugin.refresh();
         }));
 
+    new Setting(containerEl)
+    .setName("Header text orientation")
+    .setDesc("Select the header text orientation")
+    .addDropdown((dropdown) => {
+      dropdown.addOption("sideway", "Sideway")
+      dropdown.addOption("mixed", "Mixed")
+      dropdown.addOption("upright", "Upright")
+      dropdown.setValue(this.plugin.settings.orienation)
+      dropdown.onChange((value: Orientation) => {
+        this.plugin.settings.orienation = value;
+        this.plugin.saveData(this.plugin.settings);
+        this.plugin.refresh();
+      })});
+
     new Setting(containerEl)
       .setName("Toggle stacking")
       .setDesc("Panes will stack up to the left and right")

diff --git a/src/styles.scss b/src/styles.scss
@@ -117,4 +117,19 @@ body.plugin-sliding-panes-rotate-header.plugin-sliding-panes-header-alt .workspa
         text-align: right;
         margin-top: 10px;
     }
-}
+}
+
+body.plugin-sliding-panes-rotate-header.plugin-sliding-select-orientation {
+    $selector: ".workspace>.mod-root>.workspace-leaf>.workspace-leaf-content>.view-header";
+
+    &-sideway #{$selector} {
+        text-orientation: sideways !important;
+    }
+    &-mixed #{$selector} {
+        text-orientation: mixed !important;
+    }
+    &-upright #{$selector} {
+        text-orientation: upright !important;
+    }
+}
+