Fix visual bugs

adaptyvbio · Jul 3, 2023 · 13bd59b · 13bd59b
1 parent 52d27d1
commit 13bd59b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 18 deletions.
diff --git a/app/shared/src/types/diagnostic.ts b/app/shared/src/types/diagnostic.ts
@@ -1,12 +1,13 @@
 import type { DocumentId } from './draft';
+import type { RichText } from './rich-text';
 import type { Brand } from './util';
 
 
 export type DiagnosticId = Brand<number, 'DiagnosticId'>;
 
 export type Diagnostic = {
   id: DiagnosticId | null;
-  description: string[];
+  description: RichText | null;
   message: string;
   name: string;
   references: DiagnosticReference[];

diff --git a/client/src/components/report.tsx b/client/src/components/report.tsx
@@ -33,7 +33,10 @@ export function ReportDiagnostic(props: {
     <div className={styles.entryRoot} data-kind={props.kind}>
       <Icon name={{ error: 'report', warning: 'warning' }[props.kind]} className={styles.entryIcon} />
       <div className={styles.entryTitle}>{props.diagnostic.message}</div>
-      {/* <button type="button" className={styles.entryLocation}>foo.yml 13:8</button> */}
+      {/* <button type="button" className={styles.entryLocation}>5 minutes ago</button> */}
+      {props.diagnostic.description && (
+        <p className={styles.entryDescription}>{formatRichText(props.diagnostic.description)}</p>
+      )}
       {/* <p className={styles.entryDescription}>This line contains a syntax error. See the documentation for details.</p> */}
       {/* TODO: Transform to dropdown */}
       {/* <div className={styles.entryActions}>
@@ -83,6 +86,7 @@ export function ReportEffect(props: {
     <div className={styles.entryRoot} data-kind="effect">
       <Icon name={effectInfo.icon} className={styles.entryIcon} />
       <div className={styles.entryTitle}>{effectInfo.message}</div>
+      <button type="button" className={styles.entryLocation}>12 minutes ago</button>
       {effectInfo.description && (
         <p className={styles.entryDescription}>{formatRichText(effectInfo.description)}</p>
       )}

diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx
@@ -8,6 +8,7 @@ import type { Host } from '../host';
 import { HostInfo } from '../interfaces/host';
 import * as util from '../util';
 import { ContextMenuArea } from './context-menu-area';
+import { StaticSelect } from './static-select';
 
 
 const CollapsedStorageKey = 'sidebarCollapsed';
@@ -182,14 +183,22 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 ))}
               </select>
             )} */}
-            <div className={styles.headerValueRoot}>
-              <img src={this.props.hostInfo.imageUrl!} className={styles.headerValueIcon} />
-              <div className={styles.headerValueTitle}>{this.props.hostInfo.label}</div>
-              {/* <div className={styles.headerValueSubtitle}>{this.props.hostInfo.description}</div> */}
-              <div className={styles.headerValueExpand}>
-                <span className="material-symbols-sharp">unfold_more</span>
+            <StaticSelect
+              options={[{ id: '_', label: this.props.hostInfo.label }]}
+              selectedOptionId="_">
+              <div className={styles.headerValueRoot}>
+                {this.props.hostInfo.imageUrl && (
+                  <img src={this.props.hostInfo.imageUrl} className={styles.headerValueIcon} />
+                )}
+                <div className={styles.headerValueTitle}>{this.props.hostInfo.label}</div>
+                {this.props.hostInfo.description && (
+                  <div className={styles.headerValueSubtitle}>{this.props.hostInfo.description}</div>
+                )}
+                <div className={styles.headerValueExpand}>
+                  <span className="material-symbols-sharp">unfold_more</span>
+                </div>
               </div>
-            </div>
+            </StaticSelect>
           </div>
           <nav className={styles.navRoot}>
             {groups.map((group) => (

diff --git a/client/src/interfaces/host.ts b/client/src/interfaces/host.ts
@@ -3,7 +3,7 @@ import type { Brand } from 'pr1-shared';
 
 export interface HostInfo {
   id: HostInfoId;
-  description: string;
+  description: string | null;
   imageUrl: string | null;
   label: string;
   local: boolean;

diff --git a/client/src/views/conf.tsx b/client/src/views/conf.tsx
@@ -386,7 +386,7 @@ export interface ConfPageComponentProps {
 
 function GeneralConfPage(props: ConfPageComponentProps) {
   let [automaticSave, setAutomaticSave] = props.app.store.usePersistent('editor.automaticSave');
-  let [graphDirection, setGraphDirection] = props.app.store.usePersistent('graph.direction');
+  // let [graphDirection, setGraphDirection] = props.app.store.usePersistent('graph.direction');
   let [shortcutDisplayMode, setShortcutDisplayMode] = props.app.store.usePersistent('general.shortcutDisplayMode');
 
   return (
@@ -401,7 +401,7 @@ function GeneralConfPage(props: ConfPageComponentProps) {
         <p className={formStyles.checkDescription}>Save the editor's contents automatically at regular intervals.</p>
       </label>
 
-      <Form.Select
+      {/* <Form.Select
         label="Graph direction"
         value={graphDirection}
         onInput={setGraphDirection}
@@ -410,7 +410,7 @@ function GeneralConfPage(props: ConfPageComponentProps) {
             label: 'Vertical' },
           { id: GraphDirection.Horizontal,
             label: 'Horizontal' }
-        ]} />
+        ]} /> */}
 
       <h3>Shortcuts</h3>
 

diff --git a/client/styles/components/sidebar.module.scss b/client/styles/components/sidebar.module.scss
@@ -93,12 +93,23 @@
     }
 
     &Title {
+      grid-row: 1;
+
       font-size: 1.1rem;
       font-weight: 500;
+
+      @include text-ellipsis();
     }
 
     &Subtitle {
+      grid-row: 2;
       color: #666;
+
+      @include text-ellipsis();
+    }
+
+    &Title:first-child, &Title:first-child + &Subtitle {
+      grid-column-end: span 2;
     }
 
     &Expand {
@@ -160,11 +171,7 @@
       background-color: #eee;
       border-radius: 4px;
 
-      font-variation-settings:
-        'FILL' 0,
-        'wght' 200,
-        'GRAD' 200,
-        'opsz' 24;
+      @include icon();
     }
   }
 }