diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_details.vue | 18 | ||||
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_management_list.vue | 10 | ||||
-rw-r--r-- | app/assets/javascripts/alert_management/constants.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/components/edit_button.vue | 36 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/stores/actions.js | 15 | ||||
-rw-r--r-- | app/assets/stylesheets/components/related_items_list.scss | 21 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss (renamed from app/assets/stylesheets/page_bundles/themes/_dark.scss) | 205 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/ide.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/ide_themes/_dark.scss | 45 |
10 files changed, 206 insertions, 160 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue index ef060713d3d..cee1988e3ec 100644 --- a/app/assets/javascripts/alert_management/components/alert_details.vue +++ b/app/assets/javascripts/alert_management/components/alert_details.vue @@ -1,5 +1,12 @@ <script> -import { GlNewDropdown, GlNewDropdownItem, GlTabs, GlTab, GlButton } from '@gitlab/ui'; +import { + GlLoadingIcon, + GlNewDropdown, + GlNewDropdownItem, + GlTabs, + GlTab, + GlButton, +} from '@gitlab/ui'; import { s__ } from '~/locale'; import query from '../graphql/queries/details.query.graphql'; import { fetchPolicies } from '~/lib/graphql'; @@ -16,6 +23,7 @@ export default { overviewTitle: s__('AlertManagement|Overview'), }, components: { + GlLoadingIcon, GlNewDropdown, GlNewDropdownItem, GlTab, @@ -55,10 +63,16 @@ export default { data() { return { alert: null }; }, + computed: { + loading() { + return this.$apollo.queries.alert.loading; + }, + }, }; </script> <template> <div> + <div v-if="loading"><gl-loading-icon size="lg" class="mt-3" /></div> <div v-if="alert" class="gl-display-flex justify-content-end gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid gl-p-4" @@ -73,7 +87,7 @@ export default { {{ s__('AlertManagement|Create issue') }} </gl-button> </div> - <div class="gl-display-flex justify-content-end"> + <div v-if="alert" class="gl-display-flex justify-content-end"> <gl-new-dropdown right> <gl-new-dropdown-item v-for="(label, field) in $options.statuses" diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue index 7fe74eb1da8..a2efa6f0e0c 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_list.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue @@ -15,7 +15,7 @@ import { import { s__ } from '~/locale'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import getAlerts from '../graphql/queries/getAlerts.query.graphql'; -import { ALERTS_STATUS, ALERTS_STATUS_TABS } from '../constants'; +import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; const tdClass = 'table-col d-flex d-md-table-cell align-items-center'; @@ -68,6 +68,7 @@ export default { [ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'), [ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'), }, + severityLabels: ALERTS_SEVERITY_LABELS, statusTabs: ALERTS_STATUS_TABS, components: { GlEmptyState, @@ -185,14 +186,17 @@ export default { stacked="md" > <template #cell(severity)="{ item }"> - <div class="d-inline-flex align-items-center justify-content-between"> + <div + class="d-inline-flex align-items-center justify-content-between" + data-testid="severityField" + > <gl-icon class="mr-2" :size="12" :name="`severity-${item.severity.toLowerCase()}`" :class="`icon-${item.severity.toLowerCase()}`" /> - {{ item.severity }} + {{ $options.severityLabels[item.severity] }} </div> </template> diff --git a/app/assets/javascripts/alert_management/constants.js b/app/assets/javascripts/alert_management/constants.js index c95a3c29f04..ddaf8242b68 100644 --- a/app/assets/javascripts/alert_management/constants.js +++ b/app/assets/javascripts/alert_management/constants.js @@ -1,5 +1,14 @@ import { s__ } from '~/locale'; +export const ALERTS_SEVERITY_LABELS = { + CRITICAL: s__('AlertManagement|Critical'), + HIGH: s__('AlertManagement|High'), + MEDIUM: s__('AlertManagement|Medium'), + LOW: s__('AlertManagement|Low'), + INFO: s__('AlertManagement|Info'), + UNKNOWN: s__('AlertManagement|Unknown'), +}; + export const ALERTS_STATUS = { OPEN: 'open', TRIGGERED: 'triggered', diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue index 91e296f8572..21fdb19287d 100644 --- a/app/assets/javascripts/diffs/components/edit_button.vue +++ b/app/assets/javascripts/diffs/components/edit_button.vue @@ -1,5 +1,6 @@ <script> import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; +import { __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; export default { @@ -13,7 +14,8 @@ export default { props: { editPath: { type: String, - required: true, + required: false, + default: '', }, canCurrentUserFork: { type: Boolean, @@ -25,6 +27,18 @@ export default { default: false, }, }, + computed: { + tooltipTitle() { + if (this.isDisabled) { + return __("Can't edit as source branch was deleted"); + } + + return __('Edit file'); + }, + isDisabled() { + return !this.editPath; + }, + }, methods: { handleEditClick(evt) { if (this.canCurrentUserFork && !this.canModifyBlob) { @@ -37,13 +51,15 @@ export default { </script> <template> - <gl-deprecated-button - v-gl-tooltip.top - :href="editPath" - :title="__('Edit file')" - class="js-edit-blob" - @click.native="handleEditClick" - > - <icon name="pencil" /> - </gl-deprecated-button> + <span v-gl-tooltip.top :title="tooltipTitle"> + <gl-deprecated-button + :href="editPath" + :disabled="isDisabled" + :class="{ 'cursor-not-allowed': isDisabled }" + class="rounded-0 js-edit-blob" + @click.native="handleEditClick" + > + <icon name="pencil" /> + </gl-deprecated-button> + </span> </template> diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js index 0134378868b..903105babeb 100644 --- a/app/assets/javascripts/monitoring/stores/actions.js +++ b/app/assets/javascripts/monitoring/stores/actions.js @@ -13,11 +13,7 @@ import trackDashboardLoad from '../monitoring_tracking_helper'; import getEnvironments from '../queries/getEnvironments.query.graphql'; import getAnnotations from '../queries/getAnnotations.query.graphql'; import statusCodes from '../../lib/utils/http_status'; -import { - backOff, - convertObjectPropsToCamelCase, - isFeatureFlagEnabled, -} from '../../lib/utils/common_utils'; +import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils'; import { s__, sprintf } from '../../locale'; import { @@ -116,14 +112,7 @@ export const clearExpandedPanel = ({ commit }) => { export const fetchData = ({ dispatch }) => { dispatch('fetchEnvironmentsData'); dispatch('fetchDashboard'); - /** - * Annotations data is not yet fetched. This will be - * ready after the BE piece is implemented. - * https://gitlab.com/gitlab-org/gitlab/-/issues/211330 - */ - if (isFeatureFlagEnabled('metricsDashboardAnnotations')) { - dispatch('fetchAnnotations'); - } + dispatch('fetchAnnotations'); }; // Metrics dashboard diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index e4466b44358..c9a8d5e5975 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -85,6 +85,10 @@ $item-weight-max-width: 48px; white-space: nowrap; } + .health-label-short { + display: none; + } + @include media-breakpoint-down(lg) { .issue-count-badge { padding: 0; @@ -96,7 +100,6 @@ $item-weight-max-width: 48px; .item-body, .card-header { .health-label-short { - display: initial; max-width: 0; } @@ -131,6 +134,12 @@ $item-weight-max-width: 48px; } } +.card-header { + .health-label-short { + display: initial; + } +} + .item-meta { flex-basis: 100%; font-size: $gl-font-size; @@ -265,7 +274,6 @@ $item-weight-max-width: 48px; max-width: 90%; } - .item-body, .card-header { .health-label-short { max-width: 30px; @@ -306,7 +314,6 @@ $item-weight-max-width: 48px; } } - .item-body, .card-header { .health-label-short { max-width: 60px; @@ -326,7 +333,6 @@ $item-weight-max-width: 48px; } } - .item-body, .card-header { .health-label-short { max-width: 100px; @@ -364,10 +370,6 @@ $item-weight-max-width: 48px; } } - .health-label-short { - display: initial; - } - .health-label-long { display: none; } @@ -411,8 +413,7 @@ $item-weight-max-width: 48px; } @media only screen and (min-width: 1500px) { - .card-header, - .item-body { + .card-header { .health-label-short { display: none; } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index ecf2097dc87..f47d0cab31f 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -507,6 +507,10 @@ opacity: 1 !important; cursor: default !important; + &.cursor-not-allowed { + cursor: not-allowed !important; + } + i { color: $gl-text-color-disabled !important; } diff --git a/app/assets/stylesheets/page_bundles/themes/_dark.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 1d316ca2e3f..86dffb4d7df 100644 --- a/app/assets/stylesheets/page_bundles/themes/_dark.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -1,40 +1,6 @@ .ide.theme-dark { - $border-color: #1d1f21; - $highlight-accent: #fff; - $text-color: #ccc; - $background: #333; - $background-hover: #2d2d2d; - $highlight-background: #252526; - $link-color: #428fdc; - $footer-background: #060606; - - $input-border: #868686; - $input-background: transparent; - $input-color: $highlight-accent; - - $btn-default-background: transparent; - $btn-default-border: #bfbfbf; - $btn-default-hover-border: #d8d8d8; - - $btn-primary-background: #1068bf; - $btn-primary-border: #428fdc; - $btn-primary-hover-border: #63a6e9; - - $btn-success-background: #217645; - $btn-success-border: #108548; - $btn-success-hover-border: #2da160; - - $btn-disabled-border: rgba(223, 223, 223, 0.24); - $btn-disabled-color: rgba(145, 145, 145, 0.48); - - $dropdown-background: #404040; - $dropdown-hover-background: #525252; - - $diff-insert: rgba(155, 185, 85, 0.2); - $diff-remove: rgba(255, 0, 0, 0.2); - a:not(.btn) { - color: $link-color; + color: var(--ide-link-color); } h1, @@ -72,12 +38,12 @@ .ide-navigator-btn, .ide-pipeline .top-bar, .ide-pipeline .top-bar .controllers .controllers-buttons { - color: $text-color; + color: var(--ide-text-color); } .drag-handle:hover, .card-header .badge.badge-pill { - background-color: $dropdown-hover-background; + background-color: var(--ide-dropdown-hover-background); } .dropdown-menu-toggle svg, @@ -86,38 +52,34 @@ .file-row .file-row-icon svg, .file-row:hover .file-row-icon svg, .controllers-buttons svg { - fill: $text-color; + fill: var(--ide-text-color); } .ide-pipeline svg { - --svg-status-bg: $background; + --svg-status-bg: var(--ide-background); } .multi-file-tab-close:hover { - background-color: $input-border; + background-color: var(--ide-input-border); } .ide-review-sub-header:hover { - color: $input-border; + color: var(--ide-input-border); } .text-secondary { - color: $text-color !important; + color: var(--ide-text-color) !important; } input[type='search']::placeholder, input[type='text']::placeholder, textarea::placeholder, .dropdown-input .fa { - color: $input-border; + color: var(--ide-input-border); } .ide-nav-form .input-icon { - fill: $input-border; - } - - .ide-staged-action-btn { - background-color: transparent; + fill: var(--ide-input-border); } code, @@ -139,32 +101,28 @@ .bs-callout, .ide-pipeline .top-bar, .ide-terminal .top-bar { - background-color: $background; - } - - pre code { - background-color: inherit; + background-color: var(--ide-background); } .bs-callout { - border-color: $dropdown-background; + border-color: var(--ide-dropdown-background); code { - background-color: $dropdown-background; + background-color: var(--ide-dropdown-background); } } .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover { - border-color: $dropdown-hover-background; + border-color: var(--ide-dropdown-hover-background); } .ide-sidebar-link:hover, .multi-file-tabs li { - background-color: $background-hover; + background-color: var(--ide-background-hover); } .common-note-form .md-area { - border-color: $input-border; + border-color: var(--ide-input-border); } &, @@ -180,7 +138,7 @@ .card, .multi-file-commit-panel-success-message, .ide-preview-header { - background-color: $highlight-background; + background-color: var(--ide-highlight-background); } .multi-file-commit-panel { @@ -204,7 +162,7 @@ .ide-job-item:not(:last-child), .ide-terminal .top-bar, .ide-pipeline .top-bar { - border-color: $border-color; + border-color: var(--ide-border-color); } .md h1, @@ -222,58 +180,58 @@ .multi-file-commit-form .nav-links:not(.quick-links), .ide-pipeline-list .nav-links:not(.quick-links), .ide-preview-header { - border-color: $background; + border-color: var(--ide-background); } .multi-file-tabs li.active { - border-bottom-color: $highlight-background; + border-bottom-color: var(--ide-highlight-background); } .multi-file-tabs, .ide-commit-editor-header { - box-shadow: inset 0 -1px $border-color; + box-shadow: inset 0 -1px var(--ide-border-color); } .ide-sidebar-link.active { - color: $highlight-accent; - box-shadow: inset 3px 0 $highlight-accent; + color: var(--ide-highlight-accent); + box-shadow: inset 3px 0 var(--ide-highlight-accent); &.is-right { - box-shadow: inset -3px 0 $highlight-accent; + box-shadow: inset -3px 0 var(--ide-highlight-accent); } } .nav-links li.active a, .nav-links li a.active { - border-color: $highlight-accent; - color: $text-color; + border-color: var(--ide-highlight-accent); + color: var(--ide-text-color); } .avatar-container { &, .avatar { - color: $text-color; - background-color: $highlight-background; - border-color: $highlight-background; + color: var(--ide-text-color); + background-color: var(--ide-highlight-background); + border-color: var(--ide-highlight-background); } } .ide-status-bar { - background-color: $footer-background; + background-color: var(--ide-footer-background); } input[type='text'], input[type='search'], .filtered-search-box { - border-color: $input-border; - background: $input-background !important; + border-color: var(--ide-input-border); + background: var(--ide-input-background) !important; } input[type='text'], input[type='search'], .filtered-search-box, textarea { - color: $input-color !important; + color: var(--ide-input-color) !important; } .filtered-search-box input[type='search'] { @@ -282,46 +240,49 @@ .filtered-search-token .value-container, .filtered-search-term .value-container { - background-color: $dropdown-hover-background; - - color: $text-color; + background-color: var(--ide-dropdown-hover-background); + color: var(--ide-text-color); &:hover { - background-color: $input-border; + background-color: var(--ide-input-border); } } .ide-entry-dropdown-toggle:hover { - background: $gray-800; + background: var(--ide-file-row-btn-hover-background); + } + + @function calc-btn-hover-padding($original-padding, $original-border: 1px) { + @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width)); } .btn:not(.btn-link):not([disabled]):hover { - border-width: 2px; - padding: 5px 9px; + border-width: var(--ide-btn-hover-border-width); + padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); } .btn:not([disabled]).btn-sm:hover { - padding: 3px 9px; + padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px); } .btn:not([disabled]).btn-block:hover { - padding: 5px 0; + padding: calc-btn-hover-padding(6px) 0; } .btn-inverted, .btn-default, .dropdown, .dropdown-menu-toggle { - background-color: $input-background !important; - color: $input-color !important; - border-color: $btn-default-border; + background-color: var(--ide-input-background) !important; + color: var(--ide-input-color) !important; + border-color: var(--ide-btn-default-border); } .btn-inverted, .btn-default { &:hover, &:focus { - border-color: $btn-default-hover-border !important; + border-color: var(--ide-btn-default-hover-border) !important; } } @@ -329,35 +290,35 @@ .dropdown-menu-toggle { &:hover, &:focus { - background-color: $gray-900 !important; - border-color: $gray-200 !important; + background-color: var(--ide-dropdown-btn-hover-background) !important; + border-color: var(--ide-dropdown-btn-hover-border) !important; } } .dropdown-menu { - color: $text-color; - border-color: $background; - background-color: $dropdown-background; + color: var(--ide-text-color); + border-color: var(--ide-background); + background-color: var(--ide-dropdown-background); .divider, .nav-links:not(.quick-links) { - background-color: $dropdown-hover-background; - border-color: $dropdown-hover-background; + background-color: var(--ide-dropdown-hover-background); + border-color: var(--ide-dropdown-hover-background); } .nav-links li a.active { - border-color: $highlight-accent; + border-color: var(--ide-highlight-accent); } .ide-nav-form .nav-links li a:not(.active) { - background-color: $dropdown-background; + background-color: var(--ide-dropdown-background); } .nav-links:not(.quick-links) li:not(.md-header-toolbar) a { - color: $text-color; + color: var(--ide-text-color); &.active { - color: $text-color; + color: var(--ide-text-color); } } @@ -366,73 +327,75 @@ li button:not(.disable-hover):hover, li button:not(.disable-hover):focus, li button.is-focused { - background-color: $dropdown-hover-background; - color: $text-color; + background-color: var(--ide-dropdown-hover-background); + color: var(--ide-text-color); } } .dropdown-title, .dropdown-input { - border-color: $dropdown-hover-background !important; + border-color: var(--ide-dropdown-hover-background) !important; } - .btn-primary { - background-color: $btn-primary-background; - border-color: $btn-primary-border !important; + .btn-primary, + .btn-info { + background-color: var(--ide-btn-primary-background); + border-color: var(--ide-btn-primary-border) !important; &:hover, &:focus { - border-color: $btn-primary-hover-border !important; + border-color: var(--ide-btn-primary-hover-border) !important; } } .btn-success { - background-color: $btn-success-background; - border-color: $btn-success-border !important; + background-color: var(--ide-btn-success-background); + border-color: var(--ide-btn-success-border) !important; &:hover, &:focus { - border-color: $btn-success-hover-border !important; + border-color: var(--ide-btn-success-hover-border) !important; } } .btn[disabled] { - background: $btn-default-background !important; - border: 1px solid $btn-disabled-border !important; - color: $btn-disabled-color !important; + background: var(--ide-btn-default-background) !important; + border: 1px solid var(--ide-btn-disabled-border) !important; + color: var(--ide-btn-disabled-color) !important; } .md-previewer, + pre code, .md table:not(.code) tbody, .ide-empty-state { - background-color: $border-color; + background-color: var(--ide-border-color); } .ide-tree-header svg:focus, .ide-tree-header svg:hover { - color: $blue-600; + color: var(--ide-link-color); } .animation-container { [class^='skeleton-line-'] { - background-color: $gray-800; + background-color: var(--ide-animation-gradient-1); &::after { background-image: linear-gradient(to right, - $gray-800 0%, - $gray-700 20%, - $gray-800 40%, - $gray-800 100%); + var(--ide-animation-gradient-1) 0%, + var(--ide-animation-gradient-2) 20%, + var(--ide-animation-gradient-1) 40%, + var(--ide-animation-gradient-1) 100%); } } } .idiff.addition { - background-color: $diff-insert; + background-color: var(--ide-diff-insert); } .idiff.deletion { - background-color: $diff-remove; + background-color: var(--ide-diff-remove); } } diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index d0660422f7e..cb41d960307 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -2,8 +2,9 @@ @import 'framework/mixins'; @import './ide_mixins'; @import './ide_monaco_overrides'; +@import './ide_theme_overrides'; -@import './themes/dark'; +@import './ide_themes/dark'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss new file mode 100644 index 00000000000..809abc42a69 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss @@ -0,0 +1,45 @@ +.ide.theme-dark { + --ide-border-color: #1d1f21; + --ide-highlight-accent: #fff; + --ide-text-color: #ccc; + --ide-background: #333; + --ide-background-hover: #2d2d2d; + --ide-highlight-background: #252526; + --ide-link-color: #428fdc; + --ide-footer-background: #060606; + + --ide-input-border: #868686; + --ide-input-background: transparent; + --ide-input-color: #fff; + + --ide-btn-default-background: transparent; + --ide-btn-default-border: #bfbfbf; + --ide-btn-default-hover-border: #d8d8d8; + + --ide-btn-primary-background: #1068bf; + --ide-btn-primary-border: #428fdc; + --ide-btn-primary-hover-border: #63a6e9; + + --ide-btn-success-background: #217645; + --ide-btn-success-border: #108548; + --ide-btn-success-hover-border: #2da160; + + --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); + + --ide-btn-hover-border-width: 2px; + + --ide-dropdown-background: #404040; + --ide-dropdown-hover-background: #525252; + + --ide-dropdown-btn-hover-border: #{$gray-200}; + --ide-dropdown-btn-hover-background: #{$gray-900}; + + --ide-file-row-btn-hover-background: #{$gray-800}; + + --ide-diff-insert: rgba(155, 185, 85, 0.2); + --ide-diff-remove: rgba(255, 0, 0, 0.2); + + --ide-animation-gradient-1: #{$gray-800}; + --ide-animation-gradient-2: #{$gray-700}; +} |