Experiments

src/apps/user/mediaplayer/runtime.ts

@@ -140,7 +140,7 @@ export class MediaPlayerRuntime extends AppProcess {
       icon: "MediaPlayerIcon",
       popup: {
         width: 250,
-        height: 280,
+        height: 185,
         component: TrayPopup as any,
       },
     });

src/css/apps/components/shell.css

@@ -49,6 +49,11 @@
   position: relative;
 }
 
+.tb-vertical-left #arcShell div.shell div.primary,
+.tb-vertical-right #arcShell div.shell div.primary {
+  align-items: start;
+}
+
 #arcShell div.shell div.secondary {
   z-index: 10000;
   position: relative;

src/css/apps/components/shell/actioncenter.css

@@ -66,3 +66,7 @@ div.shell div.actioncenter div.top > div {
 .theme-light div.shell div.actioncenter::before {
   opacity: 0.1;
 }
+
+.tb-vertical-right div.shell div.actioncenter {
+  right: 0;
+}

src/css/apps/components/shell/startmenu.css

@@ -35,6 +35,14 @@ div.shell div.startmenu:not(.opened) {
   visibility: hidden !important;
 }
 
+.tb-vertical-left div.shell div.startmenu:not(.opened) {
+  translate: -50px 0;
+}
+
+.tb-vertical-right div.shell div.startmenu:not(.opened) {
+  translate: -50px 0;
+}
+
 div.shell div.startmenu div.top {
   display: flex;
   gap: 10px;

src/css/apps/components/shell/taskbar.css

@@ -1,4 +1,5 @@
 @import url("./taskbar/openedapps.css");
+@import url("./taskbar/position.css");
 @import url("./taskbar/calendar.css");
 div.shell div.taskbar {
   display: flex;
@@ -30,10 +31,20 @@ div.shell.docked div.taskbar.shell-colored::before {
   --taskbar-allocation: 72px;
 }
 
+:root #main:has(#arcShell div.shell) #appRenderer.tb-vertical-left,
+:root #main:has(#arcShell div.shell) #appRenderer.tb-vertical-right {
+  --taskbar-allocation: 70px;
+}
+
 :root #main:has(#arcShell div.shell.docked) {
   --taskbar-allocation: 51px;
 }
 
+:root #main:has(#arcShell div.shell.docked) #appRenderer.tb-vertical-left,
+:root #main:has(#arcShell div.shell.docked) #appRenderer.tb-vertical-right {
+  --taskbar-allocation: 50px;
+}
+
 div.shell.docked div.taskbar {
   width: 100%;
   margin: 0;
@@ -159,7 +170,7 @@ div.shell div.taskbar div.pinned-apps > button {
 }
 
 .theme-light #arcShell div.shell div.taskbar div.pinned-apps > button:active {
-opacity: 0.5;
+  opacity: 0.5;
   filter: brightness(0.9);
 }
 
@@ -180,6 +191,7 @@ div.shell div.taskbar div.pinned-apps > button + button {
   justify-content: center;
   align-items: center;
   background-color: transparent;
+  position: relative;
 }
 
 #arcShell div.taskbar div.tray-icons > div.icon > button.trigger:hover {
@@ -220,9 +232,25 @@ div.shell div.taskbar div.pinned-apps > button + button {
     opacity 0.2s;
 }
 
+.tb-vertical-left #arcShell div.taskbar div.tray-icons > div.icon > div.popup {
+  top: unset !important;
+  right: calc(0px - var(--w) - 10px) !important;
+  margin-top: 0;
+  margin-right: 20px;
+}
+
+.tb-vertical-right #arcShell div.taskbar div.tray-icons > div.icon > div.popup {
+  top: unset !important;
+  left: calc(0px - var(--w) - 20px) !important;
+  margin-top: 0;
+  margin-left: 20px;
+}
+
 #arcShell div.taskbar div.tray-icons > div.icon > div.popup.visible {
   opacity: 1;
   margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
   pointer-events: initial !important;
   scale: 1;
 }
