diff options
Diffstat (limited to 'app/assets')
27 files changed, 502 insertions, 479 deletions
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js index c14d69c5d18..6b54e8baefb 100644 --- a/app/assets/javascripts/boards/filtered_search_boards.js +++ b/app/assets/javascripts/boards/filtered_search_boards.js @@ -1,6 +1,8 @@ +import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys'; import FilteredSearchContainer from '../filtered_search/container'; import FilteredSearchManager from '../filtered_search/filtered_search_manager'; import boardsStore from './stores/boards_store'; +import { isEE } from '~/lib/utils/common_utils'; export default class FilteredSearchBoards extends FilteredSearchManager { constructor(store, updateUrl = false, cantEdit = []) { @@ -8,6 +10,8 @@ export default class FilteredSearchBoards extends FilteredSearchManager { page: 'boards', isGroupDecendent: true, stateFiltersSelector: '.issues-state-filters', + isGroup: isEE(), + filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, }); this.store = store; diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index a8ee3f4ac10..70b5c6b0094 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -50,7 +50,7 @@ export default { }, modalText() { - const linkStart = `<a class="commit-sha" href="${_.escape(this.commitUrl)}">`; + const linkStart = `<a class="commit-sha mr-0" href="${_.escape(this.commitUrl)}">`; const commitId = _.escape(this.commitShortSha); const linkEnd = '</a>'; const name = _.escape(this.name); diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index c541ea3445b..f0e80cba753 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -504,22 +504,28 @@ export default { class="table-section section-10 deployment-column d-none d-sm-none d-md-block" role="gridcell" > - <span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span> + <span v-if="shouldRenderDeploymentID" class="text-break-word"> + {{ deploymentInternalId }} + </span> - <span v-if="!model.isFolder && deploymentHasUser"> + <span v-if="!model.isFolder && deploymentHasUser" class="text-break-word"> by <user-avatar-link :link-href="deploymentUser.web_url" :img-src="deploymentUser.avatar_url" :img-alt="userImageAltDescription" :tooltip-text="deploymentUser.username" - class="js-deploy-user-container" + class="js-deploy-user-container float-none" /> </span> </div> <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell"> - <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent"> + <a + v-if="shouldRenderBuildName" + :href="buildPath" + class="build-link cgray flex-truncate-parent" + > <span class="flex-truncate-child">{{ buildName }}</span> </a> </div> diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 266cdc42518..bafbc00597e 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -72,10 +72,9 @@ export default { <gl-button v-gl-tooltip v-gl-modal.confirm-rollback-modal - variant="secondary" :disabled="isLoading" :title="title" - class="d-none d-md-block" + class="d-none d-md-block text-secondary" @click="onClick" > <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" /> diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 6d74d136a94..13195d32cc4 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -39,7 +39,7 @@ export default { :aria-label="title" :href="terminalPath" :class="{ disabled: disabled }" - class="btn terminal-button d-none d-sm-none d-md-block" + class="btn terminal-button d-none d-sm-none d-md-block text-secondary" > <icon name="terminal" /> </a> diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js index b844e4c5e5b..ccbe591a63e 100644 --- a/app/assets/javascripts/issuable_bulk_update_actions.js +++ b/app/assets/javascripts/issuable_bulk_update_actions.js @@ -81,9 +81,6 @@ export default { const formData = { update: { state_event: this.form.find('input[name="update[state_event]"]').val(), - // For Merge Requests - assignee_id: this.form.find('input[name="update[assignee_id]"]').val(), - // For Issues assignee_ids: [this.form.find('input[name="update[assignee_ids][]"]').val()], milestone_id: this.form.find('input[name="update[milestone_id]"]').val(), issuable_ids: this.form.find('input[name="update[issuable_ids]"]').val(), diff --git a/app/assets/javascripts/lib/utils/webpack.js b/app/assets/javascripts/lib/utils/webpack.js index a4dad6f1615..37b5409a51d 100644 --- a/app/assets/javascripts/lib/utils/webpack.js +++ b/app/assets/javascripts/lib/utils/webpack.js @@ -6,5 +6,11 @@ export function resetServiceWorkersPublicPath() { // see: https://webpack.js.org/guides/public-path/ const relativeRootPath = (gon && gon.relative_url_root) || ''; const webpackAssetPath = `${relativeRootPath}/assets/webpack/`; + __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase + + // monaco-editor-webpack-plugin currently (incorrectly) references the + // public path as a property of `window`. Once this is fixed upstream we + // can remove this line + // see: https://github.com/Microsoft/monaco-editor-webpack-plugin/pull/63 window.__webpack_public_path__ = webpackAssetPath; // eslint-disable-line } diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js index 9e5d0d0fd28..e97320fd682 100644 --- a/app/assets/javascripts/monitoring/constants.js +++ b/app/assets/javascripts/monitoring/constants.js @@ -18,5 +18,3 @@ export const timeWindows = { threeDays: __('3 days'), oneWeek: __('1 week'), }; - -export const msPerMinute = 60000; diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js index e379827b769..ef309c8a398 100644 --- a/app/assets/javascripts/monitoring/utils.js +++ b/app/assets/javascripts/monitoring/utils.js @@ -1,4 +1,4 @@ -import { timeWindows, msPerMinute } from './constants'; +import { timeWindows } from './constants'; /** * method that converts a predetermined time window to minutes @@ -6,27 +6,26 @@ import { timeWindows, msPerMinute } from './constants'; * @param {String} timeWindow - The time window to convert to minutes * @returns {number} The time window in minutes */ -const getTimeDifferenceMinutes = timeWindow => { +const getTimeDifferenceSeconds = timeWindow => { switch (timeWindow) { case timeWindows.thirtyMinutes: - return 30; + return 60 * 30; case timeWindows.threeHours: - return 60 * 3; + return 60 * 60 * 3; case timeWindows.oneDay: - return 60 * 24 * 1; + return 60 * 60 * 24 * 1; case timeWindows.threeDays: - return 60 * 24 * 3; + return 60 * 60 * 24 * 3; case timeWindows.oneWeek: - return 60 * 24 * 7 * 1; + return 60 * 60 * 24 * 7 * 1; default: - return 60 * 8; + return 60 * 60 * 8; } }; export const getTimeDiff = selectedTimeWindow => { - const end = Date.now(); - const timeDifferenceMinutes = getTimeDifferenceMinutes(selectedTimeWindow); - const start = new Date(end - timeDifferenceMinutes * msPerMinute).getTime(); + const end = Date.now() / 1000; // convert milliseconds to seconds + const start = end - getTimeDifferenceSeconds(selectedTimeWindow); return { start, end }; }; diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 1d6cb9485f7..b30d7fa9b73 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -115,8 +115,11 @@ export default { author() { return this.getUserData; }, - canUpdateIssue() { - return this.getNoteableData.current_user.can_update; + canToggleIssueState() { + return ( + this.getNoteableData.current_user.can_update && + this.getNoteableData.state !== constants.MERGED + ); }, endpoint() { return this.getNoteableData.create_note_path; @@ -415,7 +418,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" </div> <loading-button - v-if="canUpdateIssue" + v-if="canToggleIssueState" :loading="isToggleStateButtonLoading" :container-class="[ actionButtonClassNames, diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index ff303d0f55a..fbf75ed0e41 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -1,6 +1,7 @@ <script> import { mapActions } from 'vuex'; import $ from 'jquery'; +import getDiscussion from 'ee_else_ce/notes/mixins/get_discussion'; import noteEditedText from './note_edited_text.vue'; import noteAwardsList from './note_awards_list.vue'; import noteAttachment from './note_attachment.vue'; @@ -16,7 +17,7 @@ export default { noteForm, Suggestions, }, - mixins: [autosave], + mixins: [autosave, getDiscussion], props: { note: { type: Object, @@ -76,8 +77,8 @@ export default { renderGFM() { $(this.$refs['note-body']).renderGFM(); }, - handleFormUpdate(note, parentElement, callback) { - this.$emit('handleFormUpdate', note, parentElement, callback); + handleFormUpdate(note, parentElement, callback, resolveDiscussion) { + this.$emit('handleFormUpdate', note, parentElement, callback, resolveDiscussion); }, formCancelHandler(shouldConfirm, isDirty) { this.$emit('cancelForm', shouldConfirm, isDirty); @@ -111,6 +112,8 @@ export default { :line="line" :note="note" :help-page-path="helpPagePath" + :discussion="discussion" + :resolve-discussion="note.resolve_discussion" @handleFormUpdate="handleFormUpdate" @cancelForm="formCancelHandler" /> diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index d2cfeff53e8..47d74c2f892 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -4,6 +4,7 @@ import { mapGetters, mapActions } from 'vuex'; import { escape } from 'underscore'; import { truncateSha } from '~/lib/utils/text_utility'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; +import draftMixin from 'ee_else_ce/notes/mixins/draft'; import { s__, sprintf } from '../../locale'; import Flash from '../../flash'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; @@ -23,7 +24,7 @@ export default { noteBody, TimelineEntryItem, }, - mixins: [noteable, resolvable], + mixins: [noteable, resolvable, draftMixin], props: { note: { type: Object, @@ -73,9 +74,6 @@ export default { 'is-editable': this.note.current_user.can_edit, }; }, - canResolve() { - return this.note.resolvable && !!this.getUserData.id; - }, canReportAsAbuse() { return !!this.note.report_abuse_path && this.author.id !== this.getUserData.id; }, @@ -156,12 +154,16 @@ export default { this.$refs.noteBody.resetAutoSave(); this.$emit('updateSuccess'); }, - formUpdateHandler(noteText, parentElement, callback) { + formUpdateHandler(noteText, parentElement, callback, resolveDiscussion) { this.$emit('handleUpdateNote', { note: this.note, noteText, + resolveDiscussion, callback: () => this.updateSuccess(), }); + + if (this.isDraft) return; + const data = { endpoint: this.note.path, note: { @@ -234,6 +236,7 @@ export default { <div class="timeline-content"> <div class="note-header"> <note-header v-once :author="author" :created-at="note.created_at" :note-id="note.id"> + <slot slot="note-header-info" name="note-header-info"></slot> <span v-if="commit" v-html="actionText"></span> <span v-else class="d-none d-sm-inline">·</span> </note-header> @@ -247,12 +250,15 @@ export default { :can-award-emoji="note.current_user.can_award_emoji" :can-delete="note.current_user.can_edit" :can-report-as-abuse="canReportAsAbuse" - :can-resolve="note.current_user.can_resolve" + :can-resolve="canResolve" :report-abuse-path="note.report_abuse_path" - :resolvable="note.resolvable" - :is-resolved="note.resolved" + :resolvable="note.resolvable || note.isDraft" + :is-resolved="note.resolved || note.resolve_discussion" :is-resolving="isResolving" :resolved-by="note.resolved_by" + :is-draft="note.isDraft" + :resolve-discussion="note.isDraft && note.resolve_discussion" + :discussion-id="discussionId" @handleEdit="editHandler" @handleDelete="deleteHandler" @handleResolve="resolveHandler" diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js index fba3db8542c..bdfb6b8f105 100644 --- a/app/assets/javascripts/notes/constants.js +++ b/app/assets/javascripts/notes/constants.js @@ -7,6 +7,7 @@ export const COMMENT = 'comment'; export const OPENED = 'opened'; export const REOPENED = 'reopened'; export const CLOSED = 'closed'; +export const MERGED = 'merged'; export const EMOJI_THUMBSUP = 'thumbsup'; export const EMOJI_THUMBSDOWN = 'thumbsdown'; export const ISSUE_NOTEABLE_TYPE = 'issue'; diff --git a/app/assets/javascripts/notes/mixins/draft.js b/app/assets/javascripts/notes/mixins/draft.js new file mode 100644 index 00000000000..1370f3978df --- /dev/null +++ b/app/assets/javascripts/notes/mixins/draft.js @@ -0,0 +1,8 @@ +export default { + computed: { + isDraft: () => false, + canResolve() { + return this.note.current_user.can_resolve; + }, + }, +}; diff --git a/app/assets/javascripts/notes/mixins/get_discussion.js b/app/assets/javascripts/notes/mixins/get_discussion.js new file mode 100644 index 00000000000..b5d820fe083 --- /dev/null +++ b/app/assets/javascripts/notes/mixins/get_discussion.js @@ -0,0 +1,7 @@ +export default { + computed: { + discussion() { + return {}; + }, + }, +}; diff --git a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue index 52d4b75a3a1..6d908524da9 100644 --- a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue +++ b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue @@ -84,10 +84,7 @@ export default { </div> </div> <div> - <div - v-if="isFetchingMergeRequests" - class="related-related-merge-requests-icon qa-related-merge-requests-loading-icon" - > + <div v-if="isFetchingMergeRequests" class="qa-related-merge-requests-loading-icon"> <gl-loading-icon label="Fetching related merge requests" class="py-2" /> </div> <ul v-else class="content-list related-items-list"> diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue index d1a396182b3..ce378e24289 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -74,8 +74,7 @@ export default { } if (!this.users.length) { - const emptyTooltipLabel = - this.issuableType === 'issue' ? __('Assignee(s)') : __('Assignee'); + const emptyTooltipLabel = __('Assignee(s)'); names.push(emptyTooltipLabel); } @@ -90,6 +89,27 @@ export default { return counter; }, + mergeNotAllowedTooltipMessage() { + const assigneesCount = this.users.length; + + if (this.issuableType !== 'merge_request' || assigneesCount === 0) { + return null; + } + + const cannotMergeCount = this.users.filter(u => u.can_merge === false).length; + const canMergeCount = assigneesCount - cannotMergeCount; + + if (canMergeCount === assigneesCount) { + // Everyone can merge + return null; + } else if (cannotMergeCount === assigneesCount && assigneesCount > 1) { + return 'No one can merge'; + } else if (assigneesCount === 1) { + return 'Cannot merge'; + } + + return `${canMergeCount}/${assigneesCount} can merge`; + }, }, methods: { assignSelf() { @@ -154,6 +174,15 @@ export default { </button> </div> <div class="value hide-collapsed"> + <span + v-if="mergeNotAllowedTooltipMessage" + v-tooltip + :title="mergeNotAllowedTooltipMessage" + data-placement="left" + class="float-right cannot-be-merged" + > + <i aria-hidden="true" data-hidden="true" class="fa fa-exclamation-triangle"></i> + </span> <template v-if="hasNoUsers"> <span class="assign-yourself no-value"> No assignee diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 3f282138bdf..944b9c0c083 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -162,7 +162,7 @@ export default { </template> <icon name="commit" class="commit-icon js-commit-icon" /> - <gl-link :href="commitUrl" class="commit-sha"> {{ shortSha }} </gl-link> + <gl-link :href="commitUrl" class="commit-sha mr-0"> {{ shortSha }} </gl-link> <div class="commit-title flex-truncate-parent"> <span v-if="title" class="flex-truncate-child"> diff --git a/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue index 06974a12aed..f316c4fe112 100644 --- a/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue +++ b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue @@ -1,9 +1,3 @@ -<script> -export default { - name: 'TimelineEntryItem', -}; -</script> - <template> <li class="timeline-entry"> <div class="timeline-entry-inner"><slot></slot></div> diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8aaa9772715..a2f518cd24e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -28,6 +28,9 @@ // Component specific styles, will be moved to gitlab-ui @import "components/**/*"; +// Vendors specific styles +@import "vendors/**/*"; + // Styles for JS behaviors. @import "behaviors"; diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 5a5601f2fa3..628dffc39f1 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -25,6 +25,18 @@ $item-weight-max-width: 48px; flex-grow: 1; } + .issue-token-state-icon-open { + color: $green-500; + } + + .issue-token-state-icon-closed { + color: $blue-500; + } + + .merge-request-status.closed { + color: $red-500; + } + .issue-token-state-icon-open, .issue-token-state-icon-closed, .confidential-icon, diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 7c10de828cd..bfd96a4bc05 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -163,88 +163,6 @@ } } -.atwho-view { - overflow-y: auto; - overflow-x: hidden; - - .name, - small.aliases, - small.params { - float: left; - } - - small.aliases, - small.params { - padding: 2px 5px; - } - - small.description { - float: right; - padding: 3px 5px; - } - - .avatar-inline { - margin-bottom: 0; - } - - .has-warning { - .name, - .description { - color: $orange-700; - } - } - - .cur { - .avatar { - @include disable-all-animation; - border: 1px solid $white-light; - } - } - - ul > li { - @include clearfix; - white-space: nowrap; - } - - // TODO: fallback to global style - .atwho-view-ul { - padding: 8px 1px; - - li { - padding: 8px 16px; - border: 0; - - &.cur { - background-color: $gray-darker; - color: $gl-text-color; - - small { - color: inherit; - } - - &.has-warning { - color: $orange-700; - background-color: $orange-100; - } - } - - div.avatar { - display: inline-flex; - justify-content: center; - align-items: center; - - .center { - line-height: 14px; - } - } - - strong { - color: $gl-text-color; - } - } - } -} - .md-suggestion-diff { display: table !important; border: 1px solid $border-color !important; @@ -269,15 +187,6 @@ } @include media-breakpoint-down(xs) { - .atwho-view-ul { - width: 350px; - } - - .atwho-view ul li { - overflow: hidden; - text-overflow: ellipsis; - } - .referenced-users { margin-right: 0; } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 8e1ee51628d..93dffb5ff09 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -12,34 +12,6 @@ .environments-container { .ci-table { - .deployment-column { - > span { - word-break: break-all; - } - - .avatar { - float: none; - } - } - - .btn-group { - > .btn:not(.btn-danger) { - color: $gl-text-color-secondary; - } - - svg path { - fill: $gl-text-color-secondary; - } - - .dropdown { - outline: none; - } - } - - .btn .text-center { - display: inline; - } - .commit-title { margin: 0; } @@ -49,47 +21,16 @@ color: $gl-text-color-secondary; } - .dropdown-menu { - .fa { - margin-right: 6px; - color: $gl-text-color-secondary; - } - } - .build-link, .ref-name { color: $gl-text-color; } - .stop-env-link, - .external-url { - color: $gl-text-color-secondary; - - .stop-env-icon { - font-size: 14px; - } - } - - .deployment .build-column { - .build-link { - color: $gl-text-color; - } - - .avatar { - float: none; - margin-right: 0; - } - } - .folder-icon { margin-right: 3px; color: $gl-text-color-secondary; display: inline-block; vertical-align: text-top; - - .fa:nth-child(1) { - margin-right: 3px; - } } .folder-name { @@ -103,12 +44,6 @@ text-align: center; } - .branch-commit { - .commit-sha { - margin-right: 0; - } - } - .no-btn { border: 0; background: none; @@ -168,11 +103,6 @@ opacity: 0.25; } -.prometheus-graph-overlay { - fill: none; - opacity: 0; - pointer-events: all; -} .rect-text-metric { fill: $white-light; @@ -203,276 +133,10 @@ stroke: $gray-darkest; } -.prometheus-graphs { - .dropdowns { - .dropdown-menu-toggle { - svg { - position: absolute; - right: 5%; - top: 25%; - } - } - - .dropdown-menu-toggle, - .dropdown-menu { - width: 240px; - } - } -} - .environments-actions { .external-url, .monitoring-url, - .terminal-button, - .stop-env-link { + .terminal-button { width: 38px; } } - -.prometheus-panel { - margin-top: 20px; -} - -.prometheus-graph-group { - display: flex; - flex-wrap: wrap; - padding: $gl-padding / 2; -} - -.prometheus-graph { - padding: $gl-padding / 2; -} - -.prometheus-graph-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: $gl-padding-8; - - h5 { - font-size: $gl-font-size-large; - margin: 0; - } -} - -.prometheus-graph-cursor { - position: absolute; - background: $gray-600; - width: 1px; -} - -.prometheus-graph-flag { - display: block; - min-width: 160px; - border: 0; - box-shadow: 0 1px 4px 0 $black-transparent; - - h5 { - padding: 0; - margin: 0; - font-size: 14px; - line-height: 1.2; - } - - .deploy-meta-content { - border-bottom: 1px solid $white-dark; - - svg { - height: 15px; - vertical-align: bottom; - } - } - - &.popover { - padding: 0; - - &.left { - left: auto; - right: 0; - margin-right: 10px; - - > .arrow { - right: -14px; - border-left-color: $border-color; - } - - > .arrow::after { - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-left: 4px solid $gray-50; - } - - .arrow-shadow { - right: -3px; - box-shadow: 1px 0 9px 0 $black-transparent; - } - } - - &.right { - left: 0; - right: auto; - margin-left: 10px; - - > .arrow { - left: -7px; - border-right-color: $border-color; - } - - > .arrow::after { - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-right: 4px solid $gray-50; - } - - .arrow-shadow { - left: -3px; - box-shadow: 1px 0 8px 0 $black-transparent; - } - } - - > .arrow { - top: 10px; - margin: 0; - } - - .arrow-shadow { - content: ''; - position: absolute; - width: 7px; - height: 7px; - background-color: transparent; - transform: rotate(45deg); - top: 13px; - } - - > .popover-title, - > .popover-content, - > .popover-header, - > .popover-body { - padding: 8px; - font-size: 12px; - white-space: nowrap; - position: relative; - } - - > .popover-title { - background-color: $gray-50; - border-radius: $border-radius-default $border-radius-default 0 0; - } - } - - strong { - font-weight: 600; - } -} - -.prometheus-table { - border-collapse: collapse; - padding: 0; - margin: 0; - - td { - vertical-align: middle; - - + td { - padding-left: 8px; - vertical-align: top; - } - } - - .legend-metric-title { - font-size: 12px; - vertical-align: middle; - } -} - -.prometheus-svg-container { - position: relative; - height: 0; - width: 100%; - padding: 0; - padding-bottom: 100%; - - .text-metric-usage { - fill: $black; - font-weight: $gl-font-weight-normal; - font-size: 12px; - } - - > svg { - position: absolute; - height: 100%; - width: 100%; - left: 0; - top: 0; - - text { - fill: $gl-text-color; - stroke-width: 0; - } - - .text-metric-bold { - font-weight: $gl-font-weight-bold; - } - - .label-axis-text { - fill: $black; - font-weight: $gl-font-weight-normal; - font-size: 10px; - } - - .legend-axis-text { - fill: $black; - } - - .tick { - > line { - stroke: $gray-darker; - } - - > text { - fill: $gray-600; - font-size: 10px; - } - } - - .y-label-text, - .x-label-text { - fill: $gray-darkest; - } - - .axis-tick { - stroke: $gray-darker; - } - - .deploy-info-text { - dominant-baseline: text-before-edge; - font-size: 12px; - } - - .deploy-info-text-link { - font-family: $monospace-font; - fill: $blue-600; - - &:hover { - fill: $blue-800; - } - } - - @include media-breakpoint-down(sm) { - .label-axis-text, - .text-metric-usage, - .legend-axis-text { - font-size: 8px; - } - - .tick > text { - font-size: 8px; - } - } - } -} - -.prometheus-table-row-highlight { - background-color: $gray-100; -} diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 86b58c1b1b2..709940ba6c8 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -498,6 +498,16 @@ flex: 1; } + .issuable-meta { + .author-link { + display: inline-block; + } + + .issuable-comments { + height: 18px; + } + } + .merge-request-title { margin-bottom: 2px; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 792c618fd40..7778b4aab3d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -67,6 +67,10 @@ } } +.classification-label { + background-color: $red-500; +} + .toggle-wrapper { margin-top: 5px; } @@ -1158,6 +1162,8 @@ pre.light-well { .cannot-be-merged:hover { color: $red-500; margin-top: 2px; + position: relative; + z-index: 2; } .private-forks-notice .private-fork-icon { diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss new file mode 100644 index 00000000000..c03554b287f --- /dev/null +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -0,0 +1,270 @@ +.prometheus-graphs { + .dropdowns { + .dropdown-menu-toggle { + svg { + position: absolute; + right: 5%; + top: 25%; + } + } + + .dropdown-menu-toggle, + .dropdown-menu { + width: 240px; + } + } +} + +.prometheus-panel { + margin-top: 20px; +} + +.prometheus-graph-group { + display: flex; + flex-wrap: wrap; + padding: $gl-padding / 2; +} + +.prometheus-graph { + padding: $gl-padding / 2; +} + +.prometheus-graph-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: $gl-padding-8; + + h5 { + font-size: $gl-font-size-large; + margin: 0; + } +} + +.prometheus-graph-cursor { + position: absolute; + background: $gray-600; + width: 1px; +} + +.prometheus-graph-flag { + display: block; + min-width: 160px; + border: 0; + box-shadow: 0 1px 4px 0 $black-transparent; + + h5 { + padding: 0; + margin: 0; + font-size: 14px; + line-height: 1.2; + } + + .deploy-meta-content { + border-bottom: 1px solid $white-dark; + + svg { + height: 15px; + vertical-align: bottom; + } + } + + &.popover { + padding: 0; + + &.left { + left: auto; + right: 0; + margin-right: 10px; + + > .arrow { + right: -14px; + border-left-color: $border-color; + } + + > .arrow::after { + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 4px solid $gray-50; + } + + .arrow-shadow { + right: -3px; + box-shadow: 1px 0 9px 0 $black-transparent; + } + } + + &.right { + left: 0; + right: auto; + margin-left: 10px; + + > .arrow { + left: -7px; + border-right-color: $border-color; + } + + > .arrow::after { + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 4px solid $gray-50; + } + + .arrow-shadow { + left: -3px; + box-shadow: 1px 0 8px 0 $black-transparent; + } + } + + > .arrow { + top: 10px; + margin: 0; + } + + .arrow-shadow { + content: ''; + position: absolute; + width: 7px; + height: 7px; + background-color: transparent; + transform: rotate(45deg); + top: 13px; + } + + > .popover-title, + > .popover-content, + > .popover-header, + > .popover-body { + padding: 8px; + font-size: 12px; + white-space: nowrap; + position: relative; + } + + > .popover-title { + background-color: $gray-50; + border-radius: $border-radius-default $border-radius-default 0 0; + } + } + + strong { + font-weight: 600; + } +} + +.prometheus-table { + border-collapse: collapse; + padding: 0; + margin: 0; + + td { + vertical-align: middle; + + + td { + padding-left: 8px; + vertical-align: top; + } + } + + .legend-metric-title { + font-size: 12px; + vertical-align: middle; + } +} + +.prometheus-svg-container { + position: relative; + height: 0; + width: 100%; + padding: 0; + padding-bottom: 100%; + + .text-metric-usage { + fill: $black; + font-weight: $gl-font-weight-normal; + font-size: 12px; + } + + > svg { + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + + text { + fill: $gl-text-color; + stroke-width: 0; + } + + .text-metric-bold { + font-weight: $gl-font-weight-bold; + } + + .label-axis-text { + fill: $black; + font-weight: $gl-font-weight-normal; + font-size: 10px; + } + + .legend-axis-text { + fill: $black; + } + + .tick { + > line { + stroke: $gray-darker; + } + + > text { + fill: $gray-600; + font-size: 10px; + } + } + + .y-label-text, + .x-label-text { + fill: $gray-darkest; + } + + .axis-tick { + stroke: $gray-darker; + } + + .deploy-info-text { + dominant-baseline: text-before-edge; + font-size: 12px; + } + + .deploy-info-text-link { + font-family: $monospace-font; + fill: $blue-600; + + &:hover { + fill: $blue-800; + } + } + + @include media-breakpoint-down(sm) { + .label-axis-text, + .text-metric-usage, + .legend-axis-text { + font-size: 8px; + } + + .tick > text { + font-size: 8px; + } + } + } +} + +.prometheus-table-row-highlight { + background-color: $gray-100; +} + +.prometheus-graph-overlay { + fill: none; + opacity: 0; + pointer-events: all; +} diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss new file mode 100644 index 00000000000..ccf3824ea56 --- /dev/null +++ b/app/assets/stylesheets/vendors/atwho.scss @@ -0,0 +1,92 @@ +.atwho-view { + overflow-y: auto; + overflow-x: hidden; + + .name, + small.aliases, + small.params { + float: left; + } + + small.aliases, + small.params { + padding: 2px 5px; + } + + small.description { + float: right; + padding: 3px 5px; + } + + .avatar-inline { + margin-bottom: 0; + } + + .has-warning { + .name, + .description { + color: $orange-700; + } + } + + .cur { + .avatar { + @include disable-all-animation; + border: 1px solid $white-light; + } + } + + ul > li { + @include clearfix; + white-space: nowrap; + } + + // TODO: fallback to global style + .atwho-view-ul { + padding: 8px 1px; + + li { + padding: 8px 16px; + border: 0; + + &.cur { + background-color: $gray-darker; + color: $gl-text-color; + + small { + color: inherit; + } + + &.has-warning { + color: $orange-700; + background-color: $orange-100; + } + } + + div.avatar { + display: inline-flex; + justify-content: center; + align-items: center; + + .center { + line-height: 14px; + } + } + + strong { + color: $gl-text-color; + } + } + } +} + +@include media-breakpoint-down(xs) { + .atwho-view-ul { + width: 350px; + } + + .atwho-view ul li { + overflow: hidden; + text-overflow: ellipsis; + } +} |