diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6 index c5a714d967337f5de4361cc198a171736a21e30c..978d4dd8b6ba5267d5b407a7227b895128893c77 100644 --- a/app/assets/javascripts/environments/components/environment_actions.js.es6 +++ b/app/assets/javascripts/environments/components/environment_actions.js.es6 @@ -15,29 +15,29 @@ module.exports = Vue.component('actions-component', { }, template: ` - <div class="inline"> - <div class="dropdown"> - <a class="dropdown-new btn btn-default" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button class="dropdown btn btn-default dropdown-new" data-toggle="dropdown"> + <span> <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span> <i class="fa fa-caret-down"></i> - </a> + </span> - <ul class="dropdown-menu dropdown-menu-align-right"> - <li v-for="action in actions"> - <a :href="action.play_path" - data-method="post" - rel="nofollow" - class="js-manual-action-link"> + <ul class="dropdown-menu dropdown-menu-align-right"> + <li v-for="action in actions"> + <a :href="action.play_path" + data-method="post" + rel="nofollow" + class="js-manual-action-link"> - <span class="js-action-play-icon-container" v-html="playIconSvg"></span> + <span class="js-action-play-icon-container" v-html="playIconSvg"></span> - <span> - {{action.name}} - </span> - </a> - </li> - </ul> - </div> - </div> + <span> + {{action.name}} + </span> + </a> + </li> + </ul> + </button> + </div> `, }); diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 24fd58a301ae7c610efa6ed2dc90562627c652b1..ad9d1d21a79777c6478d6010b42ba998c4b6635e 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -505,39 +505,26 @@ module.exports = Vue.component('environment-item', { <td class="hidden-xs"> <div v-if="!model.isFolder"> - <div v-if="hasManualActions && canCreateDeployment" - class="inline js-manual-actions-container"> - <actions-component + <div class="btn-group" role="group"> + <actions-component v-if="hasManualActions && canCreateDeployment" :play-icon-svg="playIconSvg" :actions="manualActions"> </actions-component> - </div> - <div v-if="externalURL && canReadEnvironment" - class="inline js-external-url-container"> - <external-url-component + <external-url-component v-if="externalURL && canReadEnvironment" :external-url="externalURL"> </external-url-component> - </div> - <div v-if="hasStopAction && canCreateDeployment" - class="inline js-stop-component-container"> - <stop-component + <stop-component v-if="hasStopAction && canCreateDeployment" :stop-url="model.stop_path"> </stop-component> - </div> - <div v-if="model && model.terminal_path" - class="inline js-terminal-button-container"> - <terminal-button-component + <terminal-button-component v-if="model && model.terminal_path" :terminal-icon-svg="terminalIconSvg" :terminal-path="model.terminal_path"> </terminal-button-component> - </div> - <div v-if="canRetry && canCreateDeployment" - class="inline js-rollback-component-container"> - <rollback-component + <rollback-component v-if="canRetry && canCreateDeployment" :is-last-deployment="isLastDeployment" :retry-url="retryUrl"> </rollback-component> diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 181dcb7721f5002e0ebfd32bde68bb678cd360f5..f789ae1ccd3b08fa645aa5b4e5e8d2bbe0e4215b 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -35,7 +35,6 @@ display: table-cell; } - .environments-name, .environments-commit, .environments-actions { width: 20%; @@ -45,6 +44,7 @@ width: 10%; } + .environments-name, .environments-deploy, .environments-build { width: 15%; @@ -62,6 +62,22 @@ } } + .btn-group { + + > a { + color: $gl-text-color-secondary; + } + + svg path { + fill: $gl-text-color-secondary; + } + + .dropdown { + outline: none; + } + } + + .commit-title { margin: 0; }