@@ -293,3 +321,10 @@ div.shell div.shell div.taskbar button.clock-button.active span,
 .theme-light div.shell div.taskbar::before {
   opacity: 0.1;
 }
+
+[class*="tb-vertical"] div.shell div.taskbar button.clock-button {
+  width: 40px !important;
+  min-width: unset;
+  padding: 0;
+  justify-content: center;
+}

src/css/apps/components/shell/taskbar/calendar.css

@@ -20,6 +20,21 @@
   padding: 10px;
 }
 
+.tb-vertical-right #arcShell div.taskbar div.calendar-popup {
+  top: var(--h);
+  left: calc(0px - var(--w) - 10px);
+  margin-top: 0;
+  margin-left: 20px;
+}
+
+
+.tb-vertical-left #arcShell div.taskbar div.calendar-popup {
+  top: var(--h);
+  right: calc(0px - var(--w) - 10px);
+  margin-top: 0;
+  margin-right: 20px;
+}
+
 .theme-light div.taskbar div.calendar-popup::before {
   opacity: 0.1;
 }
@@ -52,7 +67,7 @@
 #arcShell div.taskbar div.calendar-popup div.top h1.date {
   font-size: 28px;
   white-space: nowrap;
-  overflow:hidden;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -62,7 +77,7 @@
   font-family: "fredoka";
   font-weight: 500;
   white-space: nowrap;
-  overflow:hidden;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -74,6 +89,8 @@
 #arcShell div.taskbar div.calendar-popup.opened {
   opacity: 1;
   margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
   pointer-events: initial !important;
   /** Don't remove the below scale call, it glitches out otherwise. */
   scale: 1;

src/css/apps/components/shell/taskbar/position.css

