Commit 3f9f9c54 authored by benjaminParisel's avatar benjaminParisel Committed by abirembaut

feat(home): Improve home to display id of artifact (#2410)

* Display Folder in artifact tooltip
* Use black tooltip to display name and id

Covers [BS-18202](https://bonitasoft.atlassian.net/browse/BS-18202)
parent 68a602fc
......@@ -30,7 +30,7 @@
</ul>
</div>
<button type="button" id="export" class="btn btn-bonita-primary" ng-disabled="!formName.$valid" ng-click="vm.saveAndExport(vm.page)"
title="{{ 'Export' | translate }}">
uib-tooltip="{{ 'Export' | translate }}" tooltip-placement="bottom" tooltip-popup-delay="300">
<i class="ui-icon ui-export"></i>
</button>
</form>
......@@ -41,6 +41,6 @@
<div resolutions-bar id="resolutions" class="btn-group"></div>
</div>
<div class="EditorHeader-help">
<button class="btn btn-bonita-help" open-help editor-mode="{{vm.mode}}" title="{{'Open help' | translate}}"><i class="fa fa-question-circle"></i></button>
<button class="btn btn-bonita-help" open-help editor-mode="{{vm.mode}}" uib-tooltip="{{ 'Open help' | translate }}" tooltip-placement="bottom" tooltip-popup-delay="300"><i class="fa fa-question-circle"></i></button>
</div>
</div>
......@@ -31,7 +31,8 @@
'Delete': this.gettextCatalog.getString('Delete'),
'Export': this.gettextCatalog.getString('Export'),
'Rename': this.gettextCatalog.getString('Rename'),
'Last Update:': this.gettextCatalog.getString('Last Update:')
'Last Update:': this.gettextCatalog.getString('Last Update:'),
'In folder:': this.gettextCatalog.getString('In folder ')
}[key] || key;
}
......
......@@ -11,9 +11,14 @@
class="Artifact-link Artifact-link--primary">
<span ng-if="artifact.icon" class="Artifact-icon"><identicon name="{{artifact.id}}" size="25" foreground-color="[198, 199, 228, 255]" background-color="[0,0,0,0]"></identicon></span>
<i ng-if="!artifact.icon" class="ui-icon ui-{{:: artifact.type }}s Artifact-icon"
title="{{:: artifact.type }}"></i>
<span title="{{artifact.name }}" class="Artifact-text">
<span class="Artifact-name">{{artifact.name }}</span>
uib-tooltip="{{:: artifact.type }}"
tooltip-popup-delay="500">
</i>
<span class="Artifact-text">
<span class="Artifact-name"
uib-tooltip-template="'js/home/artifact-list/artifact-tooltip-template.html'"
tooltip-popup-delay="500"
tooltip-placement="top-left">{{artifact.name}}</span>
<span class="Artifact-metadata"
>{{:: artifactList.translateKeys('Last Update:') }} {{:: artifact.lastUpdate | date:'short' }}</span>
</span>
......@@ -36,7 +41,8 @@
<button class="Artifact-button Artifact-button--primary Artifact-rename"
ng-click="artifactList.toggleItemEdition($index)"
type="button"
title="{{:: artifactList.translateKeys('Rename') }}"
uib-tooltip="{{:: artifactList.translateKeys('Rename')}}"
tooltip-popup-delay="500"
ng-if=":: artifactList.getRepository(artifact.type).rename">
<i class="fa fa-pencil"></i>
</button>
......@@ -44,13 +50,15 @@
artifact=":: artifact"></favorite-button>
<button file-download class="Artifact-button Artifact-button--primary Artifact-export"
ng-click="artifactList.exportArtifact(artifact)"
title="{{:: artifactList.translateKeys('Export') }}">
uib-tooltip="{{:: artifactList.translateKeys('Export')}}"
tooltip-popup-delay="500">
<i class="ui-icon ui-export"></i>
</button>
<button class="Artifact-button Artifact-button--primary Artifact-delete"
type="button"
ng-click="artifactList.deleteArtifact(artifact)"
title="{{:: artifactList.translateKeys('Delete') }}">
uib-tooltip="{{:: artifactList.translateKeys('Delete')}}"
tooltip-popup-delay="500">
<i class="fa fa-trash"></i>
</button>
</div>
......
......@@ -82,6 +82,16 @@
width: 50%;
background-color: @color-default-panel-item-border;
}
// Redefine bootstrap class to adapt width with content
.tooltip-inner {
max-width: 500px;
word-wrap: break-word;
}
.Artifact-tooltip {
text-align: left;
}
.Artifact-link--primary {
color: @color-primary-panel-item-text;
......
<div class="Artifact-tooltip">
{{artifact.name }}
<br>
<div class="Artifact-metadata">
{{:: artifactList.translateKeys('In folder:')}} /{{ artifact.id }}
</div>
</div>
......@@ -3,14 +3,16 @@
class="Artifact-button Artifact-favoriteButton Artifact-favoriteButton--checked"
ng-click="vm.toggleFavorite()"
type="button"
title="{{:: 'Unmark as favorite' | translate }}">
uib-tooltip="{{:: 'Unmark as favorite' | translate }}"
tooltip-popup-delay="500">
<i class="fa FavoriteButton-icon"></i>
</button>
<button ng-switch-default
class="Artifact-button Artifact-favoriteButton"
ng-click="vm.toggleFavorite()"
type="button"
title="{{:: 'Mark as favorite' | translate }}">
uib-tooltip="{{:: 'Mark as favorite' | translate }}"
tooltip-popup-delay="500">
<i class="fa FavoriteButton-icon"></i>
</button>
</span>
<button type="button" class="btn btn-bonita-primary HomeCreate"
title="{{'Create a new UI Designer artifact' | translate}}"
uib-tooltip="{{'Create a new UI Designer artifact' | translate}}"
tooltip-popup-delay="500"
tooltip-placement="bottom"
uib-popover-template="'js/home/create/create-popover.html'" popover-trigger="outsideClick" popover-placement="bottom-left" popover-is-open="createCtrl.isOpen" popover-class="HomeCreate-popover">
<i class="fa fa-plus"></i> <translate>Create</translate>
</button>
......@@ -5,8 +5,11 @@
</div>
<h1 class="HomeHeader-title" translate>UI Designer</h1>
<div class="HomeHeader-help">
<button class="btn btn-bonita-help shaker" ng-click="openHelp()" title="{{'Open help' | translate}}"><i
class="fa fa-question-circle"></i></button>
<button class="btn btn-bonita-help shaker" ng-click="openHelp()"
uib-tooltip="{{'Open help' | translate}}"
tooltip-popup-delay="500"
tooltip-placement="left">
<i class="fa fa-question-circle"></i></button>
</div>
</header>
<div class="container container--Home">
......
<button type="button" class="btn btn-bonita-default HomeImport"
title="{{'Import a UI Designer artifact' | translate}}"
uib-tooltip="{{'Import a UI Designer artifact' | translate}}"
tooltip-popup-delay="500"
tooltip-placement="bottom"
uib-popover-template="'js/home/import/import-popover.html'" popover-trigger="outsideClick" popover-placement="bottom-left" popover-is-open="import.isOpen" popover-class="HomeImport-popover">
<i class="ui-icon ui-import"></i> <translate>Import</translate>
</button>
<button class="btn btn-bonita-primary"
id="preview"
title="{{ 'Preview' | translate }}"
uib-tooltip="{{ 'Preview' | translate }}"
tooltip-placement="bottom"
tooltip-popup-delay="300"
ng-click="ctrl.openPreview()"
ng-disabled="ctrl.isDisabled">
<i class="fa fa-play"></i>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment