diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/shared')
3 files changed, 71 insertions, 18 deletions
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue index 533065b2d4d..0f145dbc170 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue @@ -1,17 +1,17 @@ <script> +import { GlIcon } from '@gitlab/ui'; import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue'; import { featureAccessLevelNone } from '../constants'; export default { components: { + GlIcon, projectFeatureToggle, }, - model: { prop: 'value', event: 'change', }, - props: { name: { type: String, @@ -34,7 +34,6 @@ export default { default: false, }, }, - computed: { featureEnabled() { return this.value !== 0; @@ -51,7 +50,6 @@ export default { return this.disabledInput || !this.featureEnabled || this.displayOptions.length < 2; }, }, - methods: { toggleFeature(featureEnabled) { if (featureEnabled === false || this.options.length < 1) { @@ -70,14 +68,18 @@ export default { </script> <template> - <div :data-for="name" class="project-feature-controls"> + <div + :data-for="name" + class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0" + > <input v-if="name" :name="name" :value="value" type="hidden" /> <project-feature-toggle + class="gl-flex-grow-0 gl-mr-3" :value="featureEnabled" :disabled-input="disabledInput" @change="toggleFeature" /> - <div class="select-wrapper"> + <div class="select-wrapper gl-flex-fill-1"> <select :disabled="displaySelectInput" class="form-control project-repo-select select-control" @@ -92,7 +94,11 @@ export default { {{ optionName }} </option> </select> - <i aria-hidden="true" class="fa fa-chevron-down"> </i> + <gl-icon + name="chevron-down" + aria-hidden="true" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + /> </div> </div> </template> diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index a95f0af46cd..bcf82e264d1 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -1,5 +1,5 @@ <script> -import { GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui'; +import { GlIcon, GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui'; import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin'; import { s__ } from '~/locale'; @@ -22,6 +22,7 @@ export default { projectFeatureSetting, projectFeatureToggle, projectSettingRow, + GlIcon, GlSprintf, GlLink, GlFormCheckbox, @@ -292,14 +293,16 @@ export default { <template> <div> - <div class="project-visibility-setting"> + <div + class="project-visibility-setting gl-border-1 gl-border-solid gl-border-gray-100 gl-py-3 gl-px-7 gl-sm-pr-5 gl-sm-pl-5" + > <project-setting-row ref="project-visibility-settings" :help-path="visibilityHelpPath" :label="s__('ProjectSettings|Project visibility')" > - <div class="project-feature-controls"> - <div class="select-wrapper"> + <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"> + <div class="select-wrapper gl-flex-fill-1"> <select v-model="visibilityLevel" :disabled="!canChangeVisibilityLevel" @@ -323,11 +326,16 @@ export default { >{{ s__('ProjectSettings|Public') }}</option > </select> - <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i> + <gl-icon + name="chevron-down" + aria-hidden="true" + data-hidden="true" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + /> </div> </div> <span class="form-text text-muted">{{ visibilityLevelDescription }}</span> - <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="request-access"> + <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="gl-line-height-28"> <input :value="requestAccessEnabled" type="hidden" @@ -338,7 +346,10 @@ export default { </label> </project-setting-row> </div> - <div :class="{ 'highlight-changes': highlightChangesClass }" class="project-feature-settings"> + <div + :class="{ 'highlight-changes': highlightChangesClass }" + class="gl-border-1 gl-border-solid gl-border-t-none gl-border-gray-100 gl-mb-5 gl-py-3 gl-px-7 gl-sm-pr-5 gl-sm-pl-5 gl-bg-gray-10" + > <project-setting-row ref="issues-settings" :label="s__('ProjectSettings|Issues')" @@ -361,7 +372,7 @@ export default { name="project[project_feature_attributes][repository_access_level]" /> </project-setting-row> - <div class="project-feature-setting-group"> + <div class="project-feature-setting-group gl-pl-7 gl-sm-pl-5"> <project-setting-row ref="merge-request-settings" :label="s__('ProjectSettings|Merge requests')" @@ -516,8 +527,8 @@ export default { ) " > - <div class="project-feature-controls"> - <div class="select-wrapper"> + <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"> + <div class="select-wrapper gl-flex-fill-1"> <select v-model="metricsDashboardAccessLevel" :disabled="metricsOptionsDropdownEnabled" @@ -535,7 +546,12 @@ export default { >{{ featureAccessLevelEveryone[1] }}</option > </select> - <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i> + <gl-icon + name="chevron-down" + aria-hidden="true" + data-hidden="true" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + /> </div> </div> </project-setting-row> diff --git a/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js new file mode 100644 index 00000000000..5f08943d211 --- /dev/null +++ b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js @@ -0,0 +1,31 @@ +import Vue from 'vue'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { joinPaths, webIDEUrl } from '~/lib/utils/url_utility'; +import WebIdeButton from '~/vue_shared/components/web_ide_link.vue'; + +export default ({ el, router }) => { + if (!el) return; + + const { projectPath, ref, isBlob, webIdeUrl, ...options } = convertObjectPropsToCamelCase( + JSON.parse(el.dataset.options), + ); + + // eslint-disable-next-line no-new + new Vue({ + el, + router, + render(h) { + return h(WebIdeButton, { + props: { + isBlob, + webIdeUrl: isBlob + ? webIdeUrl + : webIDEUrl( + joinPaths('/', projectPath, 'edit', ref, '-', this.$route?.params.path || '', '/'), + ), + ...options, + }, + }); + }, + }); +}; |