Revert "[#63824] Handle long document titles"

This reverts commit 618f180.
antmicro · Sep 13, 2024 · 978c408 · 978c408
1 parent 4f31ca9
commit 978c408
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/src/components/Avatars.js b/src/components/Avatars.js
@@ -4,7 +4,7 @@ import { styled } from "styled-components";
 const MAX_AVATARS = 4;
 
 const AvatarsWrapper = styled.div`
-  min-width: ${(props) => props.n * 35}px;
+  width: 200px;
 
   .avatar {
     border-radius: 50%;
@@ -45,7 +45,7 @@ const AvatarPlaceholder = ({ n, usernames }) =>
 const Avatars = ({ users }) => {
   const nUserAvatarsToShow = users.length <= MAX_AVATARS ? users.length : 3;
 
-  return html` <${AvatarsWrapper} n=${Math.min(users.length, MAX_AVATARS)}>
+  return html` <${AvatarsWrapper}>
     ${nUserAvatarsToShow < users.length
       ? html`<${AvatarPlaceholder}
           n=${users.length - nUserAvatarsToShow}

diff --git a/src/components/ButtonGroup.js b/src/components/ButtonGroup.js
@@ -5,6 +5,8 @@ import DefaultButton from "./Buttons.js";
 
 const GroupContainer = styled.div`
   display: flex;
+  justify-content: flex-end;
+  align-items: center;
 `;
 
 const RadioButton = styled(DefaultButton)`

diff --git a/src/components/Topbar.js b/src/components/Topbar.js
@@ -15,11 +15,7 @@ const Topbar = styled.div`
   z-index: 10;
   position: sticky;
   top: 0;
-
-  display: grid;
-  grid-template-columns: repeat(5, 45px) min-content auto auto 150px ${(props) => props.nEditorModeButtons * 40 + 20}px;
-  align-items: center;
-
+  display: flex;
   width: 100%;
   height: 60px;
   background-color: var(--navbar-bg);
@@ -52,13 +48,20 @@ const Title = styled.div`
   white-space: nowrap;
   margin-left: 10px;
   font-family: "Lato";
-  overflow: hidden;
-  text-overflow: ellipsis;
+
   a {
     color: var(--blue-500);
   }
 `;
 
+const TopbarLeft = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: 5px;
+`;
+
 const Alert = styled(DefaultButton)`
   padding: 0px 15px;
   margin: 5px;
@@ -68,6 +71,18 @@ const Alert = styled(DefaultButton)`
   width: fit-content;
 `;
 
+const TopbarRight = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 15px;
+
+  button[active] {
+    pointer-events: none;
+  }
+`;
+
 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)")};
@@ -196,19 +211,24 @@ export const EditorTopbar = ({ alert, users, text, setMode, templatelist, button
   }
   const buttonsLeft = useMemo(() => buttons.map((b) => ({ ...b, icon: b.icon || icons[b.id] })).filter((b) => b.icon), []);
   const textButtons = useMemo(() => buttons.filter((b) => b.text && b.id !== "template-manager"), []);
-  return html` <${Topbar} nEditorModeButtons=${editorModeButtons.length}>
-    ${buttonsLeft.map(
-      (button) => html`
-        <${TopbarButton} className="icon" type="button" key=${button.id} title=${button.tooltip} name=${button.id} onClick=${button.action}>
-          ${typeof button.icon == "function" ? html`<${button.icon} />` : html`<img src=${button.icon} />`}
-        <//>
-      `,
-    )}
-    ${buttons.find((b) => b.id === "template-manager") && templatelist && html`<${TemplateManager} text=${text} templatelist=${templatelist} />`}
-    <span> ${alert && html`<${Alert}> ${alert} <//>`} </span>
-    <${Title} dangerouslySetInnerHTML=${{ __html: titleHtml }} />
-    <${Avatars} users=${users} />
-    <span> ${textButtons.map((b) => html`<${DefaultButton} type="button" onClick=${b.action}>${b.text}<//>`)} </span>
-    <${ButtonGroup} buttons=${editorModeButtons} initialClickedId=${2} />
+  return html` <${Topbar}>
+    <${TopbarLeft}>
+      ${buttonsLeft.map(
+        (button) => html`
+          <${TopbarButton} className="icon" type="button" key=${button.id} title=${button.tooltip} name=${button.id} onClick=${button.action}>
+            ${typeof button.icon == "function" ? html`<${button.icon} />` : html`<img src=${button.icon} />`}
+          <//>
+        `,
+      )}
+      ${buttons.find((b) => b.id === "template-manager") && templatelist && html`<${TemplateManager} text=${text} templatelist=${templatelist} />`}
+      ${alert && html`<${Alert}> ${alert} <//>`}
+      <${Title} dangerouslySetInnerHTML=${{ __html: titleHtml }} />
+    <//>
+    <${TopbarRight}>
+      <${Avatars} users=${users} />
+      ${textButtons.map((b) => html`<${DefaultButton} type="button" onClick=${b.action}>${b.text}<//>`)}
+
+      <${ButtonGroup} buttons=${editorModeButtons} initialClickedId=${2} />
+    <//>
   <//>`;
 };