client: Improve asset tab labels

superpowers · Oct 9, 2015 · 5749334 · 5749334
1 parent dfc0f3e
commit 5749334
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 29 deletions.
diff --git a/client/src/scripts/project.ts b/client/src/scripts/project.ts
@@ -345,7 +345,13 @@ function onSetEntryProperty(id: string, key: string, value: any) {
     case "name":
       entryElt.querySelector(".name").textContent = value;
       updateEntryElementPath(id);
-      refreshAssetTabElement(data.entries.byId[id]);
+
+      let walk = (entry: SupCore.data.EntryNode) => {
+        refreshAssetTabElement(entry);
+        if (entry.children != null) for (let child of entry.children) walk(child);
+      }
+
+      walk(data.entries.byId[id]);
       break;
   }
 }
@@ -782,12 +788,26 @@ function onDuplicateEntryClick() {
   });
 }
 
-function refreshAssetTabElement(entry: SupCore.data.EntryNode) {
-  let tabElt = ui.tabStrip.tabsRoot.querySelector(`[data-asset-id='${entry.id}']`);
+function refreshAssetTabElement(entry: SupCore.data.EntryNode, tabElt?: HTMLLIElement) {
+  if (tabElt == null) tabElt = ui.tabStrip.tabsRoot.querySelector(`[data-asset-id='${entry.id}']`);
   if (tabElt == null) return;
 
   let entryPath = data.entries.getPathFromId(entry.id);
-  tabElt.querySelector(".label").textContent = entryPath;
+  let entryLocation = "";
+  let entryName = entry.name;
+
+  let lastSlash = entryPath.lastIndexOf("/");
+  if (lastSlash !== -1) entryLocation = entryPath.slice(0, lastSlash);
+
+  const maxEntryLocationLength = 20;
+  while (entryLocation.length > maxEntryLocationLength) {
+    let slashIndex = entryLocation.indexOf("/", 2);
+    if (slashIndex === -1) break;
+    entryLocation = `…/${entryLocation.slice(slashIndex + 1)}`;
+  }
+
+  tabElt.querySelector(".label .location").textContent = entryLocation;
+  tabElt.querySelector(".label .name").textContent = entryName;
   tabElt.title = entryPath;
 }
 
@@ -801,27 +821,27 @@ function createAssetTabElement(entry: SupCore.data.EntryNode) {
     tabElt.appendChild(iconElt);
   }
 
-  let outerTabLabel = document.createElement("div");
-  outerTabLabel.classList.add("outer-label");
-  tabElt.appendChild(outerTabLabel);
+  let tabLabel = document.createElement("div");
+  tabLabel.classList.add("label");
+  tabElt.appendChild(tabLabel);
 
-  let innerTabLabel = document.createElement("div");
-  innerTabLabel.classList.add("inner-label");
-  outerTabLabel.appendChild(innerTabLabel);
+  let tabLabelLocation = document.createElement("div");
+  tabLabelLocation.classList.add("location");
+  tabLabel.appendChild(tabLabelLocation);
 
-  let tabLabel = document.createElement("span");
-  tabLabel.classList.add("label");
-  innerTabLabel.appendChild(tabLabel);
+  let tabLabelName = document.createElement("div");
+  tabLabelName.classList.add("name");
+  tabLabel.appendChild(tabLabelName);
 
   let closeButton = document.createElement("button");
   closeButton.classList.add("close");
   closeButton.addEventListener("click", () => { onTabClose(tabElt); });
   tabElt.appendChild(closeButton);
 
-  let entryPath = data.entries.getPathFromId(entry.id);
-  tabLabel.textContent = entryPath;
-  tabElt.title = entryPath;
   (<any>tabElt.dataset).assetId = entry.id;
+
+  refreshAssetTabElement(entry, tabElt);
+
   return tabElt;
 }
 

diff --git a/client/src/styles/tabsBar.styl b/client/src/styles/tabsBar.styl
@@ -11,24 +11,25 @@
     width calc(24px + 0.5em)
     pointer-events none
 
-  .outer-label
-    width 70%
-    margin-left auto
-    margin-right auto
-    text-align right
-    overflow hidden
-    white-space nowrap
-    pointer-events none
-
-  .inner-label
-    float right
-
   .label
     pointer-events none
     flex 1
-    overflow-x hidden
+    overflow hidden
     text-overflow ellipsis
     white-space nowrap
+    display flex
+    flex-flow column
+
+    .location
+      font-size 10px
+      overflow hidden
+      text-overflow ellipsis
+      &:empty { display: none; }
+      margin-bottom -4px
+
+    .name
+      overflow-x hidden
+      text-overflow ellipsis
 
   .close
     margin-right 0.25em