@@ -0,0 +1,91 @@
+.tb-horizontal-top #arcShell div.shell {
+  flex-direction: column-reverse;
+}
+
+.tb-vertical-left #arcShell div.shell {
+  flex-direction: row-reverse;
+}
+
+.tb-vertical-right #arcShell div.shell {
+  flex-direction: row;
+}
+
+.tb-vertical-left #arcShell div.shell div.primary,
+.tb-vertical-right #arcShell div.shell div.primary {
+  width: calc(100% - var(--taskbar-allocation));
+  max-width: calc(100% - var(--taskbar-allocation));
+  height: 100%;
+  max-height: 100%;
+}
+
+.tb-vertical-left #arcShell div.shell div.secondary,
+.tb-vertical-right #arcShell div.shell div.secondary {
+  width: var(--taskbar-allocation);
+  max-width: var(--taskbar-allocation);
+  height: 100%;
+  max-height: 100%;
+}
+
+.tb-vertical-left #arcShell div.taskbar,
+.tb-vertical-right #arcShell div.taskbar {
+  width: 50px;
+  height: calc(100% - 20px);
+  border-top: none;
+  flex-direction: column;
+  margin: 10px;
+}
+
+.tb-vertical-left #arcShell div.shell.docked div.taskbar,
+.tb-vertical-right #arcShell div.shell.docked div.taskbar {
+  width: 50px;
+  height: 100%;
+  border-top: none;
+  flex-direction: column;
+  margin: 0;
+}
+.tb-vertical-left #arcShell div.taskbar {
+  border-right: var(--border);
+}
+
+.tb-vertical-right #arcShell div.taskbar {
+  border-left: var(--border);
+}
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.pinned-apps {
+  height: 0;
+  flex-grow: 1;
+  overflow-y: scroll;
+  width: 40px;
+  max-width: 40px;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.pinned-apps::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar button.pinned-app {
+  display: block;
+  margin-left: 0;
+}
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar button.pinned-app + button.pinned-app {
+  margin-top: 5px;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.opened-apps {
+  overflow-y: scroll;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.opened-apps button.opened-app {
+  flex-direction: column;
+  width: 40px;
+  height: 40px;
+  display: block;
+  margin-left: 0;
+  margin-bottom: 5px;
+  padding: 8px !important;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar > button {
+  min-height: 40px;
+}

src/css/apps/components/shell/workspaces.css

@@ -129,3 +129,15 @@
 #arcShell div.virtual-desktops button.add:active {
   background-color: var(--button-glass-active-bg);
 }
+
+.tb-vertical-left #arcShell div.virtual-desktops {
+  width: calc(100% - var(--taskbar-allocation));
+  bottom: 0;
+  left: var(--taskbar-allocation);
+}
+
+.tb-vertical-right #arcShell div.virtual-desktops {
+  width: calc(100% - var(--taskbar-allocation));
+  bottom: 0;
+  left: 0;
+}

src/css/window.css

@@ -13,6 +13,7 @@
 @import url("./window/proto.css");
 @import url("./window/userlink.css");
 @import url("./window/splitpanes.css");
+@import url("./window/maximization.css");
 
 div.window:not(.core) {
   position: absolute;

src/css/window/maximization.css

@@ -0,0 +1,54 @@
+div.window:not(.core).maximized {
+  translate: 0 0 !important;
+  transform: none !important;
+  border-radius: 0 !important;
+  resize: none !important;
+  border: none !important;
+  transition: all 0.3s !important;
+}
+
+.tb-horizontal-bottom div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  height: calc(100% - var(--taskbar-allocation)) !important;
+  min-height: calc(100% - var(--taskbar-allocation)) !important;
+  max-height: calc(100% - var(--taskbar-allocation)) !important;
+}
+
+.tb-horizontal-top div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: var(--taskbar-allocation) !important;
+  left: 0 !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  height: calc(100% - var(--taskbar-allocation)) !important;
+  min-height: calc(100% - var(--taskbar-allocation)) !important;
+  max-height: calc(100% - var(--taskbar-allocation)) !important;
+}
+.tb-vertical-left div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: 0 !important;
+  left: var(--taskbar-allocation) !important;
+  width: calc(100% - var(--taskbar-allocation)) !important;
+  min-width: calc(100% - var(--taskbar-allocation)) !important;
+  max-width: calc(100% - var(--taskbar-allocation)) !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  max-height: 100% !important;
+}
+.tb-vertical-right div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: 0 !important;
+  left: 0 !important;
+  width: calc(100% - var(--taskbar-allocation)) !important;
+  min-width: calc(100% - var(--taskbar-allocation)) !important;
+  max-width: calc(100% - var(--taskbar-allocation)) !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  max-height: 100% !important;
+}

src/ts/server/user/daemon/contexts/apprenderer.ts

@@ -56,6 +56,7 @@ export class AppRendererUserContext extends UserContext {
     renderer.removeAttribute("class");
     renderer.setAttribute("style", style);
     renderer.classList.add(`theme-${theme}`);
+    renderer.classList.add(`tb-${v.shell.taskbar.position}`);
     renderer.classList.toggle("sharp", v.shell.visuals.sharpCorners);
     renderer.classList.toggle("noani", v.shell.visuals.noAnimations || this.safeMode);
     renderer.classList.toggle("noglass", v.shell.visuals.noGlass || this.safeMode);

src/ts/server/user/default.ts

@@ -19,6 +19,7 @@ export const DefaultUserPreferences: UserPreferences = {
       clockDate: false,
       clockSecs: false,
       batteryPercentage: false,
+      position: "horizontal-bottom",
       openedAppsPerWorkspace: false,
     },
     actionCenter: {

src/types/user.ts

@@ -96,6 +96,7 @@ export interface TaskbarPreferences {
   clockDate: boolean;
   clock12hr: boolean;
   batteryPercentage: boolean;
+  position: "horizontal-bottom" | "vertical-left" | "vertical-right" | "horizontal-top";
   openedAppsPerWorkspace?: boolean;
 }