diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 961396b46b7299a92502c3bb1abe16869aaf0c63..5159d5c4dee05e4bd677685b4000d46e580fc37b 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -37,10 +37,10 @@ * Folder items have different behaviours - it is possible to toggle * them and show their children. * - * @returns {Number} The length of the children array + * @returns {Boolean} */ isFolder () { - return this.model.children && this.model.children.length + return this.model.children && this.model.children.length ? true : false; }, /** @@ -51,6 +51,17 @@ */ isChildren () { return this.model['vue-isChildren']; + }, + + + /** + * Counts the number of environments in each folder. + * Used to show a badge with the counter. + * + * @returns {Boolean} The number of environments for the current folder + */ + childrenCounter () { + return this.model.children && this.model.children.length; } }, diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 973820e87406fb6475e90844dd6c842b93d3cee8..ed0151bb12075c76dbd8fe630794ecc811573b76 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -64,7 +64,7 @@ } } - .children-row .environment-name{ + .children-row .environment-name { margin-left: 17px; margin-right: -17px; } @@ -75,6 +75,13 @@ .folder-name { cursor: pointer; + + .badge { + font-weight: normal; + background-color: $gray-darker; + color: $gl-placeholder-color; + vertical-align: baseline; + } } } diff --git a/app/views/projects/environments/components/_environment.html.haml b/app/views/projects/environments/components/_environment.html.haml index deef1e034cad45b21c934f275a4a9ca081c90863..7e8bcbaa67d4771f72999d796cf0f4dcd6e42c0d 100644 --- a/app/views/projects/environments/components/_environment.html.haml +++ b/app/views/projects/environments/components/_environment.html.haml @@ -14,6 +14,9 @@ =icon("caret-right") {{model.name}} + + %span.badge + {{childrenCounter}} %td.deployment-column %span{ "v-if" => "!isFolder && model.last_deployment && model.last_deployment.iid"}