[IDE] #3002 - Tab hints (#3003)

* Fixed #3002 * Fixed overflow tab hint
eclipse-dirigible · Nov 20, 2023 · 0d3dc78 · 0d3dc78
1 parent 655828f
commit 0d3dc78
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/...esources/resources-core/src/main/resources/META-INF/dirigible/resources-core/ui/layout.js b/...esources/resources-core/src/main/resources/META-INF/dirigible/resources-core/ui/layout.js
@@ -946,22 +946,22 @@ angular.module('ideLayout', ['idePerspective', 'ideEditors', 'ideMessageHub', 'i
 
                     duplicatedTabs.forEach(tabs => {
                         if (tabs.length == 1) {
-                            //no duplication so just reset the description
-                            tabs[0].description = '';
+                            // no duplication so just reset the hint
+                            tabs[0].hint = '';
                             return;
                         }
 
                         const paths = tabs.map(getTabPath);
                         const shortenedPaths = shortenPaths(paths);
 
-                        tabs.forEach((tab, index) => tab.description = shortenedPaths[index]);
+                        tabs.forEach((tab, index) => tab.hint = shortenedPaths[index]);
                     });
                 }
 
                 function shortenPaths(paths) {
                     const shortenedPaths = [];
                     const pathSeparator = '/';
-                    const ellipsis = '..';
+                    const ellipsis = '…';
 
                     let match;
                     for (let pathIndex = 0; pathIndex < paths.length; pathIndex++) {

diff --git a/...-core/src/main/resources/META-INF/dirigible/resources-core/ui/templates/splittedTabs.html b/...-core/src/main/resources/META-INF/dirigible/resources-core/ui/templates/splittedTabs.html
@@ -8,16 +8,16 @@
             <fd-icon-tab-bar ng-if="!!pane.tabs" side-padding="sm" unfocused="!isFocused(pane)"
                 selected-tab-id="pane.selectedTab">
                 <fd-icon-tab-bar-tablist ng-show="!hideTabs" dg-tabs-overflowable>
-                    <fd-icon-tab-bar-tab ng-repeat="tab in pane.tabs" label="{{tab.label}}" title="{{tab.description}}"
-                        tab-id="{{tab.id}}" ng-click="onTabClick(pane, tab.id)" on-close="onRemoveTab(tab)"
-                        has-badge="tab.dirty" is-hidden="tab.isHidden"
+                    <fd-icon-tab-bar-tab ng-repeat="tab in pane.tabs" label="{{tab.label}}" tab-hint="{{tab.hint}}"
+                        title="{{tab.label}}" tab-id="{{tab.id}}" ng-click="onTabClick(pane, tab.id)"
+                        on-close="onRemoveTab(tab)" has-badge="tab.dirty" is-hidden="tab.isHidden"
                         ng-attr-data-file-path="{{isEditorTab() && tab.params.file || undefined}}">
                     </fd-icon-tab-bar-tab>
                     <fd-icon-tab-bar-overflow label="More"
                         ng-class="isMoreTabsButtonVisible(pane) ? '' : 'dg-invisible'">
                         <fd-icon-tab-bar-overflow-item ng-if="tab.isHidden" ng-repeat="tab in pane.tabs"
-                            label="{{tab.label}}" tab-id="{{tab.id}}-overflow" has-badge="tab.dirty"
-                            ng-click="pane.selectedTab = tab.id">
+                            label="{{tab.label}}" title="{{tab.label}}" tab-hint="{{tab.hint}}"
+                            tab-id="{{tab.id}}-overflow" has-badge="tab.dirty" ng-click="pane.selectedTab = tab.id">
                         </fd-icon-tab-bar-overflow-item>
                     </fd-icon-tab-bar-overflow>
                     <dg-icon-tab-bar-buttons ng-if="canSplit(pane)" dg-align="right">

diff --git a/...sources/resources-core/src/main/resources/META-INF/dirigible/resources-core/ui/widgets.js b/...sources/resources-core/src/main/resources/META-INF/dirigible/resources-core/ui/widgets.js
@@ -5406,6 +5406,7 @@ angular.module('ideUI', ['ngAria', 'ideMessageHub'])
          * dgIcon: String - Icon class.
          * dgHref: String - Link.
          * tabId: String - The id of the tab.
+         * tabHint: String - Show a small text hint next to the label. This is ignored in icon and process mode. 
          * dgState: String - State of the tab. Possible options are 'positive', 'negative', 'critical' and 'informative'.
          * isLastStep: Boolean - If the tabs is the last step of a process.
          * onClose: Function - Function that will be called when the tab close button is clicked. The tab will have an "X" button and on click, the tab ID will be passed as a parameter.
@@ -5424,6 +5425,7 @@ angular.module('ideUI', ['ngAria', 'ideMessageHub'])
                 dgIcon: '@?',
                 dgHref: '@?',
                 tabId: '@',
+                tabHint: '@?',
                 dgState: '@?',
                 isLastStep: '<?',
                 onClose: '&?',
@@ -5468,7 +5470,7 @@ angular.module('ideUI', ['ngAria', 'ideMessageHub'])
                     </div>
                     <span ng-if="counter && !dgIcon" class="fd-icon-tab-bar__counter">{{counter}}</span>
                     <span ng-if="hasBadge && !dgIcon" class="fd-icon-tab-bar__badge"></span>
-                    <span ng-if="label && !dgIcon" class="fd-icon-tab-bar__tag">{{label}}</span>
+                    <span ng-if="label && !dgIcon" class="fd-icon-tab-bar__tag">{{label}}<span class="dg-icon-tab-hint" ng-if="tabHint">{{tabHint}}</span></span>
                     <div ng-if="label && isFilter()" class="fd-icon-tab-bar__label">{{label}}</div>
                     <div ng-if="dgIcon && description" class="fd-icon-tab-bar__details">
                         <span class="fd-icon-tab-bar__counter">{{counter}}</span>
@@ -5557,6 +5559,7 @@ angular.module('ideUI', ['ngAria', 'ideMessageHub'])
          * dgIcon: String - Icon class.
          * dgHref: String - Link.
          * tabId: String - The id of the tab.
+         * tabHint: String - Show a small text hint next to the label. This is ignored in icon and process mode. 
          * dgState: String - State of the tab. Possible options are 'positive', 'negative', 'critical' and 'informative'.
          * onClose: Function - Function that will be called when the tab close button is clicked. The tab will have an "X" button and on click, the tab ID will be passed as a parameter.
          */
@@ -5571,6 +5574,7 @@ angular.module('ideUI', ['ngAria', 'ideMessageHub'])
                 dgIcon: '@?',
                 dgHref: '@?',
                 tabId: '@',
+                tabHint: '@?',
                 dgState: '@?',
                 onClose: '&?',
             },
@@ -5596,7 +5600,7 @@ angular.module('ideUI', ['ngAria', 'ideMessageHub'])
                             <i class="{{dgIcon}}" role="presentation"></i>
                         </span>
                     </span>
-                    <span class="fd-list__title fd-icon-tab-bar__list-item-title">{{label}}</span>
+                    <span class="fd-list__title fd-icon-tab-bar__list-item-title">{{label}}<span class="dg-icon-tab-hint" ng-if="tabHint">{{tabHint}}</span></span>
                     <span ng-if="counter" class="fd-list__counter fd-icon-tab-bar__list-item-counter">{{counter}}</span>
                     <span ng-if="hasBadge" class="fd-icon-tab-bar__badge"></span>
                 </a>

diff --git a/...es/resources-resources/src/main/resources/META-INF/dirigible/resources/styles/widgets.css b/...es/resources-resources/src/main/resources/META-INF/dirigible/resources/styles/widgets.css
@@ -391,6 +391,14 @@ body {
   position: absolute !important;
 }
 
+.dg-icon-tab-hint {
+  opacity: .75;
+  margin-left: 0.5em;
+  white-space: pre;
+  font-size: var(--sapFontSmallSize, .9em);
+  font-style: italic;
+}
+
 /* Tool header fixes */
 .fd-button--tool-header {
   width: auto;