diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-08 21:13:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-08 21:13:21 +0300 |
commit | fdeb53bebfb91f7cc7182c783310ee7d7bac8550 (patch) | |
tree | 4104a89a3591b4c39402ebab565d5752e732d2ae /app/assets | |
parent | 025c440ddc394806bccf19c56043e369ed7e84f5 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
15 files changed, 206 insertions, 168 deletions
diff --git a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue index 3956a1f86e8..59b68fc0063 100644 --- a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue +++ b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue @@ -1,6 +1,6 @@ <script> import { isEmpty } from 'lodash'; -import { GlBadge, GlButton } from '@gitlab/ui'; +import { GlBadge, GlButton, GlTooltipDirective } from '@gitlab/ui'; import Pagination from '~/vue_shared/components/incubation/pagination.vue'; import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; @@ -10,6 +10,7 @@ import * as i18n from '../translations'; import { BASE_SORT_FIELDS, MODEL_ENTITIES } from '../constants'; import SearchBar from '../components/search_bar.vue'; import ModelRow from '../components/model_row.vue'; +import ActionsDropdown from '../components/actions_dropdown.vue'; export default { name: 'IndexMlModels', @@ -22,6 +23,15 @@ export default { GlBadge, EmptyState, GlButton, + ActionsDropdown, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + provide() { + return { + mlflowTrackingUrl: this.mlflowTrackingUrl, + }; }, props: { models: { @@ -46,6 +56,11 @@ export default { required: false, default: false, }, + mlflowTrackingUrl: { + type: String, + required: false, + default: '', + }, }, computed: { hasModels() { @@ -77,6 +92,8 @@ export default { <gl-button v-if="canWriteModelRegistry" :href="createModelPath">{{ $options.i18n.CREATE_MODEL_LABEL }}</gl-button> + + <actions-dropdown /> </template> </title-area> <template v-if="hasModels"> diff --git a/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue b/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue new file mode 100644 index 00000000000..5b4f9e27437 --- /dev/null +++ b/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue @@ -0,0 +1,34 @@ +<script> +import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +export default { + components: { + GlDisclosureDropdownItem, + GlDisclosureDropdown, + }, + inject: ['mlflowTrackingUrl'], + computed: { + copyIdItem() { + return { + text: s__('MlModelRegistry|Copy MLflow tracking URL'), + action: () => { + this.$toast.show(s__('MlModelRegistry|Copied MLflow tracking URL to clipboard')); + }, + }; + }, + }, +}; +</script> + +<template> + <gl-disclosure-dropdown + placement="right" + category="tertiary" + :aria-label="__('More actions')" + icon="ellipsis_v" + no-caret + > + <gl-disclosure-dropdown-item :item="copyIdItem" :data-clipboard-text="mlflowTrackingUrl" /> + </gl-disclosure-dropdown> +</template> diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 5fcc24a1827..5a9a739fb13 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -22,7 +22,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; .super-sidebar { --super-sidebar-bg: #{$gray-10}; --super-sidebar-border-color: #{$t-gray-a-08}; - --super-sidebar-primary: #{$blue-500}; + --super-sidebar-context-header-color: inherit; + --super-sidebar-active-indicator-color: #{$blue-500}; --super-sidebar-notification-dot: #{$blue-500}; --super-sidebar-user-bar-bg: #{$t-gray-a-04}; @@ -42,6 +43,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; --super-sidebar-nav-item-current-bg: #{$t-gray-a-08}; --super-sidebar-nav-item-icon-color: #{$gray-500}; + --super-sidebar-hr-mix-blend-mode: normal; + .gl-dark & { --super-sidebar-border-color: #{$t-white-a-08}; --super-sidebar-user-bar-bg: #{$t-white-a-04}; @@ -58,7 +61,148 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; --super-sidebar-nav-item-current-bg: #{$t-white-a-08}; --super-sidebar-nav-item-icon-color: #{$gray-600}; } +} + +@mixin super-sidebar-theme( + $background, + $user-bar-background, + $user-bar-button-color, + $user-bar-button-icon-color, + $context-header, + $active-indicator, + $notification-dot, +) { + .super-sidebar { + --super-sidebar-bg: #{$background}; + --super-sidebar-user-bar-bg: #{$user-bar-background}; + --super-sidebar-context-header-color: #{$context-header}; + --super-sidebar-active-indicator-color: #{$active-indicator}; + --super-sidebar-notification-dot: #{$notification-dot}; + + --super-sidebar-user-bar-button-bg: #{$t-white-a-16}; + --super-sidebar-user-bar-button-color: #{$user-bar-button-color}; + --super-sidebar-user-bar-button-border-color: #{$t-white-a-16}; + --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24}; + --super-sidebar-user-bar-button-hover-color: #{$white}; + --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36}; + + --super-sidebar-user-bar-button-icon-color: #{$user-bar-button-icon-color}; + --super-sidebar-user-bar-button-icon-hover-color: #{$user-bar-button-icon-color}; + --super-sidebar-user-bar-button-icon-mix-blend-mode: screen; + + --super-sidebar-hr-mix-blend-mode: multiply; + } +} + +.ui-blue { + @include super-sidebar-theme( + $background: $theme-blue-10, + $user-bar-background: $theme-blue-900, + $user-bar-button-color: $theme-blue-50, + $user-bar-button-icon-color: $theme-blue-100, + $context-header: $theme-blue-900, + $active-indicator: $theme-blue-900, + $notification-dot: $theme-blue-900, + ); +} + +.ui-gray { + @include super-sidebar-theme( + $background: $gray-10, + $user-bar-background: $gray-900, + $user-bar-button-color: $gray-50, + $user-bar-button-icon-color: $gray-100, + $context-header: $gray-900, + $active-indicator: $gray-900, + $notification-dot: $gray-900, + ); +} + +.ui-green { + @include super-sidebar-theme( + $background: $theme-green-10, + $user-bar-background: $theme-green-900, + $user-bar-button-color: $theme-green-50, + $user-bar-button-icon-color: $theme-green-100, + $context-header: $theme-green-900, + $active-indicator: $theme-green-900, + $notification-dot: $theme-green-900, + ); +} + +.ui-indigo { + @include super-sidebar-theme( + $background: $theme-indigo-10, + $user-bar-background: $theme-indigo-900, + $user-bar-button-color: $theme-indigo-50, + $user-bar-button-icon-color: $theme-indigo-100, + $context-header: $theme-indigo-900, + $active-indicator: $theme-indigo-900, + $notification-dot: $theme-indigo-900, + ); +} + +.ui-light-blue { + @include super-sidebar-theme( + $background: $theme-light-blue-10, + $user-bar-background: $theme-light-blue-700, + $user-bar-button-color: $theme-light-blue-50, + $user-bar-button-icon-color: $theme-light-blue-100, + $context-header: $theme-light-blue-900, + $active-indicator: $theme-light-blue-900, + $notification-dot: $theme-light-blue-900, + ); +} + +.ui-light-green { + @include super-sidebar-theme( + $background: $theme-green-10, + $user-bar-background: $theme-green-700, + $user-bar-button-color: $theme-green-50, + $user-bar-button-icon-color: $theme-green-100, + $context-header: $theme-green-900, + $active-indicator: $theme-green-900, + $notification-dot: $theme-green-900, + ); +} + +.ui-light-indigo { + @include super-sidebar-theme( + $background: $theme-indigo-10, + $user-bar-background: $theme-indigo-700, + $user-bar-button-color: $theme-indigo-50, + $user-bar-button-icon-color: $theme-indigo-100, + $context-header: $theme-indigo-900, + $active-indicator: $theme-indigo-900, + $notification-dot: $theme-indigo-900, + ); +} + +.ui-light-red { + @include super-sidebar-theme( + $background: $theme-light-red-10, + $user-bar-background: $theme-light-red-700, + $user-bar-button-color: $theme-light-red-50, + $user-bar-button-icon-color: $theme-light-red-100, + $context-header: $theme-light-red-900, + $active-indicator: $theme-light-red-900, + $notification-dot: $theme-light-red-900, + ); +} + +.ui-red { + @include super-sidebar-theme( + $background: $theme-red-10, + $user-bar-background: $theme-red-900, + $user-bar-button-color: $theme-red-50, + $user-bar-button-icon-color: $theme-red-100, + $context-header: $theme-red-900, + $active-indicator: $theme-red-900, + $notification-dot: $theme-red-900, + ); +} +.super-sidebar { display: flex; flex-direction: column; position: fixed; @@ -167,8 +311,12 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; color: var(--super-sidebar-nav-item-icon-color); } + hr { + mix-blend-mode: var(--super-sidebar-hr-mix-blend-mode); + } + .active-indicator { - background-color: var(--super-sidebar-primary); + background-color: var(--super-sidebar-active-indicator-color); } .btn-with-notification { @@ -200,6 +348,10 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } +.super-sidebar-context-header { + color: var(--super-sidebar-context-header-color); +} + .super-sidebar-overlay { display: none; } diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 3ab3e195b06..59c2391d2e9 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -1,7 +1,6 @@ @import './themes/dark'; @import '@gitlab/ui/dist/tokens/css/tokens.dark'; @import 'page_bundles/mixins_and_variables_and_functions'; -@import './themes/theme_helper'; :root { color-scheme: dark; diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss deleted file mode 100644 index 1a373fbfeda..00000000000 --- a/app/assets/stylesheets/themes/theme_blue.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-blue { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-blue-50, - $theme-blue-100, - $theme-blue-900, - $theme-blue-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss deleted file mode 100644 index 9a24142f286..00000000000 --- a/app/assets/stylesheets/themes/theme_gray.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-gray { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $gray-50, - $gray-100, - $gray-900, - $gray-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss deleted file mode 100644 index a766fdddc78..00000000000 --- a/app/assets/stylesheets/themes/theme_green.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-green { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-green-50, - $theme-green-100, - $theme-green-900, - $theme-green-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss deleted file mode 100644 index c94a32891f6..00000000000 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import '../page_bundles/mixins_and_variables_and_functions'; -/** - * Styles the GitLab application with a specific color theme - */ -@mixin gitlab-theme-super-sidebar( - $theme-color-lightest, - $theme-color-light, - $theme-color, - $theme-color-darkest, -) { - .super-sidebar { - --super-sidebar-bg: #{mix(white, $theme-color-lightest, 50%)}; - --super-sidebar-user-bar-bg: #{$theme-color}; - --super-sidebar-primary: #{$theme-color}; - --super-sidebar-notification-dot: #{$theme-color-darkest}; - - --super-sidebar-user-bar-button-bg: #{$t-white-a-16}; - --super-sidebar-user-bar-button-color: #{$theme-color-lightest}; - --super-sidebar-user-bar-button-border-color: #{$t-white-a-16}; - --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24}; - --super-sidebar-user-bar-button-hover-color: #{$white}; - --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36}; - - --super-sidebar-user-bar-button-icon-color: #{$theme-color-light}; - --super-sidebar-user-bar-button-icon-hover-color: #{$theme-color-light}; - --super-sidebar-user-bar-button-icon-mix-blend-mode: screen; - - hr { - mix-blend-mode: multiply; - } - - .super-sidebar-context-header { - color: var(--super-sidebar-primary); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss deleted file mode 100644 index d0a8d597b59..00000000000 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-indigo { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-indigo-50, - $theme-indigo-100, - $theme-indigo-900, - $theme-indigo-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss deleted file mode 100644 index e712b6ae859..00000000000 --- a/app/assets/stylesheets/themes/theme_light_blue.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-blue { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-light-blue-50, - $theme-light-blue-100, - $theme-light-blue-700, - $theme-light-blue-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss deleted file mode 100644 index 5cb9bee37b0..00000000000 --- a/app/assets/stylesheets/themes/theme_light_gray.scss +++ /dev/null @@ -1,2 +0,0 @@ -// "Light gray" is the default unthemed state of the sidebar. -// Nothing to do here. diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss deleted file mode 100644 index 44e19b02e36..00000000000 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-green { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-green-50, - $theme-green-100, - $theme-green-700, - $theme-green-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss deleted file mode 100644 index ab299ca9d84..00000000000 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-indigo { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-indigo-50, - $theme-indigo-100, - $theme-indigo-700, - $theme-indigo-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss deleted file mode 100644 index 499cdace772..00000000000 --- a/app/assets/stylesheets/themes/theme_light_red.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-red { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-light-red-50, - $theme-light-red-100, - $theme-light-red-700, - $theme-light-red-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss deleted file mode 100644 index 9a17f98aa80..00000000000 --- a/app/assets/stylesheets/themes/theme_red.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-red { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-red-50, - $theme-red-100, - $theme-red-900, - $theme-red-900, - ); - } - } -} |