diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-02-09 11:17:58 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-02-09 11:35:32 +0000 |
commit | 369d18cb298356e8043554613ddf1a9853803c60 (patch) | |
tree | 340c9db135beb783cb5dc41a1a4f367db774272e | |
parent | d997fe135be7ec0be4aea974c556902303cf8bed (diff) | |
download | gitlab-ce-369d18cb298356e8043554613ddf1a9853803c60.tar.gz |
Adds tooltip for environment name42922-environment-name
Adds CSS for child envrionments
-rw-r--r-- | app/assets/javascripts/environments/components/environment_item.vue | 31 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/environments.scss | 4 | ||||
-rw-r--r-- | changelogs/unreleased/42922-environment-name.yml | 5 |
3 files changed, 29 insertions, 11 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index a9d554e549e..79326ca3487 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,8 +1,9 @@ <script> import Timeago from 'timeago.js'; import _ from 'underscore'; - import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; - import { humanize } from '../../lib/utils/text_utility'; + import tooltip from '~/vue_shared/directives/tooltip'; + import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; + import { humanize } from '~/lib/utils/text_utility'; import ActionsComponent from './environment_actions.vue'; import ExternalUrlComponent from './environment_external_url.vue'; import StopComponent from './environment_stop.vue'; @@ -21,14 +22,18 @@ export default { components: { - userAvatarLink, - 'commit-component': CommitComponent, - 'actions-component': ActionsComponent, - 'external-url-component': ExternalUrlComponent, - 'stop-component': StopComponent, - 'rollback-component': RollbackComponent, - 'terminal-button-component': TerminalButtonComponent, - 'monitoring-button-component': MonitoringButtonComponent, + UserAvatarLink, + CommitComponent, + ActionsComponent, + ExternalUrlComponent, + StopComponent, + RollbackComponent, + TerminalButtonComponent, + MonitoringButtonComponent, + }, + + directives: { + tooltip, }, props: { @@ -443,7 +448,11 @@ v-if="!model.isFolder" class="environment-name flex-truncate-parent table-mobile-content" :href="environmentPath"> - <span class="flex-truncate-child">{{ model.name }}</span> + <span + class="flex-truncate-child" + v-tooltip + :title="model.name" + >{{ model.name }}</span> </a> <span v-else diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 4eba05a492d..884665d35c7 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -121,6 +121,10 @@ width: 100%; text-align: left; } + + .environment-child-row { + padding-left: 20px; + } } } diff --git a/changelogs/unreleased/42922-environment-name.yml b/changelogs/unreleased/42922-environment-name.yml new file mode 100644 index 00000000000..0e9544245f6 --- /dev/null +++ b/changelogs/unreleased/42922-environment-name.yml @@ -0,0 +1,5 @@ +--- +title: Adds tooltip in environment names to increase readability +merge_request: +author: +type: fixed |