Fixed action bars and version bump to 2.6.4

inovex · Jul 19, 2022 · 13a53c1 · 13a53c1
1 parent 0e7ec76
commit 13a53c1
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "url": "https://github.com/inovex/scrumlr.io/issues",
     "email": "info@scrumlr.io"
   },
-  "version": "2.6.3",
+  "version": "2.6.4",
   "private": true,
   "license": "MIT",
   "dependencies": {

diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
@@ -113,7 +113,6 @@ export const BoardComponent = ({children, currentUserIsModerator, moderating}: B
   }, [columnState]);
 
   if (!children || columnsCount === 0) {
-    document.getElementById("root")?.setAttribute("column-visibility", "visible");
     // Empty board
     return (
       <div className="board--empty">

diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
@@ -146,7 +146,7 @@
   grid-column-gap: 24px;
   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
 }
-[column-visibility="collapsed"] .column__note-list {
+.column__note-list {
   padding-bottom: 72px;
 }
 

diff --git a/src/components/MenuBars/MenuBars.scss b/src/components/MenuBars/MenuBars.scss
@@ -96,6 +96,11 @@ $box-shadow: 0px 10px 20px #00000026;
     opacity: 1;
     transform: translateY(0);
   }
+
+  :not(.menu-bars--isAdmin).menu-bars--user > .user-menu {
+    transform: translateX(-50%);
+  }
+
   .menu-bars.menu-bars--user > .admin-menu {
     visibility: hidden;
     opacity: 0;

diff --git a/src/components/MenuBars/MenuItem/MenuButton.tsx b/src/components/MenuBars/MenuItem/MenuButton.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import {TabIndex} from "constants/tabIndex";
-import {useState} from "react";
 import "./MenuItem.scss";
+import React from "react";
 
 type MenuButtonProps = {
   direction: "left" | "right";
@@ -13,31 +13,13 @@ type MenuButtonProps = {
 };
 
 export const MenuButton = (props: MenuButtonProps) => {
-  const [touchHover, setTouchHover] = useState(false);
   const Icon = props.icon;
 
   return (
     <button
       disabled={props.disabled}
-      className={classNames(`menu-item menu-item--${props.direction}`, {"menu-item--touch-hover": touchHover})}
+      className={classNames("menu-item", `menu-item--${props.direction}`)}
       onClick={() => props.onClick()}
-      onTouchEnd={(e) => {
-        if (!touchHover && document.getElementsByClassName("menu-item--touch-hover").length === 0) {
-          e.preventDefault();
-          window.addEventListener("click", () => setTouchHover(false), {once: true});
-          setTouchHover(true);
-        }
-        if (touchHover) {
-          e.preventDefault();
-          setTouchHover(false);
-          props.onClick();
-        }
-      }}
-      onBlur={() => {
-        if (touchHover) {
-          setTouchHover(false);
-        }
-      }}
       tabIndex={props.tabIndex ?? TabIndex.default}
       aria-label={props.label}
     >

diff --git a/src/components/MenuBars/MenuItem/MenuItem.scss b/src/components/MenuBars/MenuItem/MenuItem.scss
@@ -9,7 +9,7 @@ $icon-background-color-dark: #333948;
 .menu-item {
   height: $menu-item-size;
   width: $menu-item-size;
-  border-radius: calc($menu-item-size / 2);
+  border-radius: $menu-item-size / 2;
   background-color: transparent;
   border: none;
   padding: 0;
@@ -33,7 +33,7 @@ $icon-background-color-dark: #333948;
   align-items: center;
   max-width: 0;
   height: $menu-item-size;
-  border-radius: calc($menu-item-size / 2);
+  border-radius: $menu-item-size / 2;
   background-color: $tooltip-background-color-light;
   opacity: 0;
   visibility: hidden;
@@ -50,11 +50,21 @@ $icon-background-color-dark: #333948;
   border-style: solid;
   border-color: $tooltip-background-color-light transparent transparent transparent;
 }
-.menu-item:hover .menu-item__tooltip {
-  max-width: max-content;
-  visibility: visible;
-  opacity: 1;
+
+@media #{$smartphone} {
+  .menu-item .menu-item__tooltip {
+    display: none;
+  }
+}
+
+@media #{$tablet} {
+  .menu-item:hover .menu-item__tooltip {
+    max-width: max-content;
+    visibility: visible;
+    opacity: 1;
+  }
 }
+
 [theme="dark"] {
   .menu-item__tooltip {
     background-color: $tooltip-background-color-dark;
@@ -119,7 +129,7 @@ $icon-background-color-dark: #333948;
   letter-spacing: $letter-spacing--medium;
   line-height: $line-height--small;
   color: $color-black;
-  border-radius: calc($menu-item-size / 2);
+  border-radius: $menu-item-size / 2;
 }
 
 @media #{$tablet} {
@@ -132,13 +142,13 @@ $icon-background-color-dark: #333948;
     transition: transform 150ms linear 0ms;
   }
   .menu-item.menu-item--left .tooltip__text {
-    padding-right: calc($menu-item-size + $padding--small);
+    padding-right: $menu-item-size + $padding--small;
     padding-left: $padding--default;
     transform: translateX(100%);
     transform-origin: right;
   }
   .menu-item.menu-item--right .tooltip__text {
-    padding-left: calc($menu-item-size + $padding--small);
+    padding-left: $menu-item-size + $padding--small;
     padding-right: $padding--default;
     transform: translateX(-100%);
     transform-origin: left;

diff --git a/src/components/MenuBars/MenuItem/MenuToggle.tsx b/src/components/MenuBars/MenuItem/MenuToggle.tsx
@@ -18,7 +18,6 @@ type MenuToggleProps = {
 
 export const MenuToggle = (props: MenuToggleProps) => {
   const [value, setValue] = useState(props.value ?? false);
-  const [touchHover, setTouchHover] = useState(false);
   const Icon = props.icon;
 
   useEffect(() => {
@@ -36,25 +35,10 @@ export const MenuToggle = (props: MenuToggleProps) => {
       className={classNames(
         "menu-item",
         {"menu-item--active": !props.isFocusModeToggle && value, "menu-item__focus-mode-toggle--active": props.isFocusModeToggle && value, "menu-item--disabled": !value},
-        `menu-item--${props.direction}`,
-        {"menu-item--touch-hover": touchHover}
+        `menu-item--${props.direction}`
       )}
       onClick={() => {
-        if (document.getElementsByClassName("menu-item--touch-hover").length === 0) {
-          onToggle();
-        }
-      }}
-      onTouchEnd={(e) => {
-        if (!touchHover && document.getElementsByClassName("menu-item--touch-hover").length === 0) {
-          e.preventDefault();
-          window.addEventListener("click", () => setTouchHover(false), {once: true});
-          setTouchHover(true);
-        }
-        if (touchHover) {
-          e.preventDefault();
-          setTouchHover(false);
-          onToggle();
-        }
+        onToggle();
       }}
       tabIndex={props.tabIndex ?? TabIndex.default}
       aria-label={value ? props.toggleStopLabel : props.toggleStartLabel}

diff --git a/src/components/TimerDialog/TimerDialog.scss b/src/components/TimerDialog/TimerDialog.scss
@@ -30,8 +30,8 @@
     border-color: $color-dark-mode transparent transparent transparent;
   }
 }
-@media screen and (min-width: 768px) {
-  #root[column-visibility="visible"] + #portal {
+@media #{$tablet} {
+  #portal {
     .timer-dialog {
       top: calc(50% - 105px - 25px + 46px);
       right: 100px;
@@ -60,42 +60,10 @@
       border-color: transparent transparent transparent $color-white-one;
     }
   }
-  [theme="dark"] #root[column-visibility="visible"] + #portal {
-    .timer-dialog::after {
-      border-color: transparent transparent transparent $color-dark-mode;
-    }
-  }
 
-  #root[column-visibility="collapsed"] + #portal {
-    .timer-dialog {
-      left: calc(50% - 139px + 28px + 18px - 200px);
-      bottom: 100px;
-      top: auto;
-      right: auto;
-      height: auto;
-    }
-    .timer-dialog::before {
-      content: " ";
-      position: absolute;
-      left: calc(50% - 15px);
-      top: 100%;
-      border-width: 15px;
-      border-style: solid;
-      border-color: $color-planning-pink transparent transparent transparent;
-    }
-    .timer-dialog::after {
-      content: " ";
-      position: absolute;
-      left: calc(50% - 11px);
-      top: 100%;
-      border-width: 11px;
-      border-style: solid;
-      border-color: $color-white-one transparent transparent transparent;
-    }
-  }
-  [theme="dark"] #root[column-visibility="collapsed"] + #portal {
-    .timer-dialog::after {
-      border-color: $color-dark-mode transparent transparent transparent;
+  [theme="dark"] {
+    #portal .timer-dialog::after {
+      border-color: transparent transparent transparent $color-dark-mode;
     }
   }
 }

diff --git a/src/components/VotingDialog/VotingDialog.scss b/src/components/VotingDialog/VotingDialog.scss
@@ -30,8 +30,8 @@
     border-color: $color-dark-mode transparent transparent transparent;
   }
 }
-@media screen and (min-width: 768px) {
-  #root[column-visibility="visible"] + #portal {
+@media #{$tablet} {
+  #portal {
     .voting-dialog {
       top: calc(50% - 25px);
       right: 100px;
@@ -59,44 +59,11 @@
     }
   }
 
-  [theme="dark"] #root[column-visibility="visible"] + #portal {
-    .voting-dialog::after {
+  [theme="dark"] {
+    #portal .voting-dialog::after {
       border-color: transparent transparent transparent $color-dark-mode;
     }
   }
-
-  #root[column-visibility="collapsed"] + #portal {
-    .voting-dialog {
-      left: calc(50% - 139px + 86px + 18px - 200px);
-      bottom: 100px;
-      right: auto;
-      top: auto;
-      height: auto;
-    }
-    .voting-dialog::before {
-      content: " ";
-      position: absolute;
-      left: calc(50% - 15px);
-      top: 100%;
-      border-width: 15px;
-      border-style: solid;
-      border-color: $color-planning-pink transparent transparent transparent;
-    }
-    .voting-dialog::after {
-      content: " ";
-      position: absolute;
-      left: calc(50% - 11px);
-      top: 100%;
-      border-width: 11px;
-      border-style: solid;
-      border-color: $color-white-one transparent transparent transparent;
-    }
-  }
-  [theme="dark"] #root[column-visibility="collapsed"] + #portal {
-    .voting-dialog::after {
-      border-color: $color-dark-mode transparent transparent transparent;
-    }
-  }
 }
 
 .voting-dialog__start-button {