Enhance styling in actions page (#37323)

- Adjust workflow graph for better visualization
- change summary icon to home icon
- use octicon-file-removed for expired artifacts

routers/web/devtest/mock_actions.go

@@ -126,10 +126,10 @@ func MockActionsRunsJobs(ctx *context.Context) {
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
 		ID:       runID * 10,
 		JobID:    "job-100",
-		Name:     "job 100",
+		Name:     "job 100 (testsubname)",
 		Status:   actions_model.StatusRunning.String(),
 		CanRerun: true,
-		Duration: "1h",
+		Duration: "1h23m45s",
 	})
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
 		ID:       runID*10 + 1,

web_src/js/components/RepoActionView.vue

@@ -95,7 +95,7 @@ async function deleteArtifact(name: string) {
       <div class="action-view-left">
         <!-- summary -->
         <a class="job-brief-item silenced" :href="run.link" :class="!props.jobId ? 'selected' : ''">
-          <SvgIcon name="octicon-list-unordered"/>
+          <SvgIcon name="octicon-home"/>
           <span class="gt-ellipsis">{{ locale.summary }}</span>
         </a>
 
@@ -136,7 +136,7 @@ async function deleteArtifact(name: string) {
                 </a>
               </template>
               <span v-else class="flex-text-block tw-flex-1 tw-text-text-light-2">
-                <SvgIcon name="octicon-file"/>
+                <SvgIcon name="octicon-file-removed"/>
                 <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
                 <span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
               </span>

web_src/js/components/WorkflowGraph.vue

@@ -83,9 +83,11 @@ const saveState = () => {
   localUserSettings.setJsonObject(settingKeyStates, Object.fromEntries(sortedStates));
 };
 
+const minNodeWidth = 168;
+const maxNodeWidth = 232;
 const nodeWidth = computed(() => {
-  const maxNameLength = Math.max(...props.jobs.map(j => j.name.length));
+  const maxNameLength = Math.max(...props.jobs.map(j => j.name.length), 0);
-  return Math.min(Math.max(140, maxNameLength * 8), 180);
+  return Math.min(Math.max(minNodeWidth, maxNameLength * 8), maxNodeWidth);
 });
 
 const horizontalSpacing = computed(() => nodeWidth.value + 84);
@@ -342,8 +344,8 @@ const graphMetrics = computed(() => {
   };
 })
 
-const nodeHeight = 48;
+const nodeHeight = 52;
-const verticalSpacing = 88;
+const verticalSpacing = 90;
 const margin = 40;
 
 const minScale = 0.3;
@@ -589,7 +591,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           :d="edge.path"
           fill="none"
           stroke="var(--color-secondary-alpha-50)"
-          stroke-width="1.75"
+          stroke-width="1.5"
           :class="['node-edge', { 'highlighted-edge': isEdgeHighlighted(edge) }]"
         />
 
@@ -608,10 +610,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :y="job.y"
             :width="nodeWidth"
             :height="nodeHeight"
-            rx="10"
+            rx="8"
-            fill="var(--color-button)"
+            fill="var(--color-box-body)"
-            stroke="var(--color-light-border)"
+            stroke="var(--color-secondary)"
-            stroke-width="1.25"
+            stroke-width="1"
             class="job-rect"
           />
 
@@ -619,7 +621,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             v-if="nodesWithIncomingEdge.has(job.id)"
             :cx="job.x"
             :cy="job.y + nodeHeight / 2"
-            r="6"
+            r="4.5"
             class="node-port"
           />
 
@@ -627,13 +629,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             v-if="nodesWithOutgoingEdge.has(job.id)"
             :cx="job.x + nodeWidth"
             :cy="job.y + nodeHeight / 2"
-            r="6"
+            r="4.5"
             class="node-port"
           />
 
           <foreignObject
             :x="job.x + 10"
-            :y="job.y + 14"
+            :y="job.y + 16"
             width="20"
             height="20"
             class="job-status-fg-obj"
@@ -644,10 +646,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           </foreignObject>
 
           <foreignObject
-            :x="job.x + 36"
+            :x="job.x + 38"
-            :y="job.y"
+            :y="job.y + 2"
-            :width="nodeWidth - 40"
+            :width="nodeWidth - 44"
-            :height="nodeHeight"
+            :height="nodeHeight - 4"
           >
             <div class="job-text-wrap">
               <span class="job-name">{{ job.name }}</span>
@@ -707,7 +709,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 .graph-container {
   flex: 1;
   overflow: hidden;
-  padding: 12px 16px 20px;
+  padding: 10px 14px 18px;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   cursor: grab;
   position: relative;
@@ -730,7 +732,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .highlighted-edge {
-  stroke-width: 2.25 !important;
+  stroke-width: 2 !important;
   stroke: var(--color-workflow-edge-hover) !important;
 }
 
@@ -749,18 +751,20 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: space-between;
+  align-items: flex-start;
-  gap: 4px;
+  justify-content: center;
-  padding-right: 8px;
+  gap: 1px;
+  padding: 4px 8px 4px 0;
+  overflow: hidden;
 }
 
 .job-name {
-  flex: 1;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   user-select: none;
@@ -768,10 +772,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-duration {
-  font-size: 11px;
+  font-size: 10px;
+  line-height: 1.2;
   color: var(--color-text-light-2);
   white-space: nowrap;
-  flex-shrink: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   user-select: none;
   pointer-events: none;
 }
@@ -792,11 +799,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 .node-port {
   fill: var(--color-box-body);
   stroke: var(--color-light-border);
-  stroke-width: 1.5;
+  stroke-width: 1.25;
+  opacity: 0.85;
   pointer-events: none;
 }
 
 .node-edge {
   transition: stroke-width 0.2s ease, opacity 0.2s ease;
+  opacity: 0.75;
 }
 </style>

web_src/js/svg.ts

@@ -32,6 +32,7 @@ import octiconFile from '../../public/assets/img/svg/octicon-file.svg';
 import octiconFileCode from '../../public/assets/img/svg/octicon-file-code.svg';
 import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg';
 import octiconFileDirectoryOpenFill from '../../public/assets/img/svg/octicon-file-directory-open-fill.svg';
+import octiconFileRemoved from '../../public/assets/img/svg/octicon-file-removed.svg';
 import octiconFileSubmodule from '../../public/assets/img/svg/octicon-file-submodule.svg';
 import octiconFileSymlinkFile from '../../public/assets/img/svg/octicon-file-symlink-file.svg';
 import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg';
@@ -45,6 +46,7 @@ import octiconGitPullRequestDraft from '../../public/assets/img/svg/octicon-git-
 import octiconGrabber from '../../public/assets/img/svg/octicon-grabber.svg';
 import octiconHeading from '../../public/assets/img/svg/octicon-heading.svg';
 import octiconHorizontalRule from '../../public/assets/img/svg/octicon-horizontal-rule.svg';
+import octiconHome from '../../public/assets/img/svg/octicon-home.svg';
 import octiconImage from '../../public/assets/img/svg/octicon-image.svg';
 import octiconIssueClosed from '../../public/assets/img/svg/octicon-issue-closed.svg';
 import octiconIssueOpened from '../../public/assets/img/svg/octicon-issue-opened.svg';
@@ -116,6 +118,7 @@ const svgs = {
   'octicon-file-code': octiconFileCode,
   'octicon-file-directory-fill': octiconFileDirectoryFill,
   'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill,
+  'octicon-file-removed': octiconFileRemoved,
   'octicon-file-submodule': octiconFileSubmodule,
   'octicon-file-symlink-file': octiconFileSymlinkFile,
   'octicon-filter': octiconFilter,
@@ -129,6 +132,7 @@ const svgs = {
   'octicon-grabber': octiconGrabber,
   'octicon-heading': octiconHeading,
   'octicon-horizontal-rule': octiconHorizontalRule,
+  'octicon-home': octiconHome,
   'octicon-image': octiconImage,
   'octicon-issue-closed': octiconIssueClosed,
   'octicon-issue-opened': octiconIssueOpened,