🎨 improve how actionsCorner option is handled

francisashley · Dec 16, 2019 · 55a6b1b · 55a6b1b
1 parent df656e6
commit 55a6b1b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/features/action-bar/action-bar.js b/src/features/action-bar/action-bar.js
@@ -1,6 +1,5 @@
 import ReloadButton from "../action-bar/reload-button";
 import TrayButton from "../action-bar/tray-button";
-import classnames from "classnames";
 import crel from "crel";
 
 export default function ActionBar({
@@ -11,11 +10,11 @@ export default function ActionBar({
   trayIsOpen,
   onToggleTray = () => {}
 } = {}) {
-  const className = classnames(corner && "mde-action-bar-" + corner);
+  corner = ["tl", "tr"].includes(corner) ? corner : "tl";
 
   return crel(
     "div",
-    { id: "mde-action-bar", class: className },
+    { id: "mde-action-bar", "data-corner": corner },
     showReload ? ReloadButton({ onClick: () => location.reload(shouldRefreshCache) }) : null,
     showTray ? TrayButton({ isActive: trayIsOpen, onClick: onToggleTray }) : null
   );

diff --git a/src/mde.test.js b/src/mde.test.js
@@ -77,5 +77,17 @@ test("MDE shows correct actions", () => {
   expect(document.querySelector("#mde-action-bar #mde-toggle-tray")).toBeTruthy();
 });
 
-test.todo("MDE shows actions tray on top left");
-test.todo("MDE shows actions tray on top right");
+test("MDE shows actions tray on top right by default", () => {
+  mobileDevEnvironment();
+
+  expect(document.querySelector("#mde-action-bar[data-corner=tr]")).toBeTruthy();
+});
+test("MDE shows actions tray on top left", () => {
+  mobileDevEnvironment({ actionsCorner: "tl" });
+  expect(document.querySelector("#mde-action-bar[data-corner=tl]")).toBeTruthy();
+});
+test("MDE shows actions tray on top right", () => {
+  mobileDevEnvironment({ actionsCorner: "tr" });
+
+  expect(document.querySelector("#mde-action-bar[data-corner=tr]")).toBeTruthy();
+});
diff --git a/src/sass/mde.scss b/src/sass/mde.scss
@@ -4,13 +4,14 @@
   box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 10px;
-  left: 10px;
   z-index: 1;
   border: thin solid #6e6e6e;
 
-  &.mde-action-bar-tr {
+  &[data-corner="tl"] {
+    left: 10px;
+  }
+  &[data-corner="tr"] {
     right: 10px;
-    left: auto;
   }
 
   > button {