[#70794] Fix topbar padding and margin styles

antmicro · Jan 2, 2025 · d60e12f · d60e12f
1 parent 7a8b0d7
commit d60e12f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 122 deletions.
diff --git a/src/components/Avatars.jsx b/src/components/Avatars.jsx
@@ -4,6 +4,7 @@ const MAX_AVATARS = 4;
 
 const AvatarsWrapper = styled.div`
   min-width: ${(props) => props.n * 35}px;
+  margin-right: 10px;
 
   .avatar {
     border-radius: 50%;

diff --git a/src/components/ButtonGroup.jsx b/src/components/ButtonGroup.jsx
@@ -4,6 +4,7 @@ import DefaultButton from "./Buttons.js";
 
 const GroupContainer = styled.div`
   display: flex;
+  margin-left: 10px;
 `;
 
 const RadioButton = styled(DefaultButton)`
@@ -21,7 +22,6 @@ const RadioButton = styled(DefaultButton)`
   &:first-child {
     border-left: 1px solid var(--icon-border) !important;
     border-radius: var(--border-radius) 0 0 var(--border-radius);
-    margin-left: 10px;
   }
 
   &:last-child {

diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -20,7 +20,6 @@ const DefaultButton = styled.button`
   height: 40px;
   display: flex;
   justify-content: center;
-  margin-top: 0px;
   align-items: center;
   padding: 0;
   transition: 0.4s ease;
@@ -29,7 +28,6 @@ const DefaultButton = styled.button`
 
   &:not(:has(svg)) {
     padding: 0px 15px;
-    margin: 5px;
   }
 `;
 

diff --git a/src/components/TemplateManager.jsx b/src/components/TemplateManager.jsx
@@ -1,24 +1,22 @@
 import { useState, useEffect, useContext } from "preact/hooks";
 import Modal from "./Modal";
-import Tooltip from "./Tooltip";
 import DefaultButton from "./Buttons";
-import { styled } from "styled-components";
+import { css, styled } from "styled-components";
 import { TopbarButton } from "./Topbar";
 import { MystState } from "../mystState.js";
 import { useSignalEffect } from "@preact/signals";
 
 const TemplateDropdownContent = styled.div`
   display: none;
-  margin-left: 5px;
-  margin-right: 5px;
   text-transform: uppercase;
   white-space: nowrap;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--icon-color);
   background-color: var(--icon-bg);
-  width: 210%;
   z-index: 20;
+  gap: 5px;
+  padding: 5px;
 `;
 
 const TemplateIcon = () => (
@@ -31,12 +29,20 @@ const TemplateIcon = () => (
 );
 
 const TemplateButton = styled(DefaultButton)`
-  width: 90%;
-  color: var(--icon-color);
-  border: 1px solid var(--icon-border);
+  color: ${(props) => (props.error ? "var(--red-500)" : "var(--icon-color)")};
+  border: 1px solid ${(props) => (props.error ? "var(--red-500)" : "var(--icon-border)")};
   padding: 0 10px 0 10px;
   margin-top: 0px;
-  text-wrap: wrap;
+
+  ${(props) =>
+    props.error &&
+    css`
+      cursor: default;
+      &:hover {
+        border: 1px solid var(--red-500) !important;
+        background-color: var(--icon-bg) !important;
+      }
+    `}
 `;
 
 const Dropdown = styled.div`
@@ -58,7 +64,6 @@ const ButtonTooltipFlex = styled.div`
 
 const TemplatesList = styled.div`
   position: absolute;
-  width: 100%;
   padding-top: 5px;
 `;
 
@@ -184,27 +189,21 @@ const TemplateManager = ({ text }) => {
         </TopbarButton>
         <TemplatesList>
           <TemplateDropdownContent>
-            {Object.keys(readyTemplates).map((key) =>
-              readyTemplates[key].errorMessage ? (
-                <ButtonTooltipFlex>
-                  {showTooltip === key && <Tooltip tooltipOrientation="left" errorMessage={readyTemplates[key].errorMessage} />}
-                  <TemplateButton type="button" onMouseEnter={() => setShowTooltip(key)} onMouseLeave={() => setShowTooltip(false)}>
-                    {readyTemplates[key].id}
-                  </TemplateButton>
-                </ButtonTooltipFlex>
-              ) : (
-                <TemplateButton
-                  type="button"
-                  class="tmpl-butn"
-                  onClick={() => {
-                    setShowModal(true);
-                    setSelectedTemplate(key);
-                  }}
-                >
-                  {readyTemplates[key].id}
-                </TemplateButton>
-              ),
-            )}
+            {Object.keys(readyTemplates).map((key) => (
+              <TemplateButton
+                type="button"
+                key={key}
+                error={readyTemplates[key].errorMessage != undefined}
+                title={readyTemplates[key].errorMessage ?? ""}
+                onClick={() => {
+                  if (readyTemplates[key].errorMessage) return;
+                  setShowModal(true);
+                  setSelectedTemplate(key);
+                }}
+              >
+                {readyTemplates[key].id}
+              </TemplateButton>
+            ))}
           </TemplateDropdownContent>
         </TemplatesList>
       </Dropdown>

diff --git a/src/components/Tooltip.jsx b/src/components/Tooltip.jsx
diff --git a/src/components/Topbar.jsx b/src/components/Topbar.jsx
@@ -19,18 +19,24 @@ const Topbar = styled.div`
   z-index: 10;
   position: sticky;
   top: 0;
+  padding: 0 15px;
+  width: 100%;
+  height: 60px;
+  background-color: var(--navbar-bg);
 
-  display: grid;
-  grid-template-columns: min-content min-content auto auto min-content min-content 15px;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
 
-  .buttons-left {
+  .side {
     display: flex;
+    align-items: center;
   }
 
-  width: 100%;
-  height: 60px;
-  background-color: var(--navbar-bg);
+  .btns {
+    display: flex;
+    gap: 10px;
+  }
 
   svg > path {
     stroke: var(--icon-color);
@@ -69,7 +75,7 @@ const Title = styled.div`
 
 const Alert = styled(DefaultButton)`
   padding: 0px 15px;
-  margin: 5px;
+  margin-left: 10px;
   pointer-events: none;
   background-color: var(--alert);
   border: none;
@@ -80,7 +86,6 @@ export const TopbarButton = styled(DefaultButton)`
   color: ${(props) => (props.active ? "white" : "var(--icon-color)")};
   border: ${(props) => (props.active ? "1px solid var(--icon-main-active)" : "1px solid var(--icon-border)")};
   background-color: ${(props) => (props.active ? "var(--icon-main-active)" : "var(--icon-bg)")};
-  margin: 5px;
   width: 40px;
 `;
 
@@ -229,25 +234,29 @@ export const EditorTopbar = ({ alert, users, text, buttons }) => {
 
   return (
     <Topbar id="topbar">
-      <div class="buttons-left">
-        {buttonsLeft.map((button) => (
-          <TopbarButton className="icon" type="button" key={button.id} title={button.tooltip} name={button.id} onClick={button.action}>
-            {typeof button.icon == "function" ? <button.icon /> : <img src={button.icon} />}
-          </TopbarButton>
-        ))}
-        {buttons.find((b) => b.id === "template-manager") && options.templatelist.value && <TemplateManager text={text} />}
+      <div className="side">
+        <div class="btns">
+          {buttonsLeft.map((button) => (
+            <TopbarButton className="icon" type="button" key={button.id} title={button.tooltip} name={button.id} onClick={button.action}>
+              {typeof button.icon == "function" ? <button.icon /> : <img src={button.icon} />}
+            </TopbarButton>
+          ))}
+          {buttons.find((b) => b.id === "template-manager") && options.templatelist.value && <TemplateManager text={text} />}
+        </div>
+        {alert && <Alert className="topbar-alert"> {alert} </Alert>}
+        <Title id="document-title" dangerouslySetInnerHTML={{ __html: titleHtml.value }} />
+      </div>
+      <div className="side">
+        <Avatars users={users} />
+        <div className="btns">
+          {textButtons.map((b) => (
+            <DefaultButton type="button" onClick={b.action}>
+              {b.text}
+            </DefaultButton>
+          ))}
+        </div>
+        <ButtonGroup buttons={editorModeButtons.value} clickedId={clickedId.value} />
       </div>
-      <span> {alert && <Alert className="topbar-alert"> {alert} </Alert>} </span>
-      <Title id="document-title" dangerouslySetInnerHTML={{ __html: titleHtml.value }} />
-      <Avatars users={users} />
-      <span>
-        {textButtons.map((b) => (
-          <DefaultButton type="button" onClick={b.action}>
-            {b.text}
-          </DefaultButton>
-        ))}
-      </span>
-      <ButtonGroup buttons={editorModeButtons.value} clickedId={clickedId.value} />
     </Topbar>
   );
 };
diff --git a/tests/myst-editor.spec.ts b/tests/myst-editor.spec.ts
@@ -520,7 +520,7 @@ test.describe.parallel("With collaboration enabled", () => {
 
       const title = await page.locator("#document-title").innerHTML();
       expect(title).toContain("Playwright");
-      expect(page.locator("#topbar > span > button")).toHaveCount(2);
+      expect(page.locator("#topbar .side:last-child .btns button")).toHaveCount(2);
       const resolvedVisible = await page.isVisible("#resolved-wrapper");
       expect(resolvedVisible).toBeTruthy();
     });