diff options
Diffstat (limited to 'app/assets')
18 files changed, 114 insertions, 105 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 32cb42c8b10..81697af189b 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -1,4 +1,3 @@ -import Cookies from 'js-cookie'; import bp from './breakpoints'; const HIDE_INTERVAL_TIMEOUT = 300; @@ -8,9 +7,11 @@ const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out'; let currentOpenMenu = null; let menuCornerLocs; let timeoutId; +let sidebar; export const mousePos = []; +export const setSidebar = (el) => { sidebar = el; }; export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; }; export const slope = (a, b) => (b.y - a.y) / (b.x - a.x); @@ -20,10 +21,8 @@ let headerHeight = 50; export const getHeaderHeight = () => headerHeight; export const canShowActiveSubItems = (el) => { - const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md'; - - if (el.classList.contains('active') && !isHiddenByMedia) { - return Cookies.get('sidebar_collapsed') === 'true'; + if (el.classList.contains('active') && (sidebar && !sidebar.classList.contains('sidebar-icons-only'))) { + return false; } return true; @@ -143,13 +142,13 @@ export const documentMouseMove = (e) => { }; export default () => { - const sidebar = document.querySelector('.sidebar-top-level-items'); + sidebar = document.querySelector('.nav-sidebar'); if (!sidebar) return; const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')]; - sidebar.addEventListener('mouseleave', () => { + sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue index d59e6d11032..992b7064c13 100644 --- a/app/assets/javascripts/issue_show/components/edited.vue +++ b/app/assets/javascripts/issue_show/components/edited.vue @@ -37,7 +37,7 @@ export default { Edited <time-ago-tooltip v-if="updatedAt" - placement="bottom" + tooltip-placement="bottom" :time="updatedAt" /> <span diff --git a/app/assets/javascripts/monitoring/components/monitoring.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index a6a2d3119e3..74244faa5d9 100644 --- a/app/assets/javascripts/monitoring/components/monitoring.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -3,8 +3,9 @@ import _ from 'underscore'; import statusCodes from '../../lib/utils/http_status'; import MonitoringService from '../services/monitoring_service'; - import monitoringRow from './monitoring_row.vue'; - import monitoringState from './monitoring_state.vue'; + import GraphGroup from './graph_group.vue'; + import GraphRow from './graph_row.vue'; + import EmptyState from './empty_state.vue'; import MonitoringStore from '../stores/monitoring_store'; import eventHub from '../event_hub'; @@ -31,8 +32,9 @@ }, components: { - monitoringRow, - monitoringState, + GraphGroup, + GraphRow, + EmptyState, }, methods: { @@ -94,7 +96,6 @@ this.updatedAspectRatios = 0; } }, - }, created() { @@ -118,40 +119,27 @@ }, }; </script> + <template> - <div - class="prometheus-graphs" - v-if="!showEmptyState"> - <div - class="row" + <div v-if="!showEmptyState" class="prometheus-graphs"> + <graph-group v-for="(groupData, index) in store.groups" - :key="index"> - <div - class="col-md-12"> - <div - class="panel panel-default prometheus-panel"> - <div - class="panel-heading"> - <h4>{{groupData.group}}</h4> - </div> - <div - class="panel-body"> - <monitoring-row - v-for="(row, index) in groupData.metrics" - :key="index" - :row-data="row" - :update-aspect-ratio="updateAspectRatio" - :deployment-data="store.deploymentData" - /> - </div> - </div> - </div> - </div> + :key="index" + :name="groupData.group" + > + <graph-row + v-for="(row, index) in groupData.metrics" + :key="index" + :row-data="row" + :update-aspect-ratio="updateAspectRatio" + :deployment-data="store.deploymentData" + /> + </graph-group> </div> - <monitoring-state + <empty-state + v-else :selected-state="state" :documentation-path="documentationPath" :settings-path="settingsPath" - v-else /> </template> diff --git a/app/assets/javascripts/monitoring/components/monitoring_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index 598021aa4df..a8708be76de 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_state.vue +++ b/app/assets/javascripts/monitoring/components/empty_state.vue @@ -62,49 +62,33 @@ }, }; </script> + <template> - <div - class="prometheus-state"> - <div - class="row"> - <div - class="col-md-4 col-md-offset-4 state-svg" - v-html="currentState.svg"> - </div> + <div class="prometheus-state"> + <div class="row"> + <div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div> </div> - <div - class="row"> - <div - class="col-md-6 col-md-offset-3"> - <h4 - class="text-center state-title"> + <div class="row"> + <div class="col-md-6 col-md-offset-3"> + <h4 class="text-center state-title"> {{currentState.title}} </h4> </div> </div> - <div - class="row"> - <div - class="col-md-6 col-md-offset-3"> - <div - class="description-text text-center state-description"> - {{currentState.description}} - <a - :href="settingsPath" - v-if="showButtonDescription"> - Prometheus server - </a> + <div class="row"> + <div class="col-md-6 col-md-offset-3"> + <div class="description-text text-center state-description"> + {{currentState.description}} + <a v-if="showButtonDescription" :href="settingsPath"> + Prometheus server + </a> </div> </div> </div> - <div - class="row state-button-section"> - <div - class="col-md-4 col-md-offset-4 text-center state-button"> - <a - class="btn btn-success" - :href="buttonPath"> - {{currentState.buttonText}} + <div class="row state-button-section"> + <div class="col-md-4 col-md-offset-4 text-center state-button"> + <a class="btn btn-success" :href="buttonPath"> + {{currentState.buttonText}} </a> </div> </div> diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/graph.vue index a31c26fb4fc..6f6da9e1463 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_column.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -1,8 +1,8 @@ <script> import d3 from 'd3'; - import monitoringLegends from './monitoring_legends.vue'; - import monitoringFlag from './monitoring_flag.vue'; - import monitoringDeployment from './monitoring_deployment.vue'; + import GraphLegend from './graph/legend.vue'; + import GraphFlag from './graph/flag.vue'; + import GraphDeployment from './graph/deployment.vue'; import MonitoringMixin from '../mixins/monitoring_mixins'; import eventHub from '../event_hub'; import measurements from '../utils/measurements'; @@ -14,7 +14,7 @@ export default { props: { - columnData: { + graphData: { type: Object, required: true, }, @@ -66,9 +66,9 @@ }, components: { - monitoringLegends, - monitoringFlag, - monitoringDeployment, + GraphLegend, + GraphFlag, + GraphDeployment, }, computed: { @@ -97,7 +97,7 @@ methods: { draw() { const breakpointSize = bp.getBreakpointSize(); - const query = this.columnData.queries[0]; + const query = this.graphData.queries[0]; this.margin = measurements.large.margin; if (breakpointSize === 'xs' || breakpointSize === 'sm') { this.graphHeight = 300; @@ -106,7 +106,7 @@ } this.data = query.result[0].values; this.unitOfDisplay = query.unit || ''; - this.yAxisLabel = this.columnData.y_label || 'Values'; + this.yAxisLabel = this.graphData.y_label || 'Values'; this.legendTitle = query.label || 'Average'; this.graphWidth = this.$refs.baseSvg.clientWidth - this.margin.left - this.margin.right; @@ -224,7 +224,7 @@ :class="classType"> <h5 class="text-center graph-title"> - {{columnData.title}} + {{graphData.title}} </h5> <div class="prometheus-svg-container" @@ -240,7 +240,7 @@ class="y-axis" transform="translate(70, 20)"> </g> - <monitoring-legends + <graph-legend :graph-width="graphWidth" :graph-height="graphHeight" :margin="margin" @@ -268,13 +268,13 @@ stroke-width="2" transform="translate(-5, 20)"> </path> - <monitoring-deployment + <graph-deployment :show-deploy-info="showDeployInfo" :deployment-data="reducedDeploymentData" :graph-height="graphHeight" :graph-height-offset="graphHeightOffset" /> - <monitoring-flag + <graph-flag v-if="showFlag" :current-x-coordinate="currentXCoordinate" :current-y-coordinate="currentYCoordinate" diff --git a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue index dadbcd1aaa6..3623d2ed946 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue +++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue @@ -1,5 +1,5 @@ <script> - import { dateFormat, timeFormat } from '../utils/date_time_formatters'; + import { dateFormat, timeFormat } from '../../utils/date_time_formatters'; export default { props: { diff --git a/app/assets/javascripts/monitoring/components/monitoring_flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue index 61cbeeebb17..c4d4647d240 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_flag.vue +++ b/app/assets/javascripts/monitoring/components/graph/flag.vue @@ -1,5 +1,5 @@ <script> - import { dateFormat, timeFormat } from '../utils/date_time_formatters'; + import { dateFormat, timeFormat } from '../../utils/date_time_formatters'; export default { props: { diff --git a/app/assets/javascripts/monitoring/components/monitoring_legends.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index 922a5e1bf0e..d08f9cbffd4 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_legends.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -74,7 +74,7 @@ }; </script> <template> - <g + <g class="axis-label-container"> <line class="label-x-axis-line" @@ -100,7 +100,7 @@ :width="yLabelWidth" :height="yLabelHeight"> </rect> - <text + <text class="label-axis-text y-label-text" text-anchor="middle" :transform="textTransform" diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue new file mode 100644 index 00000000000..32c90fda8cc --- /dev/null +++ b/app/assets/javascripts/monitoring/components/graph_group.vue @@ -0,0 +1,21 @@ +<script> +export default { + props: { + name: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="panel panel-default prometheus-panel"> + <div class="panel-heading"> + <h4>{{name}}</h4> + </div> + <div class="panel-body"> + <slot /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/monitoring/components/monitoring_row.vue b/app/assets/javascripts/monitoring/components/graph_row.vue index e5528f17880..bdb9149c3b4 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_row.vue +++ b/app/assets/javascripts/monitoring/components/graph_row.vue @@ -1,5 +1,5 @@ <script> - import monitoringColumn from './monitoring_column.vue'; + import Graph from './graph.vue'; export default { props: { @@ -17,7 +17,7 @@ }, }, components: { - monitoringColumn, + Graph, }, computed: { bootstrapClass() { @@ -26,12 +26,12 @@ }, }; </script> + <template> - <div - class="prometheus-row row"> - <monitoring-column - v-for="(column, index) in rowData" - :column-data="column" + <div class="prometheus-row row"> + <graph + v-for="(graphData, index) in rowData" + :graph-data="graphData" :class-type="bootstrapClass" :key="index" :update-aspect-ratio="updateAspectRatio" diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js index 5d5cb56af72..ef280e02092 100644 --- a/app/assets/javascripts/monitoring/monitoring_bundle.js +++ b/app/assets/javascripts/monitoring/monitoring_bundle.js @@ -1,10 +1,10 @@ import Vue from 'vue'; -import Monitoring from './components/monitoring.vue'; +import Dashboard from './components/dashboard.vue'; document.addEventListener('DOMContentLoaded', () => new Vue({ el: '#prometheus-graphs', components: { - 'monitoring-dashboard': Monitoring, + Dashboard, }, - render: createElement => createElement('monitoring-dashboard'), + render: createElement => createElement('dashboard'), })); diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js index b18d12b48b5..05e3f33f5ed 100644 --- a/app/assets/javascripts/new_sidebar.js +++ b/app/assets/javascripts/new_sidebar.js @@ -15,6 +15,7 @@ export default class NewNavSidebar { this.$openSidebar = $('.toggle-mobile-nav'); this.$closeSidebar = $('.close-nav-button'); this.$sidebarToggle = $('.js-toggle-sidebar'); + this.$topLevelLinks = $('.sidebar-top-level-items > li > a'); } bindEvents() { @@ -50,6 +51,10 @@ export default class NewNavSidebar { this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed); } NewNavSidebar.setCollapsedCookie(collapsed); + + this.$topLevelLinks.attr('title', function updateTopLevelTitle() { + return collapsed ? this.getAttribute('aria-label') : ''; + }); } render() { diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 5df317a76bf..010063a0240 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -139,7 +139,9 @@ }; </script> <template> - <div :class="cssClass"> + <div + class="pipelines-container" + :class="cssClass"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs" v-if="!isLoading && !shouldRenderEmptyState"> diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 4cf2f46c6d3..5871383a57b 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -189,7 +189,7 @@ width: auto; top: 100%; left: 0; - z-index: 9; + z-index: 200; min-width: 240px; max-width: 500px; margin-top: 2px; @@ -797,3 +797,5 @@ margin-top: 2px; } } + +@include new-style-dropdown('.js-namespace-select + '); diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 8018eb8ba84..a39927eb0df 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -267,6 +267,7 @@ // TODO: change global style .ajax-project-dropdown, +body[data-page="projects:new"] #select2-drop, body[data-page="projects:blob:new"] #select2-drop, body[data-page="profiles:show"] #select2-drop, body[data-page="projects:blob:edit"] #select2-drop { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index b2423bc1a66..3c0b4c82d19 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -25,6 +25,7 @@ min-width: inherit; min-height: inherit; background-color: inherit; + max-width: 100%; } p a:not(.no-attachment-icon) img { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 334bec8dd7e..9d51c0b7a8a 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -612,6 +612,8 @@ } .mr-version-controls { + @include new-style-dropdown; + position: relative; background: $gray-light; color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a408bde37d6..51656669c98 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -927,3 +927,7 @@ button.mini-pipeline-graph-dropdown-toggle { } } } + +.pipelines-container .top-area .nav-controls > .btn:last-child { + float: none; +} |