chore: update margins to align (#21826)

2024-12-12 11:50:22 +03:00 · 2023-03-20 20:45:32 -07:00 · 2023-03-20 20:45:32 -07:00 · 48eea13259
commit 48eea13259
parent a6468b73b2
8 changed files with 73 additions and 50 deletions
--- a/packages/trace-viewer/src/ui/snapshotTab.css
+++ b/packages/trace-viewer/src/ui/snapshotTab.css
@ -24,6 +24,10 @@
  overflow: hidden;
 }

+.snapshot-tab .toolbar {
+  background-color: var(--vscode-sideBar-background);
+}
+
 .snapshot-controls {
  flex: none;
  background-color: var(--vscode-sideBar-background);
--- a/packages/trace-viewer/src/ui/snapshotTab.tsx
+++ b/packages/trace-viewer/src/ui/snapshotTab.tsx
@ -150,7 +150,7 @@ export const SnapshotTab: React.FunctionComponent<{
        window.open(popoutUrl || '', '_blank');
      }}></ToolbarButton>
    </Toolbar>
-    {pickerVisible && <Toolbar>
+    {pickerVisible && <Toolbar noMinHeight={true}>
      <ToolbarButton icon='microscope' title='Pick locator' disabled={!popoutUrl} toggled={isInspecting} onClick={() => {
        setIsInspecting(!isInspecting);
      }}></ToolbarButton>
--- a/packages/trace-viewer/src/ui/watchMode.css
+++ b/packages/trace-viewer/src/ui/watchMode.css
@ -47,6 +47,7 @@
  user-select: none;
 }

+.list-view-entry.selected .watch-mode-list-item-time,
 .list-view-entry.highlighted .watch-mode-list-item-time {
  display: none;
 }
@ -67,7 +68,7 @@

 .watch-mode-sidebar img {
  flex: none;
-  margin-left: 4px;
+  margin-left: 6px;
  width: 24px;
  height: 24px;
 }
@ -107,6 +108,11 @@
  flex: none;
  display: flex;
  flex-direction: column;
+  margin: 2px 0;
+}
+
+.filter-list {
+  padding: 0 10px 10px 10px;
 }

 .filter-title,
@ -123,15 +129,18 @@
 }

 .filter-summary {
-  line-height: 21px;
-  margin-top: 2px;
-  margin-left: 20px;
+  line-height: 24px;
+  margin-left: 24px;
 }

 .filter-summary .filter-label {
  margin-left: 5px;
 }

