[#63824] Handle long document titles

antmicro · Sep 18, 2024 · 4d44712 · 4d44712
1 parent 1d0c461
commit 4d44712
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 36 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`
-  width: 200px;
+  min-width: ${(props) => props.n * 35}px;
 
   .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}>
+  return html` <${AvatarsWrapper} n=${Math.min(users.length, MAX_AVATARS)}>
     ${nUserAvatarsToShow < users.length
       ? html`<${AvatarPlaceholder}
           n=${users.length - nUserAvatarsToShow}

diff --git a/src/components/ButtonGroup.js b/src/components/ButtonGroup.js
@@ -5,8 +5,6 @@ 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,7 +15,15 @@ const Topbar = styled.div`
   z-index: 10;
   position: sticky;
   top: 0;
-  display: flex;
+
+  display: grid;
+  grid-template-columns: min-content min-content auto auto min-content min-content 15px;
+  align-items: center;
+
+  .buttons-left {
+    display: flex;
+  }
+
   width: 100%;
   height: 60px;
   background-color: var(--navbar-bg);
@@ -48,20 +56,13 @@ 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;
@@ -71,18 +72,6 @@ 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)")};
@@ -212,7 +201,7 @@ 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}>
-    <${TopbarLeft}>
+    <div class="buttons-left">
       ${buttonsLeft.map(
         (button) => html`
           <${TopbarButton} className="icon" type="button" key=${button.id} title=${button.tooltip} name=${button.id} onClick=${button.action}>
@@ -221,14 +210,11 @@ export const EditorTopbar = ({ alert, users, text, setMode, templatelist, button
         `,
       )}
       ${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} />
-    <//>
+    </div>
+    <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} />
   <//>`;
 };