diff options
Diffstat (limited to 'app/assets')
16 files changed, 1140 insertions, 22 deletions
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index 912568c8870..271d862afab 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -467,6 +467,17 @@ export default { notebooks to a class of students, a corporate data science group, or a scientific research group.`) }} + <gl-sprintf + :message=" + s__( + 'ClusterIntegration|%{boldStart}Note:%{boldEnd} Requires Ingress to be installed.', + ) + " + > + <template #bold="{ content }"> + <b>{{ content }}</b> + </template> + </gl-sprintf> </p> <template v-if="ingressExternalEndpoint"> diff --git a/app/assets/javascripts/helpers/startup_css_helper.js b/app/assets/javascripts/helpers/startup_css_helper.js index 8351cbf04bf..d41a6209898 100644 --- a/app/assets/javascripts/helpers/startup_css_helper.js +++ b/app/assets/javascripts/helpers/startup_css_helper.js @@ -20,17 +20,7 @@ const handleStartupEvents = () => { } }; -/* Wait for.... The methods can be used: - - with a callback (preferred), - waitFor(action) - - - with then (discouraged), - await waitFor().then(action); - - - with await, - await waitFor; - action(); --*/ +/* For `waitForCSSLoaded` methods, see docs.gitlab.com/ee/development/fe_guide/performance.html#important-considerations */ export const waitForCSSLoaded = (action = () => {}) => { if (!gon?.features?.startupCss || allLinksLoaded()) { return new Promise(resolve => { diff --git a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue index d4489bbf693..93ea1f4f636 100644 --- a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue +++ b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue @@ -8,14 +8,14 @@ export default { GlModal, }, computed: { - ...mapGetters(['isSavingOrTesting']), + ...mapGetters(['isDisabled']), primaryProps() { return { text: __('Save'), attributes: [ { variant: 'success' }, { category: 'primary' }, - { disabled: this.isSavingOrTesting }, + { disabled: this.isDisabled }, ], }; }, diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index e42a8b7de7c..bbfa865905a 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -12,6 +12,7 @@ import JiraIssuesFields from './jira_issues_fields.vue'; import TriggerFields from './trigger_fields.vue'; import DynamicField from './dynamic_field.vue'; import ConfirmationModal from './confirmation_modal.vue'; +import ResetConfirmationModal from './reset_confirmation_modal.vue'; export default { name: 'IntegrationForm', @@ -23,6 +24,7 @@ export default { TriggerFields, DynamicField, ConfirmationModal, + ResetConfirmationModal, GlButton, }, directives: { @@ -30,8 +32,8 @@ export default { }, mixins: [glFeatureFlagsMixin()], computed: { - ...mapGetters(['currentKey', 'propsSource', 'isSavingOrTesting']), - ...mapState(['defaultState', 'override', 'isSaving', 'isTesting']), + ...mapGetters(['currentKey', 'propsSource', 'isDisabled']), + ...mapState(['defaultState', 'override', 'isSaving', 'isTesting', 'isResetting']), isEditable() { return this.propsSource.editable; }, @@ -47,9 +49,12 @@ export default { showJiraIssuesFields() { return this.isJira && this.glFeatures.jiraIssuesIntegration; }, + showReset() { + return this.isInstanceOrGroupLevel && this.propsSource.resetPath; + }, }, methods: { - ...mapActions(['setOverride', 'setIsSaving', 'setIsTesting']), + ...mapActions(['setOverride', 'setIsSaving', 'setIsTesting', 'setIsResetting']), onSaveClick() { this.setIsSaving(true); eventHub.$emit('saveIntegration'); @@ -58,6 +63,7 @@ export default { this.setIsTesting(true); eventHub.$emit('testIntegration'); }, + onResetClick() {}, }, }; </script> @@ -100,7 +106,7 @@ export default { category="primary" variant="success" :loading="isSaving" - :disabled="isSavingOrTesting" + :disabled="isDisabled" data-qa-selector="save_changes_button" > {{ __('Save changes') }} @@ -113,7 +119,7 @@ export default { variant="success" type="submit" :loading="isSaving" - :disabled="isSavingOrTesting" + :disabled="isDisabled" data-qa-selector="save_changes_button" @click.prevent="onSaveClick" > @@ -123,13 +129,27 @@ export default { <gl-button v-if="propsSource.canTest" :loading="isTesting" - :disabled="isSavingOrTesting" + :disabled="isDisabled" :href="propsSource.testPath" @click.prevent="onTestClick" > {{ __('Test settings') }} </gl-button> + <template v-if="showReset"> + <gl-button + v-gl-modal.confirmResetIntegration + category="secondary" + variant="default" + :loading="isResetting" + :disabled="isDisabled" + data-testid="reset-button" + > + {{ __('Reset') }} + </gl-button> + <reset-confirmation-modal @reset="onResetClick" /> + </template> + <gl-button class="btn-cancel" :href="propsSource.cancelPath">{{ __('Cancel') }}</gl-button> </div> </div> diff --git a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue new file mode 100644 index 00000000000..d8503910566 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue @@ -0,0 +1,61 @@ +<script> +import { mapGetters } from 'vuex'; +import { GlModal } from '@gitlab/ui'; + +import { __ } from '~/locale'; + +export default { + components: { + GlModal, + }, + computed: { + ...mapGetters(['isDisabled']), + primaryProps() { + return { + text: __('Reset'), + attributes: [ + { variant: 'warning' }, + { category: 'primary' }, + { disabled: this.isDisabled }, + ], + }; + }, + cancelProps() { + return { + text: __('Cancel'), + }; + }, + }, + methods: { + onReset() { + this.$emit('reset'); + }, + }, +}; +</script> + +<template> + <gl-modal + modal-id="confirmResetIntegration" + size="sm" + :title="s__('Integrations|Reset integration?')" + :action-primary="primaryProps" + :action-cancel="cancelProps" + @primary="onReset" + > + <p> + {{ + s__( + 'Integrations|Resetting this integration will clear the settings and deactivate this integration.', + ) + }} + </p> + <p> + {{ s__('Integrations|All projects inheriting these settings will also be reset.') }} + </p> + + <p class="gl-mb-0"> + {{ s__('Integrations|Projects using custom settings will not be affected.') }} + </p> + </gl-modal> +</template> diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js index 248ee62d43a..95a53f1beab 100644 --- a/app/assets/javascripts/integrations/edit/index.js +++ b/app/assets/javascripts/integrations/edit/index.js @@ -26,6 +26,7 @@ function parseDatasetToProps(data) { integrationLevel, cancelPath, testPath, + resetPath, ...booleanAttributes } = data; const { @@ -49,6 +50,7 @@ function parseDatasetToProps(data) { editable, canTest, testPath, + resetPath, triggerFieldsProps: { initialTriggerCommit: commitEvents, initialTriggerMergeRequest: mergeRequestEvents, diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js index 199c9074ead..097304be242 100644 --- a/app/assets/javascripts/integrations/edit/store/actions.js +++ b/app/assets/javascripts/integrations/edit/store/actions.js @@ -3,3 +3,5 @@ import * as types from './mutation_types'; export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override); export const setIsSaving = ({ commit }, isSaving) => commit(types.SET_IS_SAVING, isSaving); export const setIsTesting = ({ commit }, isTesting) => commit(types.SET_IS_TESTING, isTesting); +export const setIsResetting = ({ commit }, isResetting) => + commit(types.SET_IS_RESETTING, isResetting); diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js index 4ee5f11855c..310d970c73e 100644 --- a/app/assets/javascripts/integrations/edit/store/getters.js +++ b/app/assets/javascripts/integrations/edit/store/getters.js @@ -1,6 +1,6 @@ export const isInheriting = state => (state.defaultState === null ? false : !state.override); -export const isSavingOrTesting = state => state.isSaving || state.isTesting; +export const isDisabled = state => state.isSaving || state.isTesting || state.isResetting; export const propsSource = (state, getters) => getters.isInheriting ? state.defaultState : state.customState; diff --git a/app/assets/javascripts/integrations/edit/store/mutation_types.js b/app/assets/javascripts/integrations/edit/store/mutation_types.js index 0dae8ea079e..2a84408f658 100644 --- a/app/assets/javascripts/integrations/edit/store/mutation_types.js +++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js @@ -1,3 +1,4 @@ export const SET_OVERRIDE = 'SET_OVERRIDE'; export const SET_IS_SAVING = 'SET_IS_SAVING'; export const SET_IS_TESTING = 'SET_IS_TESTING'; +export const SET_IS_RESETTING = 'SET_IS_RESETTING'; diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js index 8ac3c476f9e..07e3e25ccf0 100644 --- a/app/assets/javascripts/integrations/edit/store/mutations.js +++ b/app/assets/javascripts/integrations/edit/store/mutations.js @@ -10,4 +10,7 @@ export default { [types.SET_IS_TESTING](state, isTesting) { state.isTesting = isTesting; }, + [types.SET_IS_RESETTING](state, isResetting) { + state.isResetting = isResetting; + }, }; diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js index a9ecee6c539..aae3db1583f 100644 --- a/app/assets/javascripts/integrations/edit/store/state.js +++ b/app/assets/javascripts/integrations/edit/store/state.js @@ -7,5 +7,6 @@ export default ({ defaultState = null, customState = {} } = {}) => { customState, isSaving: false, isTesting: false, + isResetting: false, }; }; diff --git a/app/assets/javascripts/lib/utils/css_utils.js b/app/assets/javascripts/lib/utils/css_utils.js index 90213221443..02f092e73e1 100644 --- a/app/assets/javascripts/lib/utils/css_utils.js +++ b/app/assets/javascripts/lib/utils/css_utils.js @@ -1,5 +1,7 @@ export function loadCSSFile(path) { return new Promise(resolve => { + if (!path) resolve(); + if (document.querySelector(`link[href="${path}"]`)) { resolve(); } else { diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index 8ac6a44cba9..a81ca3f211f 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -399,3 +399,15 @@ export const truncateNamespace = (string = '') => { * @returns {Boolean} */ export const hasContent = obj => isString(obj) && obj.trim() !== ''; + +/** + * A utility function that validates if a + * string is valid SHA1 hash format. + * + * @param {String} hash to validate + * + * @return {Boolean} true if valid + */ +export const isValidSha1Hash = str => { + return /^[0-9a-f]{5,40}$/.test(str); +}; diff --git a/app/assets/stylesheets/lazy_bundles/select2.scss b/app/assets/stylesheets/lazy_bundles/select2.scss new file mode 100644 index 00000000000..f2c372020ef --- /dev/null +++ b/app/assets/stylesheets/lazy_bundles/select2.scss @@ -0,0 +1,654 @@ +/* +Version: 3.5.2 Timestamp: Sat Nov 1 14:43:36 EDT 2014 +Updated 2020-10-05 by TimZ +*/ +.select2-container { + margin: 0; + position: relative; + display: inline-block; +} + +.select2-container, +.select2-drop, +.select2-search, +.select2-search input { + box-sizing: border-box; +} + +.select2-container .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + border-radius: 4px; + + background-clip: padding-box; + + user-select: none; + + background-color: #fff; + background-image: linear-gradient(to top, #eee 0%, #fff 50%); +} + +html[dir='rtl'] .select2-container .select2-choice { + padding: 0 8px 0 0; +} + +.select2-container.select2-drop-above .select2-choice { + border-bottom-color: #aaa; + + border-radius: 0 0 4px 4px; + + background-image: linear-gradient(to bottom, #eee 0%, #fff 90%); +} + +.select2-container.select2-allowclear .select2-choice .select2-chosen { + margin-right: 42px; +} + +.select2-container .select2-choice > .select2-chosen { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + float: none; + width: auto; +} + +html[dir='rtl'] .select2-container .select2-choice > .select2-chosen { + margin-left: 26px; + margin-right: 0; +} + +.select2-container .select2-choice abbr { + display: none; + width: 12px; + height: 12px; + position: absolute; + right: 24px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) right top no-repeat; + cursor: pointer; + outline: 0; +} + +.select2-container.select2-allowclear .select2-choice abbr { + display: inline-block; +} + +.select2-container .select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.select2-drop-mask { + border: 0; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 9998; + /* styles required for IE to work */ + background-color: #fff; + filter: alpha(opacity=0); +} + +.select2-drop { + width: 100%; + margin-top: -1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + border-radius: 0 0 4px 4px; + + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); +} + +.select2-drop.select2-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + border-radius: 4px 4px 0 0; + + box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15); +} + +.select2-drop-active { + border: 1px solid #5897fb; + border-top: 0; +} + +.select2-drop.select2-drop-above.select2-drop-active { + border-top: 1px solid #5897fb; +} + +.select2-drop-auto-width { + border-top: 1px solid #aaa; + width: auto; +} + +.select2-drop-auto-width .select2-search { + padding-top: 4px; +} + +.select2-container .select2-choice .select2-arrow { + display: inline-block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + border-radius: 0 4px 4px 0; + + background-clip: padding-box; + + background: #ccc; + background-image: linear-gradient(to top, #ccc 0%, #eee 60%); +} + +html[dir='rtl'] .select2-container .select2-choice .select2-arrow { + left: 0; + right: auto; + + border-left: 0; + border-right: 1px solid #aaa; + border-radius: 4px 0 0 4px; +} + +.select2-container .select2-choice .select2-arrow b { + display: block; + width: 100%; + height: 100%; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path("select2.png")) no-repeat 0 1px; +} + +html[dir='rtl'] .select2-container .select2-choice .select2-arrow b { + background-position: 2px 1px; +} + +.select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + border-radius: 0; + + box-shadow: none; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +html[dir='rtl'] .select2-search input { + padding: 4px 5px 4px 20px; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +.select2-drop.select2-drop-above .select2-search input { + margin-top: 4px; +} + +.select2-search input.select2-active { + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2-spinner.gif')) no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} + +.select2-dropdown-open .select2-choice { + border-bottom-color: transparent; + box-shadow: 0 1px 0 #fff inset; + + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: linear-gradient(to top, #fff 0%, #eee 50%); +} + +.select2-dropdown-open.select2-drop-above .select2-choice, +.select2-dropdown-open.select2-drop-above .select2-choices { + border: 1px solid #5897fb; + border-top-color: transparent; + + background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); +} + +.select2-dropdown-open .select2-choice .select2-arrow { + background: transparent; + border-left: 0; + filter: none; +} + +html[dir='rtl'] .select2-dropdown-open .select2-choice .select2-arrow { + border-right: 0; +} + +.select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -18px 1px; +} + +html[dir='rtl'] .select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -16px 1px; +} + +.select2-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* results */ +.select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; +} + +html[dir='rtl'] .select2-results { + padding: 0 4px 0 0; + margin: 4px 0 4px 4px; +} + +.select2-results ul.select2-result-sub { + margin: 0; + padding-left: 0; +} + +.select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: bold; +} + +.select2-results .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + user-select: none; +} + +.select2-results-dept-1 .select2-result-label { padding-left: 20px; } +.select2-results-dept-2 .select2-result-label { padding-left: 40px; } +.select2-results-dept-3 .select2-result-label { padding-left: 60px; } +.select2-results-dept-4 .select2-result-label { padding-left: 80px; } +.select2-results-dept-5 .select2-result-label { padding-left: 100px; } +.select2-results-dept-6 .select2-result-label { padding-left: 110px; } +.select2-results-dept-7 .select2-result-label { padding-left: 120px; } + +.select2-results .select2-highlighted { + background: #3875d7; + color: #fff; +} + +.select2-results li em { + background: #feffde; + font-style: normal; +} + +.select2-results .select2-highlighted em { + background: transparent; +} + +.select2-results .select2-highlighted ul { + background: #fff; + color: #000; +} + +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-ajax-error, +.select2-results .select2-selection-limit { + background: #f4f4f4; + display: list-item; + padding-left: 5px; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.select2-results .select2-disabled.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-selected { + display: none; +} + +.select2-more-results.select2-active { + /* stylelint-disable-next-line function-url-quotes */ + background: #f4f4f4 url(image-path('select2-spinner.gif')) no-repeat 100%; +} + +.select2-results .select2-ajax-error { + background: rgba(255, 50, 50, 0.2); +} + +.select2-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.select2-container.select2-container-disabled .select2-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container.select2-container-disabled .select2-choice .select2-arrow { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.select2-container.select2-container-disabled .select2-choice abbr { + display: none; +} + + +/* multiselect */ + +.select2-container-multi .select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0 5px 0 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: linear-gradient(to bottom, #eee 1%, #fff 15%); +} + +html[dir='rtl'] .select2-container-multi .select2-choices { + padding: 0 0 0 5px; +} + +.select2-locked { + padding: 3px 5px !important; +} + +.select2-container-multi .select2-choices { + min-height: 26px; +} + +.select2-container-multi.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} + +.select2-container-multi .select2-choices li { + float: left; + list-style: none; +} + +html[dir='rtl'] .select2-container-multi .select2-choices li { + float: right; +} + +.select2-container-multi .select2-choices .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + + box-shadow: none; + background: transparent !important; +} + +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + /* stylelint-disable-next-line function-url-quotes */ + background: #fff url(image-path('select2-spinner.gif')) no-repeat 100% !important; +} + +.select2-default { + color: #999 !important; +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaa; + + border-radius: 3px; + + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + + background-clip: padding-box; + + user-select: none; + + background-color: #e4e4e4; + background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); +} + +html[dir='rtl'] .select2-container-multi .select2-choices .select2-search-choice { + margin: 3px 5px 3px 0; + padding: 3px 18px 3px 5px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-chosen { + cursor: default; +} + +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #d4d4d4; +} + +.select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) right top no-repeat; +} + +html[dir='rtl'] .select2-search-choice-close { + right: auto; + left: 3px; +} + +.select2-container-multi .select2-search-choice-close { + left: 3px; +} + +html[dir='rtl'] .select2-container-multi .select2-search-choice-close { + left: auto; + right: 2px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { + background-position: right -11px; +} + +.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.select2-container-multi.select2-container-disabled .select2-choices { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { + padding: 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; + background: none; +} +/* end multiselect */ + + +.select2-result-selectable .select2-match, +.select2-result-unselectable .select2-match { + text-decoration: underline; +} + +.select2-offscreen, +.select2-offscreen:focus { + clip: rect(0 0 0 0) !important; + width: 1px !important; + height: 1px !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + position: absolute !important; + outline: 0 !important; + left: 0 !important; + top: 0 !important; +} + +.select2-display-none { + display: none; +} + +.select2-measure-scrollbar { + position: absolute; + top: -10000px; + left: -10000px; + width: 100px; + height: 100px; + overflow: scroll; +} + +@media only screen and (min-resolution: 120dpi) { + .select2-search input, + .select2-search-choice-close, + .select2-container .select2-choice abbr, + .select2-container .select2-choice .select2-arrow b { + /* stylelint-disable-next-line function-url-quotes */ + background-image: url(image-path("select2x2.png")) !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + + .select2-search input { + background-position: 100% -21px !important; + } +} + +/* End of select2.css */ + +@import './select2_overrides'; diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss new file mode 100644 index 00000000000..6c51c4b0ec3 --- /dev/null +++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss @@ -0,0 +1,359 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; +/** Select2 selectbox style override **/ +.select2-container { + width: 100% !important; + + &.input-md, + &.input-lg { + display: block; + } +} + +.select2-container, +.select2-container.select2-drop-above { + .select2-choice { + background: $white; + color: $gl-text-color; + border-color: $border-color; + height: 34px; + padding: $gl-vert-padding $gl-input-padding; + font-size: $gl-font-size; + line-height: 1.42857143; + border-radius: $gl-border-radius-base; + + .select2-arrow { + background-image: none; + background-color: transparent; + border: 0; + padding-top: 12px; + padding-right: 20px; + font-size: 10px; + + b { + display: none; + } + + &::after { + content: '\f078'; + position: absolute; + z-index: 1; + text-align: center; + pointer-events: none; + box-sizing: border-box; + color: $gray-darkest; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + + .select2-chosen { + margin-right: 15px; + } + + &:hover { + border-color: $gray-darkest; + color: $gl-text-color; + } + } + + // Essentially we’re doing @include form-control-focus here (from + // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a + // `&:focus` selector and we’re never actually focusing the .select2-choice + // link nor the .select2-container, the Select2 library focuses an off-screen + // .select2-focusser element instead. + &.select2-container-active:not(.select2-dropdown-open) { + .select2-choice { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + } + + // Reusable focus “glow” box-shadow + @mixin form-control-focus-glow { + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } + } + + // Apply the focus “glow” shadow to the .select2-container if it also has + // the .block-truncated class as that applies an overflow: hidden, thereby + // hiding the glow of the nested .select2-choice element. + &.block-truncated { + @include form-control-focus-glow; + } + + // Apply the glow directly to the .select2-choice link if we’re not + // block-truncating the container. + &:not(.block-truncated) .select2-choice { + @include form-control-focus-glow; + } + } + + &.is-invalid { + ~ .invalid-feedback { + display: block; + } + + .select2-choices, + .select2-choice { + border-color: $red-500; + } + } +} + +.select2-drop, +.select2-drop.select2-drop-above { + background: $white; + box-shadow: 0 2px 4px $dropdown-shadow-color; + border-radius: $gl-border-radius-base; + border: 1px solid $border-color; + min-width: 175px; + color: $gl-text-color; + z-index: 999; + + .modal-open & { + z-index: $zindex-modal + 200; + } +} + +.select2-drop-mask { + z-index: 998; + + .modal-open & { + z-index: $zindex-modal + 100; + } +} + +.select2-drop.select2-drop-above.select2-drop-active { + border-top: 1px solid $border-color; + margin-top: -6px; +} + +.select2-container-active { + .select2-choice, + .select2-choices { + box-shadow: none; + } +} + +.select2-dropdown-open, +.select2-dropdown-open.select2-drop-above { + .select2-choice { + border-color: $gray-darkest; + outline: 0; + } +} + +.select2-container-multi { + .select2-choices { + border-radius: $border-radius-default; + border-color: $border-color; + background: none; + + .select2-search-field input { + padding: 5px $gl-input-padding; + height: auto; + font-family: inherit; + font-size: inherit; + } + + .select2-search-choice { + margin: 5px 0 0 8px; + box-shadow: none; + border-color: $border-color; + color: $gl-text-color; + line-height: 15px; + background-color: $gray-light; + background-image: none; + padding: 3px 18px 3px 5px; + + .select2-search-choice-close { + top: 5px; + left: initial; + right: 3px; + } + + &.select2-search-choice-focus { + border-color: $gl-text-color; + } + } + } +} + +.select2-drop-active { + margin-top: $dropdown-vertical-offset; + font-size: 14px; + + .select2-results { + max-height: 350px; + } +} + +.select2-search { + padding: $grid-size; + + .select2-drop-auto-width & { + padding: $grid-size; + } + + input { + padding: $grid-size; + background: transparent image-url('select2.png'); + color: $gl-text-color; + background-clip: content-box; + background-origin: content-box; + background-repeat: no-repeat; + background-position: right 0 bottom 0 !important; + border: 1px solid $border-color; + border-radius: $border-radius-default; + line-height: 16px; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + + &:focus { + border-color: $blue-300; + } + + &.select2-active { + background-color: $white; + background-image: image-url('select2-spinner.gif') !important; + background-origin: content-box; + background-repeat: no-repeat; + background-position: right 6px center !important; + background-size: 16px 16px !important; + } + } + + + .select2-results { + padding-top: 0; + } +} + +.select2-results { + margin: 0; + padding: #{$gl-padding / 2} 0; + + .select2-no-results, + .select2-searching, + .select2-ajax-error, + .select2-selection-limit { + background: transparent; + padding: #{$gl-padding / 2} $gl-padding; + } + + .select2-result-label, + .select2-more-results { + padding: #{$gl-padding / 2} $gl-padding; + } + + .select2-highlighted { + background: transparent; + color: $gl-text-color; + + .select2-result-label { + background: $gray-darker; + } + } + + .select2-result { + padding: 0 1px; + } + + li.select2-result-with-children > .select2-result-label { + font-weight: $gl-font-weight-bold; + color: $gl-text-color; + } +} + +.select2-highlighted { + .group-result { + .group-path { + color: $gray-700; + } + } +} + +.select2-result-selectable, +.select2-result-unselectable { + .select2-match { + font-weight: $gl-font-weight-bold; + text-decoration: none; + } +} + +.input-group { + .select2-container { + display: table-cell; + max-width: 180px; + } +} + +.file-editor { + .select2 { + float: right; + } +} + +.import-namespace-select { + > .select2-choice { + border-radius: $border-radius-default 0 0 $border-radius-default; + position: relative; + left: 1px; + } +} + +.issue-form { + .select2-container { + width: 250px !important; + } +} + +.new_project, +.edit-project, +.import-project { + .input-group { + .select2-container { + display: unset; + max-width: unset; + flex-grow: 1; + } + } + + .input-group-prepend, + .input-group-append { + + .select2 a { + border-radius: 0 $gl-border-radius-base $gl-border-radius-base 0; + } + } +} + +.project-path { + .select2-choice { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.transfer-project .select2-container { + min-width: 200px; +} + +.right-sidebar { + .block { + .select2-container span { + margin-top: 0; + } + } +} + +.block-truncated { + > div:not(.block):not(.select2-display-none) { + display: inline; + } +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 1ad77a52b1d..17474b95e50 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -208,9 +208,9 @@ display: inline-flex; .label, - .btn { + .btn:not(.gl-button) { padding: $gl-vert-padding $gl-btn-padding; - border: 1px $border-color solid; + border: 1px $gray-200 solid; font-size: $gl-font-size; line-height: $line-height-base; border-radius: 0; |