+.filter-entry {
+  line-height: 24px;
+}
+
 .filter-entry label {
  display: flex;
  align-items: center;
--- a/packages/trace-viewer/src/ui/watchMode.tsx
+++ b/packages/trace-viewer/src/ui/watchMode.tsx
@ -162,7 +162,7 @@ export const WatchModeView: React.FC<{}> = ({
        </div>
      </div>
      <div className='vbox watch-mode-sidebar'>
-        <Toolbar noShadow={true}>
+        <Toolbar noShadow={true} noMinHeight={true}>
          <img src='icon-32x32.png' />
          <div className='section-title'>Playwright</div>
          <ToolbarButton icon='color-mode' title='Toggle color mode' onClick={() => toggleTheme()} />
@ -238,40 +238,43 @@ const FiltersView: React.FC<{
          if (e.key === 'Enter')
            runTests();
        }} />}>
-      {<div className='filter-title' title={statusLine} onClick={() => setExpanded(false)}><span className='filter-label'>Status:</span> {statusLine}</div>}
-      {[...statusFilters.entries()].map(([status, value]) => {
-        return <div className='filter-entry'>
-          <label>
-            <input type='checkbox' checked={value} onClick={() => {
-              const copy = new Map(statusFilters);
-              copy.set(status, !copy.get(status));
-              setStatusFilters(copy);
-            }}/>
-            <div>{status}</div>
-          </label>
-        </div>;
-      })}
-
-      {<div className='filter-title' title={projectsLine}><span className='filter-label'>Projects:</span> {projectsLine}</div>}
-      {[...projectFilters.entries()].map(([projectName, value]) => {
-        return <div className='filter-entry'>
-          <label>
-            <input type='checkbox' checked={value} onClick={() => {
-              const copy = new Map(projectFilters);
-              copy.set(projectName, !copy.get(projectName));
-              setProjectFilters(copy);
-              const configFile = testModel?.config?.configFile;
-              if (configFile)
-                settings.setObject(configFile + ':projects', [...copy.entries()].filter(([_, v]) => v).map(([k]) => k));
-            }}/>
-            <div>{projectName}</div>
-          </label>
-        </div>;
-      })}
    </Expandable>
-    {!expanded && <div className='filter-summary' title={'Status: ' + statusLine + '\nProjects: ' + projectsLine} onClick={() => setExpanded(true)}>
+    <div className='filter-summary' title={'Status: ' + statusLine + '\nProjects: ' + projectsLine} onClick={() => setExpanded(!expanded)}>
      <span className='filter-label'>Status:</span> {statusLine}
      <span className='filter-label'>Projects:</span> {projectsLine}
+    </div>
+    {expanded && <div className='hbox' style={{ marginLeft: 14 }}>
+      <div className='filter-list'>
+        {[...statusFilters.entries()].map(([status, value]) => {
+          return <div className='filter-entry'>
+            <label>
+              <input type='checkbox' checked={value} onClick={() => {
+                const copy = new Map(statusFilters);
+                copy.set(status, !copy.get(status));
+                setStatusFilters(copy);
+              }}/>
+              <div>{status}</div>
+            </label>
+          </div>;
+        })}
+      </div>
+      <div className='filter-list'>
+        {[...projectFilters.entries()].map(([projectName, value]) => {
+          return <div className='filter-entry'>
+            <label>
+              <input type='checkbox' checked={value} onClick={() => {
+                const copy = new Map(projectFilters);
+                copy.set(projectName, !copy.get(projectName));
+                setProjectFilters(copy);
+                const configFile = testModel?.config?.configFile;
+                if (configFile)
+                  settings.setObject(configFile + ':projects', [...copy.entries()].filter(([_, v]) => v).map(([k]) => k));
+              }}/>
+              <div>{projectName}</div>
+            </label>
+          </div>;
+        })}
+      </div>
    </div>}
  </div>;
 };
@ -404,15 +407,17 @@ const TestList: React.FC<{
      return <div className='hbox watch-mode-list-item'>
        <div className='watch-mode-list-item-title'>{treeItem.title}</div>
        {!!treeItem.duration && <div className='watch-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
-        <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
-        <ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton>
-        {!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => {
-          if (watchedTreeIds.value.has(treeItem.id))
-            watchedTreeIds.value.delete(treeItem.id);
-          else
-            watchedTreeIds.value.add(treeItem.id);
-          setWatchedTreeIds({ ...watchedTreeIds });
-        }} toggled={watchedTreeIds.value.has(treeItem.id)}></ToolbarButton>}
+        <Toolbar noMinHeight={true} noShadow={true}>
+          <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
+          <ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton>
+          {!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => {
+            if (watchedTreeIds.value.has(treeItem.id))
+              watchedTreeIds.value.delete(treeItem.id);
+            else
+              watchedTreeIds.value.add(treeItem.id);
+            setWatchedTreeIds({ ...watchedTreeIds });
+          }} toggled={watchedTreeIds.value.has(treeItem.id)}></ToolbarButton>}
+        </Toolbar>
      </div>;
    }}
    icon={treeItem => {
--- a/packages/web/src/common.css
+++ b/packages/web/src/common.css
@ -145,6 +145,10 @@ body.dark-mode ::-webkit-scrollbar-track:hover {
  animation: spin 1s infinite linear;
 }

+::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+
@keyframes spin {
  100% {
    transform: rotate(360deg);
--- a/packages/web/src/components/tabbedPane.css
+++ b/packages/web/src/components/tabbedPane.css
@ -20,6 +20,10 @@
  overflow: hidden;
 }

+.tabbed-pane .toolbar {
+  background-color: var(--vscode-sideBar-background);
+}
+
 .tabbed-pane .tab-content {
  display: flex;
  flex: auto;
@ -28,7 +32,6 @@

 .tabbed-pane-tab {
  padding: 2px 10px 0 10px;
-  margin-right: 4px;
  cursor: pointer;
  display: flex;
  flex: none;
--- a/packages/web/src/components/toolbar.css
+++ b/packages/web/src/components/toolbar.css
@ -17,12 +17,11 @@
 .toolbar {
  position: relative;
  display: flex;
-  background-color: var(--vscode-sideBar-background);
  color: var(--vscode-sideBarTitle-foreground);
  min-height: 35px;
  align-items: center;
  flex: none;
-  padding-right: 2px;
+  padding-right: 4px;
 }

 .toolbar:after {
--- a/packages/web/src/components/toolbarButton.css
+++ b/packages/web/src/components/toolbarButton.css
@ -21,7 +21,6 @@
  color: var(--vscode-sideBarTitle-foreground);
  background: transparent;
  padding: 4px;
-  margin: 0 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;