From 27e8d38cea92d165a2e8400b25df23f408b4dca0 Mon Sep 17 00:00:00 2001 From: haseeb Date: Tue, 6 Feb 2018 19:03:18 +0530 Subject: embedded snippets support --- app/assets/images/ext_snippet_icons/doc_code.png | Bin 0 -> 1058 bytes app/assets/images/ext_snippet_icons/doc_text.png | Bin 0 -> 996 bytes app/assets/images/ext_snippet_icons/download.png | Bin 0 -> 1098 bytes app/assets/images/ext_snippet_icons/logo.png | Bin 0 -> 736 bytes app/assets/javascripts/snippet/snippet_embed.js | 18 ++ app/assets/stylesheets/application.scss | 6 +- app/assets/stylesheets/highlight/embedded.scss | 3 + app/assets/stylesheets/highlight/white.scss | 291 +-------------------- app/assets/stylesheets/highlight/white_base.scss | 290 ++++++++++++++++++++ app/assets/stylesheets/snippets.scss | 132 ++++++++++ app/controllers/concerns/snippets_actions.rb | 4 + app/controllers/projects/snippets_controller.rb | 3 + app/controllers/snippets_controller.rb | 4 + app/helpers/icons_helper.rb | 4 + app/helpers/snippets_helper.rb | 35 +++ app/views/projects/blob/_viewer.html.haml | 3 + .../blob/viewers/_highlight_embed.html.haml | 7 + app/views/shared/snippets/_embed.html.haml | 23 ++ app/views/shared/snippets/_header.html.haml | 21 ++ app/views/shared/snippets/show.js.haml | 2 + 20 files changed, 555 insertions(+), 291 deletions(-) create mode 100644 app/assets/images/ext_snippet_icons/doc_code.png create mode 100644 app/assets/images/ext_snippet_icons/doc_text.png create mode 100644 app/assets/images/ext_snippet_icons/download.png create mode 100644 app/assets/images/ext_snippet_icons/logo.png create mode 100644 app/assets/javascripts/snippet/snippet_embed.js create mode 100644 app/assets/stylesheets/highlight/embedded.scss create mode 100644 app/assets/stylesheets/highlight/white_base.scss create mode 100644 app/assets/stylesheets/snippets.scss create mode 100644 app/views/projects/blob/viewers/_highlight_embed.html.haml create mode 100644 app/views/shared/snippets/_embed.html.haml create mode 100644 app/views/shared/snippets/show.js.haml (limited to 'app') diff --git a/app/assets/images/ext_snippet_icons/doc_code.png b/app/assets/images/ext_snippet_icons/doc_code.png new file mode 100644 index 00000000000..b1a589a848f Binary files /dev/null and b/app/assets/images/ext_snippet_icons/doc_code.png differ diff --git a/app/assets/images/ext_snippet_icons/doc_text.png b/app/assets/images/ext_snippet_icons/doc_text.png new file mode 100644 index 00000000000..aee32cc3620 Binary files /dev/null and b/app/assets/images/ext_snippet_icons/doc_text.png differ diff --git a/app/assets/images/ext_snippet_icons/download.png b/app/assets/images/ext_snippet_icons/download.png new file mode 100644 index 00000000000..045fb0f2e95 Binary files /dev/null and b/app/assets/images/ext_snippet_icons/download.png differ diff --git a/app/assets/images/ext_snippet_icons/logo.png b/app/assets/images/ext_snippet_icons/logo.png new file mode 100644 index 00000000000..12f8315cad8 Binary files /dev/null and b/app/assets/images/ext_snippet_icons/logo.png differ diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js new file mode 100644 index 00000000000..c032414552e --- /dev/null +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -0,0 +1,18 @@ +(() => { + $(() => { + const { protocol, host, pathname } = location; + + $('#share-btn').click((event) => { + event.preventDefault(); + $('#snippet-url-area').val(`${protocol}//${host + pathname}`); + $('#embed-action').html('Share'); + }); + + $('#embed-btn').click((event) => { + event.preventDefault(); + const scriptTag = ``; + $('#snippet-url-area').val(scriptTag); + $('#embed-action').html('Embed'); + }); + }); +}).call(window); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0665622fe4a..f2950308019 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -37,7 +37,11 @@ /* * Code highlight */ -@import "highlight/**/*"; +@import "highlight/dark"; +@import "highlight/monokai"; +@import "highlight/solarized_dark"; +@import "highlight/solarized_light"; +@import "highlight/white"; /* * Styles for JS behaviors. diff --git a/app/assets/stylesheets/highlight/embedded.scss b/app/assets/stylesheets/highlight/embedded.scss new file mode 100644 index 00000000000..44c8a1d39ec --- /dev/null +++ b/app/assets/stylesheets/highlight/embedded.scss @@ -0,0 +1,3 @@ +.code { + @import "white_base"; +} diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index c3d8f0c61a2..355c8d223f7 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -1,292 +1,3 @@ -/* https://github.com/aahan/pygments-github-style */ - -/* -* White Syntax Colors -*/ -$white-code-color: $gl-text-color; -$white-highlight: #fafe3d; -$white-pre-hll-bg: #f8eec7; -$white-hll-bg: #f8f8f8; -$white-over-bg: #ded7fc; -$white-expanded-border: #e0e0e0; -$white-expanded-bg: #f7f7f7; -$white-c: #998; -$white-err: #a61717; -$white-err-bg: #e3d2d2; -$white-cm: #998; -$white-cp: #999; -$white-c1: #998; -$white-cs: #999; -$white-gd: $black; -$white-gd-bg: #fdd; -$white-gd-x: $black; -$white-gd-x-bg: #faa; -$white-gr: #a00; -$white-gh: #999; -$white-gi: $black; -$white-gi-bg: #dfd; -$white-gi-x: $black; -$white-gi-x-bg: #afa; -$white-go: #888; -$white-gp: #555; -$white-gu: #800080; -$white-gt: #a00; -$white-kt: #458; -$white-m: #099; -$white-s: #d14; -$white-n: #333; -$white-na: teal; -$white-nb: #0086b3; -$white-nc: #458; -$white-no: teal; -$white-ni: purple; -$white-ne: #900; -$white-nf: #900; -$white-nn: #555; -$white-nt: navy; -$white-nv: teal; -$white-w: #bbb; -$white-mf: #099; -$white-mh: #099; -$white-mi: #099; -$white-mo: #099; -$white-sb: #d14; -$white-sc: #d14; -$white-sd: #d14; -$white-s2: #d14; -$white-se: #d14; -$white-sh: #d14; -$white-si: #d14; -$white-sx: #d14; -$white-sr: #009926; -$white-s1: #d14; -$white-ss: #990073; -$white-bp: #999; -$white-vc: teal; -$white-vg: teal; -$white-vi: teal; -$white-il: #099; -$white-gc-color: #999; -$white-gc-bg: #eaf2f5; - - -@mixin matchLine { - color: $black-transparent; - background-color: $gray-light; -} - .code.white { - // Line numbers - .line-numbers, - .diff-line-num { - background-color: $gray-light; - } - - .diff-line-num, - .diff-line-num a { - color: $black-transparent; - } - - // Code itself - pre.code, - .diff-line-num { - border-color: $white-normal; - } - - &, - pre.code, - .line_holder .line_content { - background-color: $white-light; - color: $white-code-color; - } - - // Diff line - .line_holder { - - &.match .line_content { - @include matchLine; - } - - .diff-line-num { - &.old { - background-color: $line-number-old; - border-color: $line-removed-dark; - - a { - color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); - } - } - - &.new { - background-color: $line-number-new; - border-color: $line-added-dark; - - a { - color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); - } - } - - &.is-over, - &.hll:not(.empty-cell).is-over { - background-color: $white-over-bg; - border-color: darken($white-over-bg, 5%); - - a { - color: darken($white-over-bg, 15%); - } - } - - &.hll:not(.empty-cell) { - background-color: $line-number-select; - border-color: $line-select-yellow-dark; - } - } - - &:not(.diff-expanded) + .diff-expanded, - &.diff-expanded + .line_holder:not(.diff-expanded) { - > .diff-line-num, - > .line_content { - border-top: 1px solid $white-expanded-border; - } - } - - &.diff-expanded { - > .diff-line-num, - > .line_content { - background: $white-expanded-bg; - border-color: $white-expanded-bg; - } - } - - .line_content { - &.old { - background-color: $line-removed; - - &::before { - color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); - } - - span.idiff { - background-color: $line-removed-dark; - } - } - - &.new { - background-color: $line-added; - - &::before { - color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); - } - - span.idiff { - background-color: $line-added-dark; - } - } - - &.match { - @include matchLine; - } - - &.hll:not(.empty-cell) { - background-color: $line-select-yellow; - } - } - } - - // highlight line via anchor - pre .hll { - background-color: $white-pre-hll-bg !important; - } - - // Search result highlight - span.highlight_word { - background-color: $white-highlight !important; - } - - // Links to URLs, emails, or dependencies - .line a { - color: $white-nb; - } - - .hll { background-color: $white-hll-bg; } - .c { color: $white-c; font-style: italic; } - .err { color: $white-err; background-color: $white-err-bg; } - .k { font-weight: $gl-font-weight-bold; } - .o { font-weight: $gl-font-weight-bold; } - .cm { color: $white-cm; font-style: italic; } - .cp { color: $white-cp; font-weight: $gl-font-weight-bold; } - .c1 { color: $white-c1; font-style: italic; } - .cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; } - - .gd { - color: $white-gd; - background-color: $white-gd-bg; - - .x { - color: $white-gd-x; - background-color: $white-gd-x-bg; - } - } - - .ge { font-style: italic; } - .gr { color: $white-gr; } - .gh { color: $white-gh; } - - .gi { - color: $white-gi; - background-color: $white-gi-bg; - - .x { - color: $white-gi-x; - background-color: $white-gi-x-bg; - } - } - - .go { color: $white-go; } - .gp { color: $white-gp; } - .gs { font-weight: $gl-font-weight-bold; } - .gu { color: $white-gu; font-weight: $gl-font-weight-bold; } - .gt { color: $white-gt; } - .kc { font-weight: $gl-font-weight-bold; } - .kd { font-weight: $gl-font-weight-bold; } - .kn { font-weight: $gl-font-weight-bold; } - .kp { font-weight: $gl-font-weight-bold; } - .kr { font-weight: $gl-font-weight-bold; } - .kt { color: $white-kt; font-weight: $gl-font-weight-bold; } - .m { color: $white-m; } - .s { color: $white-s; } - .n { color: $white-n; } - .na { color: $white-na; } - .nb { color: $white-nb; } - .nc { color: $white-nc; font-weight: $gl-font-weight-bold; } - .no { color: $white-no; } - .ni { color: $white-ni; } - .ne { color: $white-ne; font-weight: $gl-font-weight-bold; } - .nf { color: $white-nf; font-weight: $gl-font-weight-bold; } - .nn { color: $white-nn; } - .nt { color: $white-nt; } - .nv { color: $white-nv; } - .ow { font-weight: $gl-font-weight-bold; } - .w { color: $white-w; } - .mf { color: $white-mf; } - .mh { color: $white-mh; } - .mi { color: $white-mi; } - .mo { color: $white-mo; } - .sb { color: $white-sb; } - .sc { color: $white-sc; } - .sd { color: $white-sd; } - .s2 { color: $white-s2; } - .se { color: $white-se; } - .sh { color: $white-sh; } - .si { color: $white-si; } - .sx { color: $white-sx; } - .sr { color: $white-sr; } - .s1 { color: $white-s1; } - .ss { color: $white-ss; } - .bp { color: $white-bp; } - .vc { color: $white-vc; } - .vg { color: $white-vg; } - .vi { color: $white-vi; } - .il { color: $white-il; } - .gc { color: $white-gc-color; background-color: $white-gc-bg; } + @import "white_base"; } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss new file mode 100644 index 00000000000..8cc5252648d --- /dev/null +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -0,0 +1,290 @@ +/* https://github.com/aahan/pygments-github-style */ + +/* +* White Syntax Colors +*/ +$white-code-color: $gl-text-color; +$white-highlight: #fafe3d; +$white-pre-hll-bg: #f8eec7; +$white-hll-bg: #f8f8f8; +$white-over-bg: #ded7fc; +$white-expanded-border: #e0e0e0; +$white-expanded-bg: #f7f7f7; +$white-c: #998; +$white-err: #a61717; +$white-err-bg: #e3d2d2; +$white-cm: #998; +$white-cp: #999; +$white-c1: #998; +$white-cs: #999; +$white-gd: $black; +$white-gd-bg: #fdd; +$white-gd-x: $black; +$white-gd-x-bg: #faa; +$white-gr: #a00; +$white-gh: #999; +$white-gi: $black; +$white-gi-bg: #dfd; +$white-gi-x: $black; +$white-gi-x-bg: #afa; +$white-go: #888; +$white-gp: #555; +$white-gu: #800080; +$white-gt: #a00; +$white-kt: #458; +$white-m: #099; +$white-s: #d14; +$white-n: #333; +$white-na: teal; +$white-nb: #0086b3; +$white-nc: #458; +$white-no: teal; +$white-ni: purple; +$white-ne: #900; +$white-nf: #900; +$white-nn: #555; +$white-nt: navy; +$white-nv: teal; +$white-w: #bbb; +$white-mf: #099; +$white-mh: #099; +$white-mi: #099; +$white-mo: #099; +$white-sb: #d14; +$white-sc: #d14; +$white-sd: #d14; +$white-s2: #d14; +$white-se: #d14; +$white-sh: #d14; +$white-si: #d14; +$white-sx: #d14; +$white-sr: #009926; +$white-s1: #d14; +$white-ss: #990073; +$white-bp: #999; +$white-vc: teal; +$white-vg: teal; +$white-vi: teal; +$white-il: #099; +$white-gc-color: #999; +$white-gc-bg: #eaf2f5; + + +@mixin matchLine { + color: $black-transparent; + background-color: $gray-light; +} + + // Line numbers +.line-numbers, +.diff-line-num { + background-color: $gray-light; +} + +.diff-line-num, +.diff-line-num a { + color: $black-transparent; +} + +// Code itself +pre.code, +.diff-line-num { + border-color: $white-normal; +} + +&, +pre.code, +.line_holder .line_content { + background-color: $white-light; + color: $white-code-color; +} + +// Diff line +.line_holder { + + &.match .line_content { + @include matchLine; + } + + .diff-line-num { + &.old { + background-color: $line-number-old; + border-color: $line-removed-dark; + + a { + color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); + } + } + + &.new { + background-color: $line-number-new; + border-color: $line-added-dark; + + a { + color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); + } + } + + &.is-over, + &.hll:not(.empty-cell).is-over { + background-color: $white-over-bg; + border-color: darken($white-over-bg, 5%); + + a { + color: darken($white-over-bg, 15%); + } + } + + &.hll:not(.empty-cell) { + background-color: $line-number-select; + border-color: $line-select-yellow-dark; + } + } + + &:not(.diff-expanded) + .diff-expanded, + &.diff-expanded + .line_holder:not(.diff-expanded) { + > .diff-line-num, + > .line_content { + border-top: 1px solid $white-expanded-border; + } + } + + &.diff-expanded { + > .diff-line-num, + > .line_content { + background: $white-expanded-bg; + border-color: $white-expanded-bg; + } + } + + .line_content { + &.old { + background-color: $line-removed; + + &::before { + color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); + } + + span.idiff { + background-color: $line-removed-dark; + } + } + + &.new { + background-color: $line-added; + + &::before { + color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); + } + + span.idiff { + background-color: $line-added-dark; + } + } + + &.match { + @include matchLine; + } + + &.hll:not(.empty-cell) { + background-color: $line-select-yellow; + } + } +} + +// highlight line via anchor +pre .hll { + background-color: $white-pre-hll-bg !important; +} + + // Search result highlight +span.highlight_word { + background-color: $white-highlight !important; +} + + // Links to URLs, emails, or dependencies +.line a { + color: $white-nb; +} + +.hll { background-color: $white-hll-bg; } +.c { color: $white-c; font-style: italic; } +.err { color: $white-err; background-color: $white-err-bg; } +.k { font-weight: $gl-font-weight-bold; } +.o { font-weight: $gl-font-weight-bold; } +.cm { color: $white-cm; font-style: italic; } +.cp { color: $white-cp; font-weight: $gl-font-weight-bold; } +.c1 { color: $white-c1; font-style: italic; } +.cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; } + +.gd { + color: $white-gd; + background-color: $white-gd-bg; + + .x { + color: $white-gd-x; + background-color: $white-gd-x-bg; + } +} + +.ge { font-style: italic; } +.gr { color: $white-gr; } +.gh { color: $white-gh; } + +.gi { + color: $white-gi; + background-color: $white-gi-bg; + + .x { + color: $white-gi-x; + background-color: $white-gi-x-bg; + } +} + +.go { color: $white-go; } +.gp { color: $white-gp; } +.gs { font-weight: $gl-font-weight-bold; } +.gu { color: $white-gu; font-weight: $gl-font-weight-bold; } +.gt { color: $white-gt; } +.kc { font-weight: $gl-font-weight-bold; } +.kd { font-weight: $gl-font-weight-bold; } +.kn { font-weight: $gl-font-weight-bold; } +.kp { font-weight: $gl-font-weight-bold; } +.kr { font-weight: $gl-font-weight-bold; } +.kt { color: $white-kt; font-weight: $gl-font-weight-bold; } +.m { color: $white-m; } +.s { color: $white-s; } +.n { color: $white-n; } +.na { color: $white-na; } +.nb { color: $white-nb; } +.nc { color: $white-nc; font-weight: $gl-font-weight-bold; } +.no { color: $white-no; } +.ni { color: $white-ni; } +.ne { color: $white-ne; font-weight: $gl-font-weight-bold; } +.nf { color: $white-nf; font-weight: $gl-font-weight-bold; } +.nn { color: $white-nn; } +.nt { color: $white-nt; } +.nv { color: $white-nv; } +.ow { font-weight: $gl-font-weight-bold; } +.w { color: $white-w; } +.mf { color: $white-mf; } +.mh { color: $white-mh; } +.mi { color: $white-mi; } +.mo { color: $white-mo; } +.sb { color: $white-sb; } +.sc { color: $white-sc; } +.sd { color: $white-sd; } +.s2 { color: $white-s2; } +.se { color: $white-se; } +.sh { color: $white-sh; } +.si { color: $white-si; } +.sx { color: $white-sx; } +.sr { color: $white-sr; } +.s1 { color: $white-s1; } +.ss { color: $white-ss; } +.bp { color: $white-bp; } +.vc { color: $white-vc; } +.vg { color: $white-vg; } +.vi { color: $white-vi; } +.il { color: $white-il; } +.gc { color: $white-gc-color; background-color: $white-gc-bg; } diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss new file mode 100644 index 00000000000..4de295629f4 --- /dev/null +++ b/app/assets/stylesheets/snippets.scss @@ -0,0 +1,132 @@ +@import "framework/variables"; + +.gitlab-embed-snippets { + @import "highlight/embedded"; + @import "framework/images"; + + $border-style: 1px solid $border-color; + + font-family: $regular_font; + font-size: $gl-font-size; + line-height: $code_line_height; + color: $gl-text-color; + margin: 20px; + font-weight: 200; + + .blob-viewer { + background-color: $white-light; + text-align: left; + } + + .file-content.code { + border: $border-style; + border-radius: 0 0 4px 4px; + display: flex; + box-shadow: none; + margin: 0; + padding: 0; + table-layout: fixed; + + .blob-content { + overflow-x: auto; + + pre { + padding: 10px; + border: 0; + border-radius: 0; + font-family: $monospace_font; + font-size: $code_font_size; + line-height: $code_line_height; + margin: 0; + overflow: auto; + overflow-y: hidden; + white-space: pre; + word-wrap: normal; + border-left: $border-style; + } + } + + .line-numbers { + padding: 10px; + text-align: right; + float: left; + + .diff-line-num { + font-family: $monospace_font; + display: block; + font-size: $code_font_size; + min-height: $code_line_height; + white-space: nowrap; + color: $black-transparent; + min-width: 30px; + } + + .diff-line-num:hover { + color: $almost-black; + cursor: pointer; + } + } + } + + .file-title-flex-parent { + display: flex; + align-items: center; + justify-content: space-between; + background-color: $gray-light; + border: $border-style; + border-bottom: 0; + padding: $gl-padding-top $gl-padding; + margin: 0; + border-radius: $border-radius-default $border-radius-default 0 0; + + .file-header-content { + .file-title-name { + font-weight: $gl-font-weight-bold; + } + + .gitlab-logo { + display: inline-block; + padding-left: 5px; + text-decoration: none; + color: $gl-text-color-secondary; + + .logo-text { + background: image_url('ext_snippet_icons/logo.png') no-repeat left center; + background-size: 18px; + font-weight: $gl-font-weight-normal; + padding-left: 24px; + } + } + } + + img { + display: inline-block; + vertical-align: middle; + } + } + + .btn-group { + a.btn { + background-color: $white-light; + text-decoration: none; + padding: 7px 9px; + border: $border-style; + border-right: 0; + + &:hover { + background-color: $white-normal; + border-color: $border-white-normal; + text-decoration: none; + } + + &:first-child { + border-radius: 3px 0 0 3px; + } + + &:last-child { + border-radius: 0 3px 3px 0; + border-right: $border-style; + } + } + } +} diff --git a/app/controllers/concerns/snippets_actions.rb b/app/controllers/concerns/snippets_actions.rb index 9095cc7f783..120614739aa 100644 --- a/app/controllers/concerns/snippets_actions.rb +++ b/app/controllers/concerns/snippets_actions.rb @@ -17,6 +17,10 @@ module SnippetsActions end # rubocop:enable Gitlab/ModuleWithInstanceVariables + def js_request? + request.format.js? + end + private def convert_line_endings(content) diff --git a/app/controllers/projects/snippets_controller.rb b/app/controllers/projects/snippets_controller.rb index 7c19aa7bb23..208a1d19862 100644 --- a/app/controllers/projects/snippets_controller.rb +++ b/app/controllers/projects/snippets_controller.rb @@ -5,6 +5,8 @@ class Projects::SnippetsController < Projects::ApplicationController include SnippetsActions include RendersBlob + skip_before_action :verify_authenticity_token, only: [:show], if: :js_request? + before_action :check_snippets_available! before_action :snippet, only: [:show, :edit, :destroy, :update, :raw, :toggle_award_emoji, :mark_as_spam] @@ -71,6 +73,7 @@ class Projects::SnippetsController < Projects::ApplicationController format.json do render_blob_json(blob) end + format.js { render 'shared/snippets/show'} end end diff --git a/app/controllers/snippets_controller.rb b/app/controllers/snippets_controller.rb index be2d3f638ff..3d51520ddf4 100644 --- a/app/controllers/snippets_controller.rb +++ b/app/controllers/snippets_controller.rb @@ -6,6 +6,8 @@ class SnippetsController < ApplicationController include RendersBlob include PreviewMarkdown + skip_before_action :verify_authenticity_token, only: [:show], if: :js_request? + before_action :snippet, only: [:show, :edit, :destroy, :update, :raw] # Allow read snippet @@ -77,6 +79,8 @@ class SnippetsController < ApplicationController format.json do render_blob_json(blob) end + + format.js { render 'shared/snippets/show' } end end diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb index c5522ff7a69..67001c55e88 100644 --- a/app/helpers/icons_helper.rb +++ b/app/helpers/icons_helper.rb @@ -43,6 +43,10 @@ module IconsHelper content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{sprite_icon_path}##{icon_name}" } ), class: css_classes.empty? ? nil : css_classes) end + def external_snippet_icon(name) + content_tag(:img, "", src: "#{image_url('/assets/ext_snippet_icons')}/#{name}.png", width: '16px', height: '16px') + end + def audit_icon(names, options = {}) case names when "standard" diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb index 00e7e4230b9..830db46d67f 100644 --- a/app/helpers/snippets_helper.rb +++ b/app/helpers/snippets_helper.rb @@ -101,4 +101,39 @@ module SnippetsHelper # Return snippet with chunk array { snippet_object: snippet, snippet_chunks: snippet_chunks } end + + def snippet_embed + "" + end + + def embedded_snippet_raw_button + blob = @snippet.blob + return if blob.empty? || blob.raw_binary? || blob.stored_externally? + + snippet_raw_url = if @snippet.is_a?(PersonalSnippet) + raw_snippet_url(@snippet) + else + raw_project_snippet_url(@snippet.project, @snippet) + end + + link_to external_snippet_icon('doc_code'), snippet_raw_url, class: 'btn', target: '_blank', rel: 'noopener noreferrer', title: 'Open raw', data: { container: 'body' } + end + + def embedded_snippet_download_button + download_url = if @snippet.is_a?(PersonalSnippet) + raw_snippet_url(@snippet, inline: false) + else + raw_project_snippet_url(@snippet.project, @snippet, inline: false) + end + + link_to external_snippet_icon('download'), download_url, class: 'btn', target: '_blank', title: 'Download', data: { container: 'body' }, rel: 'noopener noreferrer' + end + + def public_snippet? + if @snippet.project_id? + can?(nil, :read_project_snippet, @snippet) + else + can?(nil, :read_personal_snippet, @snippet) + end + end end diff --git a/app/views/projects/blob/_viewer.html.haml b/app/views/projects/blob/_viewer.html.haml index cc85e5de40f..fc62c1f06eb 100644 --- a/app/views/projects/blob/_viewer.html.haml +++ b/app/views/projects/blob/_viewer.html.haml @@ -1,6 +1,7 @@ - hidden = local_assigns.fetch(:hidden, false) - render_error = viewer.render_error - load_async = local_assigns.fetch(:load_async, viewer.load_async? && render_error.nil?) +- external_embed = local_assigns.fetch(:external_embed, false) - viewer_url = local_assigns.fetch(:viewer_url) { url_for(params.merge(viewer: viewer.type, format: :json)) } if load_async .blob-viewer{ data: { type: viewer.type, url: viewer_url }, class: ('hidden' if hidden) } @@ -8,6 +9,8 @@ = render 'projects/blob/render_error', viewer: viewer - elsif load_async = render viewer.loading_partial_path, viewer: viewer + - elsif external_embed + = render 'projects/blob/viewers/highlight_embed', blob: viewer.blob - else - viewer.prepare! diff --git a/app/views/projects/blob/viewers/_highlight_embed.html.haml b/app/views/projects/blob/viewers/_highlight_embed.html.haml new file mode 100644 index 00000000000..9bd4ef6ad0b --- /dev/null +++ b/app/views/projects/blob/viewers/_highlight_embed.html.haml @@ -0,0 +1,7 @@ +.file-content.code.js-syntax-highlight + .line-numbers + - if blob.data.present? + - blob.data.each_line.each_with_index do |_, index| + %span.diff-line-num= index + 1 + .blob-content{ data: { blob_id: blob.id } } + = highlight(blob.path, blob.data, repository: nil, plain: blob.no_highlighting?) diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml new file mode 100644 index 00000000000..9a5bf4c9f04 --- /dev/null +++ b/app/views/shared/snippets/_embed.html.haml @@ -0,0 +1,23 @@ +- blob = @snippet.blob +.gitlab-embed-snippets + .js-file-title.file-title-flex-parent + .file-header-content + = external_snippet_icon('doc_text') + + %strong.file-title-name + = blob.name + + %small + = number_to_human_size(blob.raw_size) + %a.gitlab-logo{ href: url_for(only_path: false, overwrite_params: nil) } + on   + %span.logo-text + GitLab + + .file-actions.hidden-xs + .btn-group{ role: "group" }< + = embedded_snippet_raw_button + + = embedded_snippet_download_button + %article.file-holder.snippet-file-content + = render 'projects/blob/viewer', viewer: @snippet.blob.simple_viewer, load_async: false, external_embed: true diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 12df79a28c7..de14356b82f 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -1,3 +1,6 @@ +- content_for :page_specific_javascripts do + = page_specific_javascript_bundle_tag('snippet_embed') + .detail-page-header .detail-page-header-body .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } } @@ -27,3 +30,21 @@ = markdown_field(@snippet, :description) %textarea.hidden.js-task-list-field = @snippet.description + - if public_snippet? + .pull-right + .input-group + .input-group-btn + %button.btn.btn-default.dropdown-toggle{ 'data-toggle': 'dropdown' } + %span#embed-action Embed + = sprite_icon('angle-down', size: 16) + .dropdown-menu + %ul + %li + %a#embed-btn{ href: "#" }Embed + %li + %a#share-btn{ href: "#" }Share + %input#snippet-url-area.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } + .input-group-btn + %a#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } + = sprite_icon('duplicate', size: 16) + .clearfix diff --git a/app/views/shared/snippets/show.js.haml b/app/views/shared/snippets/show.js.haml new file mode 100644 index 00000000000..a9af732bbb5 --- /dev/null +++ b/app/views/shared/snippets/show.js.haml @@ -0,0 +1,2 @@ +document.write('#{escape_javascript(stylesheet_link_tag "#{stylesheet_url 'snippets'}")}'); +document.write('#{escape_javascript(render 'shared/snippets/embed')}'); -- cgit v1.2.1 From 4ee2f74ba05562b629f9cf5cb476c51e9e80e7be Mon Sep 17 00:00:00 2001 From: haseeb Date: Fri, 16 Feb 2018 15:20:12 +0530 Subject: embedd button related fixes --- app/assets/stylesheets/framework/snippets.scss | 4 ++++ app/views/shared/snippets/_header.html.haml | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 30c15c231d5..c2d06b59b7f 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -46,3 +46,7 @@ .snippet-scope-menu .btn-new { margin-top: 15px; } + +.snippet-embed-input { + height: 35px; +} diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index de14356b82f..30ad8932e84 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -40,10 +40,10 @@ .dropdown-menu %ul %li - %a#embed-btn{ href: "#" }Embed + %a#embed-btn{ href: "#" } Embed %li - %a#share-btn{ href: "#" }Share - %input#snippet-url-area.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } + %a#share-btn{ href: "#" } Share + %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn %a#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } = sprite_icon('duplicate', size: 16) -- cgit v1.2.1 From bab24c2fcd54622ed09ffd076e38560b42510773 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 21 Feb 2018 19:39:33 +0530 Subject: embedded snippet title changes --- app/assets/images/ext_snippet_icons/doc_code.png | Bin 1058 -> 1592 bytes app/assets/images/ext_snippet_icons/doc_text.png | Bin 996 -> 1452 bytes app/assets/images/ext_snippet_icons/download.png | Bin 1098 -> 1671 bytes app/assets/stylesheets/snippets.scss | 9 +++++++++ app/views/shared/snippets/_embed.html.haml | 3 ++- 5 files changed, 11 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/images/ext_snippet_icons/doc_code.png b/app/assets/images/ext_snippet_icons/doc_code.png index b1a589a848f..93a9b372f32 100644 Binary files a/app/assets/images/ext_snippet_icons/doc_code.png and b/app/assets/images/ext_snippet_icons/doc_code.png differ diff --git a/app/assets/images/ext_snippet_icons/doc_text.png b/app/assets/images/ext_snippet_icons/doc_text.png index aee32cc3620..f2357c17c90 100644 Binary files a/app/assets/images/ext_snippet_icons/doc_text.png and b/app/assets/images/ext_snippet_icons/doc_text.png differ diff --git a/app/assets/images/ext_snippet_icons/download.png b/app/assets/images/ext_snippet_icons/download.png index 045fb0f2e95..156c788509b 100644 Binary files a/app/assets/images/ext_snippet_icons/download.png and b/app/assets/images/ext_snippet_icons/download.png differ diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index 4de295629f4..b88a8158b35 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -84,6 +84,15 @@ font-weight: $gl-font-weight-bold; } + .gitlab-embedded-snippets-title { + text-decoration: none; + color: $gl-text-color; + + &:hover{ + text-decoration: underline; + } + } + .gitlab-logo { display: inline-block; padding-left: 5px; diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml index 9a5bf4c9f04..aacc7825534 100644 --- a/app/views/shared/snippets/_embed.html.haml +++ b/app/views/shared/snippets/_embed.html.haml @@ -5,7 +5,8 @@ = external_snippet_icon('doc_text') %strong.file-title-name - = blob.name + %a.gitlab-embedded-snippets-title{ href: url_for(only_path: false, overwrite_params: nil) } + = blob.name %small = number_to_human_size(blob.raw_size) -- cgit v1.2.1 From cfdbfcc621a7e04c8604bd2d11c1e8a3c764f8c7 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 21 Feb 2018 22:34:45 +0530 Subject: fix for chrome issue --- app/views/shared/snippets/_header.html.haml | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'app') diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 30ad8932e84..9d55afba591 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -31,18 +31,17 @@ %textarea.hidden.js-task-list-field = @snippet.description - if public_snippet? - .pull-right + .embed-snippet.pull-right.col-md-6 .input-group .input-group-btn - %button.btn.btn-default.dropdown-toggle{ 'data-toggle': 'dropdown' } + %a.btn.btn-default.embed-toggle.dropdown-toggle{ 'data-toggle': 'dropdown' } %span#embed-action Embed - = sprite_icon('angle-down', size: 16) - .dropdown-menu - %ul - %li - %a#embed-btn{ href: "#" } Embed - %li - %a#share-btn{ href: "#" } Share + = sprite_icon('angle-down', size: 12) + %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right + %li + %a#embed-btn.btn.btn-transparent{ href: "#" } Embed + %li + %a#share-btn.btn.btn-transparent{ href: "#" } Share %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn %a#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } -- cgit v1.2.1 From 6520e2c78ff87f68029a7d71c616073ec640f130 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 21 Feb 2018 22:35:10 +0530 Subject: rightside border fix for dropdown --- app/assets/stylesheets/framework/snippets.scss | 18 ++++++++++++++++++ app/assets/stylesheets/snippets.scss | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index c2d06b59b7f..69828532bef 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -50,3 +50,21 @@ .snippet-embed-input { height: 35px; } + +.embed-snippet { + padding-right: 0; + + a.btn { + width: 100%; + } + + .form-control { + cursor: auto; + width: 101%; + border-left: 0; + } + + .embed-toggle { + height: 35px; + } +} diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index b88a8158b35..7d271d25fd9 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -87,8 +87,8 @@ .gitlab-embedded-snippets-title { text-decoration: none; color: $gl-text-color; - - &:hover{ + + &:hover { text-decoration: underline; } } -- cgit v1.2.1 From 20cebb8f2804273e0c9cefe23ae78ac5f584dd14 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 21 Feb 2018 23:47:46 +0530 Subject: snippet page modifications --- app/assets/stylesheets/framework/snippets.scss | 10 +++++++++- app/views/shared/snippets/_header.html.haml | 6 ++++-- 2 files changed, 13 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 69828532bef..be060422b47 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -29,8 +29,10 @@ } .snippet-title { - font-size: 24px; + color: $gl-text-color; + font-size: 2em; font-weight: $gl-font-weight-bold; + min-height: $header-height; } .snippet-edited-ago { @@ -62,6 +64,12 @@ cursor: auto; width: 101%; border-left: 0; + outline: none; + box-shadow: none; + + &:active { + box-shadow: none; + } } .embed-toggle { diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 9d55afba591..2963156b2d7 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -22,14 +22,16 @@ %h2.snippet-title.prepend-top-0.append-bottom-0 = markdown_field(@snippet, :title) - - if @snippet.updated_at != @snippet.created_at - = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true) - if @snippet.description.present? .description .wiki = markdown_field(@snippet, :description) %textarea.hidden.js-task-list-field = @snippet.description + + - if @snippet.updated_at != @snippet.created_at + = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true) + - if public_snippet? .embed-snippet.pull-right.col-md-6 .input-group -- cgit v1.2.1 From 4f2f71db90db7b9d754d552ac30c39061da63039 Mon Sep 17 00:00:00 2001 From: haseeb Date: Thu, 22 Feb 2018 00:08:56 +0530 Subject: added top-padding to snippet embed block --- app/assets/stylesheets/framework/snippets.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index be060422b47..9a555ba1f15 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -55,6 +55,7 @@ .embed-snippet { padding-right: 0; + padding-top: $gl-padding; a.btn { width: 100%; @@ -66,7 +67,7 @@ border-left: 0; outline: none; box-shadow: none; - + &:active { box-shadow: none; } -- cgit v1.2.1 From 174ee4e182522545baf05669d7dd03ff3753d322 Mon Sep 17 00:00:00 2001 From: haseeb Date: Thu, 22 Feb 2018 01:03:10 +0530 Subject: fix incomplete shadow in input field --- app/assets/stylesheets/framework/snippets.scss | 12 +----------- app/views/shared/snippets/_header.html.haml | 2 +- 2 files changed, 2 insertions(+), 12 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 9a555ba1f15..462aca905d8 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -57,20 +57,10 @@ padding-right: 0; padding-top: $gl-padding; - a.btn { - width: 100%; - } - .form-control { cursor: auto; width: 101%; - border-left: 0; - outline: none; - box-shadow: none; - - &:active { - box-shadow: none; - } + margin-left: -1; } .embed-toggle { diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 2963156b2d7..da014da031d 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -36,7 +36,7 @@ .embed-snippet.pull-right.col-md-6 .input-group .input-group-btn - %a.btn.btn-default.embed-toggle.dropdown-toggle{ 'data-toggle': 'dropdown' } + %a.btn.embed-toggle{ 'data-toggle': 'dropdown' } %span#embed-action Embed = sprite_icon('angle-down', size: 12) %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right -- cgit v1.2.1 From 3bed273d60554be06a9c464ed6f04f71d91c7f28 Mon Sep 17 00:00:00 2001 From: haseeb Date: Thu, 22 Feb 2018 19:34:35 +0530 Subject: dropdown style fixes --- app/assets/javascripts/snippet/snippet_embed.js | 4 ++++ app/assets/stylesheets/framework/snippets.scss | 6 +++++- app/views/shared/snippets/_header.html.haml | 10 ++++++---- 3 files changed, 15 insertions(+), 5 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js index c032414552e..dc808b68123 100644 --- a/app/assets/javascripts/snippet/snippet_embed.js +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -4,12 +4,16 @@ $('#share-btn').click((event) => { event.preventDefault(); + $('#share-btn').addClass('is-active'); + $('#embed-btn').removeClass('is-active'); $('#snippet-url-area').val(`${protocol}//${host + pathname}`); $('#embed-action').html('Share'); }); $('#embed-btn').click((event) => { event.preventDefault(); + $('#embed-btn').addClass('is-active'); + $('#share-btn').removeClass('is-active'); const scriptTag = ``; $('#snippet-url-area').val(scriptTag); $('#embed-action').html('Embed'); diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 462aca905d8..74f56e6e2f9 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -60,7 +60,11 @@ .form-control { cursor: auto; width: 101%; - margin-left: -1; + margin-left: -1px; + } + + .embed-toggle-list li a { + padding: 8px 40px; } .embed-toggle { diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index da014da031d..3e7f6cf9f83 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -33,17 +33,19 @@ = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true) - if public_snippet? - .embed-snippet.pull-right.col-md-6 + .embed-snippet .input-group .input-group-btn %a.btn.embed-toggle{ 'data-toggle': 'dropdown' } %span#embed-action Embed = sprite_icon('angle-down', size: 12) - %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right + %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list %li - %a#embed-btn.btn.btn-transparent{ href: "#" } Embed + %a#embed-btn.btn.btn-transparent.is-active{ href: "#" } + %strong.embed-toggle-list-item Embed %li - %a#share-btn.btn.btn-transparent{ href: "#" } Share + %a#share-btn.btn.btn-transparent{ href: "#" } + %strong.embed-toggle-list-item Share %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn %a#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } -- cgit v1.2.1 From deb82546324fba81b20c47073cb28ca0cd8fe318 Mon Sep 17 00:00:00 2001 From: haseeb Date: Thu, 22 Feb 2018 19:42:13 +0530 Subject: extra whitespace in haml fixed --- app/views/shared/snippets/_header.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 3e7f6cf9f83..b5ce5fec04d 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -44,7 +44,7 @@ %a#embed-btn.btn.btn-transparent.is-active{ href: "#" } %strong.embed-toggle-list-item Embed %li - %a#share-btn.btn.btn-transparent{ href: "#" } + %a#share-btn.btn.btn-transparent{ href: "#" } %strong.embed-toggle-list-item Share %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn -- cgit v1.2.1 From e0e62b0336b6518a04113af9af4dc20fe1d3059c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 18:20:14 +0000 Subject: Update and install gitlab-svgs dep --- app/assets/images/icons.json | 2 +- app/assets/images/icons.svg | 2 +- app/assets/images/illustrations/epics.svg | 2 +- app/assets/images/illustrations/epics/list.svg | 1 + app/assets/images/illustrations/epics/roadmap.svg | 1 + app/assets/images/illustrations/lock_promotion.svg | 1 + app/assets/images/illustrations/milestone_removing-page.svg | 1 + app/assets/images/illustrations/prometheus-graphs_empty.svg | 1 + app/assets/images/illustrations/web-ide_promotion.svg | 1 + 9 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 app/assets/images/illustrations/epics/list.svg create mode 100644 app/assets/images/illustrations/epics/roadmap.svg create mode 100644 app/assets/images/illustrations/lock_promotion.svg create mode 100644 app/assets/images/illustrations/milestone_removing-page.svg create mode 100644 app/assets/images/illustrations/prometheus-graphs_empty.svg create mode 100644 app/assets/images/illustrations/web-ide_promotion.svg (limited to 'app') diff --git a/app/assets/images/icons.json b/app/assets/images/icons.json index 19843d24e22..b78dc6a2f07 100644 --- a/app/assets/images/icons.json +++ b/app/assets/images/icons.json @@ -1 +1 @@ -{"iconCount":191,"spriteSize":86607,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} \ No newline at end of file +{"iconCount":196,"spriteSize":88552,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","blame","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","compress","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","error","expand","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor-lines","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} \ No newline at end of file diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg index 6aec54d0543..0dd09b4607f 100644 --- a/app/assets/images/icons.svg +++ b/app/assets/images/icons.svg @@ -1 +1 @@ - \ No newline at end of file +error \ No newline at end of file diff --git a/app/assets/images/illustrations/epics.svg b/app/assets/images/illustrations/epics.svg index 1a37e6bba5f..be6c3fb76a5 100644 --- a/app/assets/images/illustrations/epics.svg +++ b/app/assets/images/illustrations/epics.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/list.svg b/app/assets/images/illustrations/epics/list.svg new file mode 100644 index 00000000000..be6c3fb76a5 --- /dev/null +++ b/app/assets/images/illustrations/epics/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/roadmap.svg b/app/assets/images/illustrations/epics/roadmap.svg new file mode 100644 index 00000000000..a14f14b91c9 --- /dev/null +++ b/app/assets/images/illustrations/epics/roadmap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/lock_promotion.svg b/app/assets/images/illustrations/lock_promotion.svg new file mode 100644 index 00000000000..6f1f9b2b030 --- /dev/null +++ b/app/assets/images/illustrations/lock_promotion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/milestone_removing-page.svg b/app/assets/images/illustrations/milestone_removing-page.svg new file mode 100644 index 00000000000..a8cd54da0d3 --- /dev/null +++ b/app/assets/images/illustrations/milestone_removing-page.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/prometheus-graphs_empty.svg b/app/assets/images/illustrations/prometheus-graphs_empty.svg new file mode 100644 index 00000000000..0ef198f59cd --- /dev/null +++ b/app/assets/images/illustrations/prometheus-graphs_empty.svg @@ -0,0 +1 @@ +prometheus-graphs_empty \ No newline at end of file diff --git a/app/assets/images/illustrations/web-ide_promotion.svg b/app/assets/images/illustrations/web-ide_promotion.svg new file mode 100644 index 00000000000..ef61348057d --- /dev/null +++ b/app/assets/images/illustrations/web-ide_promotion.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.1 From 250fde7c13c9bd0f2fd2cdd117c81b03ee46c558 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 18:21:01 +0000 Subject: Add deprecation warning to shared/milestones/top --- app/views/shared/milestones/_top.html.haml | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'app') diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index fd0760d83a5..574863800eb 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,6 +30,16 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" +.deprecation-warning.prepend-top-default + = image_tag 'illustrations/milestone_removing-page.svg' + .inline + %strong.append-top-default This page will be removed in a future release. + %p + Use group milestones to manage issues from multiple projects in the same milestone. + %br + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' + %div= link_to 'Learn more', class: 'btn btn-default' + .detail-page-description.milestone-detail %h2.title = markdown_field(milestone, :title) -- cgit v1.2.1 From 49fad054393cfc4281d1152e291c8ed99ac76b9e Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 18:21:14 +0000 Subject: Remove padding from btn-link css class --- app/assets/stylesheets/framework/buttons.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app') diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index c4b046a6d68..95e3573b43d 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -422,6 +422,10 @@ } } +.btn-link { + padding: 0; +} + .btn-link.btn-secondary-hover-link { color: $gl-text-color-secondary; -- cgit v1.2.1 From 72e0cdd0c7db019a761624ad961db27714b7c0fd Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 19:52:51 +0000 Subject: Correct styling of deprecation warning --- app/views/shared/milestones/_top.html.haml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 574863800eb..60d8f94ea0b 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -31,14 +31,14 @@ = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" .deprecation-warning.prepend-top-default - = image_tag 'illustrations/milestone_removing-page.svg' - .inline - %strong.append-top-default This page will be removed in a future release. - %p + = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' + .inline.vertical-align-middle + %strong This page will be removed in a future release. + %p.append-bottom-default.prepend-top-default Use group milestones to manage issues from multiple projects in the same milestone. %br = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' - %div= link_to 'Learn more', class: 'btn btn-default' + %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' .detail-page-description.milestone-detail %h2.title -- cgit v1.2.1 From 639e6144959553b69b0f1dade4aa0758fd87a4b6 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 1 Mar 2018 19:53:22 +0000 Subject: remove deprecation-warning container as its unused --- app/views/shared/milestones/_top.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 60d8f94ea0b..ad0d4d54a18 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,7 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -.deprecation-warning.prepend-top-default +.prepend-top-default = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' .inline.vertical-align-middle %strong This page will be removed in a future release. -- cgit v1.2.1 From 9bac5c4a7ce21a4939b65f0b288bf5050118f5c1 Mon Sep 17 00:00:00 2001 From: haseeb Date: Sat, 3 Mar 2018 12:11:19 +0530 Subject: jquery and webpack changed --- .../pages/projects/snippets/show/index.js | 2 ++ .../javascripts/pages/snippets/show/index.js | 2 ++ app/assets/javascripts/snippet/snippet_embed.js | 40 ++++++++++++---------- app/views/shared/snippets/_header.html.haml | 5 +-- 4 files changed, 26 insertions(+), 23 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js index a134599cb04..d85cb6439ee 100644 --- a/app/assets/javascripts/pages/projects/snippets/show/index.js +++ b/app/assets/javascripts/pages/projects/snippets/show/index.js @@ -2,10 +2,12 @@ import initNotes from '~/init_notes'; import ZenMode from '~/zen_mode'; import LineHighlighter from '../../../../line_highlighter'; import BlobViewer from '../../../../blob/viewer'; +import snippetEmbed from '../../../../snippet/snippet_embed'; document.addEventListener('DOMContentLoaded', () => { new LineHighlighter(); // eslint-disable-line no-new new BlobViewer(); // eslint-disable-line no-new initNotes(); new ZenMode(); // eslint-disable-line no-new + snippetEmbed(); }); diff --git a/app/assets/javascripts/pages/snippets/show/index.js b/app/assets/javascripts/pages/snippets/show/index.js index f548b9fad65..e3eded8ab9d 100644 --- a/app/assets/javascripts/pages/snippets/show/index.js +++ b/app/assets/javascripts/pages/snippets/show/index.js @@ -2,10 +2,12 @@ import LineHighlighter from '../../../line_highlighter'; import BlobViewer from '../../../blob/viewer'; import ZenMode from '../../../zen_mode'; import initNotes from '../../../init_notes'; +import snippetEmbed from '../../../snippet/snippet_embed'; document.addEventListener('DOMContentLoaded', () => { new LineHighlighter(); // eslint-disable-line no-new new BlobViewer(); // eslint-disable-line no-new initNotes(); new ZenMode(); // eslint-disable-line no-new + snippetEmbed(); }); diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js index dc808b68123..872a04555a9 100644 --- a/app/assets/javascripts/snippet/snippet_embed.js +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -1,22 +1,24 @@ -(() => { - $(() => { - const { protocol, host, pathname } = location; +export default () => { + const { protocol, host, pathname } = location; + const shareBtn = document.querySelector('#share-btn'); + const embedBtn = document.querySelector('#embed-btn'); + const snippetUrlArea = document.querySelector('#snippet-url-area'); + const embedAction = document.querySelector('#embed-action'); - $('#share-btn').click((event) => { - event.preventDefault(); - $('#share-btn').addClass('is-active'); - $('#embed-btn').removeClass('is-active'); - $('#snippet-url-area').val(`${protocol}//${host + pathname}`); - $('#embed-action').html('Share'); - }); + shareBtn.addEventListener('click', (event) => { + event.preventDefault(); + shareBtn.classList.add('is-active'); + embedBtn.classList.remove('is-active'); + snippetUrlArea.value = `${protocol}//${host + pathname}`; + embedAction.innerHTML = 'Share'; + }); - $('#embed-btn').click((event) => { - event.preventDefault(); - $('#embed-btn').addClass('is-active'); - $('#share-btn').removeClass('is-active'); - const scriptTag = ``; - $('#snippet-url-area').val(scriptTag); - $('#embed-action').html('Embed'); - }); + embedBtn.addEventListener('click', (event) => { + event.preventDefault(); + embedBtn.classList.add('is-active'); + shareBtn.classList.remove('is-active'); + const scriptTag = ``; + snippetUrlArea.value = scriptTag; + embedAction.innerHTML = 'Embed'; }); -}).call(window); +}; diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index b5ce5fec04d..53d5416d120 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -1,6 +1,3 @@ -- content_for :page_specific_javascripts do - = page_specific_javascript_bundle_tag('snippet_embed') - .detail-page-header .detail-page-header-body .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } } @@ -36,7 +33,7 @@ .embed-snippet .input-group .input-group-btn - %a.btn.embed-toggle{ 'data-toggle': 'dropdown' } + %button.btn.embed-toggle{ 'data-toggle': 'dropdown' } %span#embed-action Embed = sprite_icon('angle-down', size: 12) %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list -- cgit v1.2.1 From 1b2d9c0edfcf9c207f5ecdda9068c35d43d05329 Mon Sep 17 00:00:00 2001 From: haseeb Date: Sat, 3 Mar 2018 12:17:33 +0530 Subject: anchor changed to button --- app/assets/javascripts/snippet/snippet_embed.js | 2 -- app/assets/stylesheets/framework/dropdowns.scss | 2 +- app/assets/stylesheets/framework/snippets.scss | 2 +- app/views/shared/snippets/_header.html.haml | 4 ++-- 4 files changed, 4 insertions(+), 6 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js index 872a04555a9..28a5ed306bd 100644 --- a/app/assets/javascripts/snippet/snippet_embed.js +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -6,7 +6,6 @@ export default () => { const embedAction = document.querySelector('#embed-action'); shareBtn.addEventListener('click', (event) => { - event.preventDefault(); shareBtn.classList.add('is-active'); embedBtn.classList.remove('is-active'); snippetUrlArea.value = `${protocol}//${host + pathname}`; @@ -14,7 +13,6 @@ export default () => { }); embedBtn.addEventListener('click', (event) => { - event.preventDefault(); embedBtn.classList.add('is-active'); shareBtn.classList.remove('is-active'); const scriptTag = ``; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 1d7b0b602cc..8dc3519a394 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -481,7 +481,7 @@ .dropdown-menu-selectable { li { - a { + a, button { padding: 8px 40px; position: relative; diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 74f56e6e2f9..606d4675f19 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -63,7 +63,7 @@ margin-left: -1px; } - .embed-toggle-list li a { + .embed-toggle-list li button { padding: 8px 40px; } diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 53d5416d120..2a704bb7e59 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -38,10 +38,10 @@ = sprite_icon('angle-down', size: 12) %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list %li - %a#embed-btn.btn.btn-transparent.is-active{ href: "#" } + %button#embed-btn.btn.btn-transparent.is-active{ href: "#" } %strong.embed-toggle-list-item Embed %li - %a#share-btn.btn.btn-transparent{ href: "#" } + %button#share-btn.btn.btn-transparent{ href: "#" } %strong.embed-toggle-list-item Share %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn -- cgit v1.2.1 From 2ee641aacd0960ed6bb96cdbdc26a0cdef028954 Mon Sep 17 00:00:00 2001 From: haseeb Date: Sat, 3 Mar 2018 12:20:48 +0530 Subject: one more button change --- app/views/shared/snippets/_header.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 2a704bb7e59..6379dbc7b1b 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -45,6 +45,6 @@ %strong.embed-toggle-list-item Share %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn - %a#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } + %button#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } = sprite_icon('duplicate', size: 16) .clearfix -- cgit v1.2.1 From 468da17361ff7c7628b48e5374ad13e41db6a37e Mon Sep 17 00:00:00 2001 From: haseeb Date: Sat, 3 Mar 2018 12:30:32 +0530 Subject: added title --- app/views/shared/snippets/_embed.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml index aacc7825534..2d93e51a2d9 100644 --- a/app/views/shared/snippets/_embed.html.haml +++ b/app/views/shared/snippets/_embed.html.haml @@ -10,7 +10,7 @@ %small = number_to_human_size(blob.raw_size) - %a.gitlab-logo{ href: url_for(only_path: false, overwrite_params: nil) } + %a.gitlab-logo{ href: url_for(only_path: false, overwrite_params: nil), title: 'view on gitlab' } on   %span.logo-text GitLab -- cgit v1.2.1 From 3cd80c37647ca8587bc46ac47d1a628d5e4e5446 Mon Sep 17 00:00:00 2001 From: haseeb Date: Sat, 3 Mar 2018 13:30:08 +0530 Subject: removed unused variable --- app/assets/javascripts/snippet/snippet_embed.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js index 28a5ed306bd..62af55addfc 100644 --- a/app/assets/javascripts/snippet/snippet_embed.js +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -5,14 +5,14 @@ export default () => { const snippetUrlArea = document.querySelector('#snippet-url-area'); const embedAction = document.querySelector('#embed-action'); - shareBtn.addEventListener('click', (event) => { + shareBtn.addEventListener('click', () => { shareBtn.classList.add('is-active'); embedBtn.classList.remove('is-active'); snippetUrlArea.value = `${protocol}//${host + pathname}`; embedAction.innerHTML = 'Share'; }); - embedBtn.addEventListener('click', (event) => { + embedBtn.addEventListener('click', () => { embedBtn.classList.add('is-active'); shareBtn.classList.remove('is-active'); const scriptTag = ``; -- cgit v1.2.1 From 097dc726d6ed8f8cfe1e55e47e60d7c813882402 Mon Sep 17 00:00:00 2001 From: haseeb Date: Sat, 3 Mar 2018 14:53:42 +0530 Subject: use sprite for icons --- app/assets/images/ext_snippet_icons/doc_code.png | Bin 1592 -> 0 bytes app/assets/images/ext_snippet_icons/doc_text.png | Bin 1452 -> 0 bytes app/assets/images/ext_snippet_icons/download.png | Bin 1671 -> 0 bytes .../images/ext_snippet_icons/ext_snippet_icons.png | Bin 0 -> 1018 bytes app/assets/images/ext_snippet_icons/logo.png | Bin 736 -> 494 bytes app/assets/stylesheets/framework/dropdowns.scss | 3 ++- app/assets/stylesheets/snippets.scss | 18 +++++++++++++++++- app/helpers/icons_helper.rb | 2 +- 8 files changed, 20 insertions(+), 3 deletions(-) delete mode 100644 app/assets/images/ext_snippet_icons/doc_code.png delete mode 100644 app/assets/images/ext_snippet_icons/doc_text.png delete mode 100644 app/assets/images/ext_snippet_icons/download.png create mode 100644 app/assets/images/ext_snippet_icons/ext_snippet_icons.png (limited to 'app') diff --git a/app/assets/images/ext_snippet_icons/doc_code.png b/app/assets/images/ext_snippet_icons/doc_code.png deleted file mode 100644 index 93a9b372f32..00000000000 Binary files a/app/assets/images/ext_snippet_icons/doc_code.png and /dev/null differ diff --git a/app/assets/images/ext_snippet_icons/doc_text.png b/app/assets/images/ext_snippet_icons/doc_text.png deleted file mode 100644 index f2357c17c90..00000000000 Binary files a/app/assets/images/ext_snippet_icons/doc_text.png and /dev/null differ diff --git a/app/assets/images/ext_snippet_icons/download.png b/app/assets/images/ext_snippet_icons/download.png deleted file mode 100644 index 156c788509b..00000000000 Binary files a/app/assets/images/ext_snippet_icons/download.png and /dev/null differ diff --git a/app/assets/images/ext_snippet_icons/ext_snippet_icons.png b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png new file mode 100644 index 00000000000..20380adc4e5 Binary files /dev/null and b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png differ diff --git a/app/assets/images/ext_snippet_icons/logo.png b/app/assets/images/ext_snippet_icons/logo.png index 12f8315cad8..794c9cc2dbc 100644 Binary files a/app/assets/images/ext_snippet_icons/logo.png and b/app/assets/images/ext_snippet_icons/logo.png differ diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 8dc3519a394..5d2b8ab6651 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -481,7 +481,8 @@ .dropdown-menu-selectable { li { - a, button { + a, + button { padding: 8px 40px; position: relative; diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index 7d271d25fd9..e39ee13be8d 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -13,6 +13,21 @@ margin: 20px; font-weight: 200; + .gl-snippet-icon { + display: inline-block; + background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat; + overflow: hidden; + text-indent: -9999px; + text-align: left; + width: 16px; + height: 16px; + background-size: cover; + + &.gl-snippet-icon-doc_code { background-position: -0 -0; } + &.gl-snippet-icon-doc_text { background-position: -0 -16px; } + &.gl-snippet-icon-download { background-position: -0 -32px; } + } + .blob-viewer { background-color: $white-light; text-align: left; @@ -108,7 +123,8 @@ } } - img { + img, + .gl-snippet-icon { display: inline-block; vertical-align: middle; } diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb index 67001c55e88..2f304b040c7 100644 --- a/app/helpers/icons_helper.rb +++ b/app/helpers/icons_helper.rb @@ -44,7 +44,7 @@ module IconsHelper end def external_snippet_icon(name) - content_tag(:img, "", src: "#{image_url('/assets/ext_snippet_icons')}/#{name}.png", width: '16px', height: '16px') + content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}") end def audit_icon(names, options = {}) -- cgit v1.2.1 From a87d76240410c865cda1e35ec377a19af29ed207 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:06:27 +0100 Subject: Add small-triangle class and add popup footer --- app/assets/stylesheets/framework/popup.scss | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index 5c76205095f..e21c32a90df 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -6,10 +6,31 @@ $popup-triangle-border-size ); - padding: $gl-padding; - background-color: $gray-lighter; + &.small-triangle { + @include triangle( + $gray-lighter, + $gray-darker, + $popup-triangle-size / 2, + $popup-triangle-border-size /2 + ); + } + border: 1px solid $gray-darker; - border-radius: $border-radius-default; box-shadow: 0 5px 8px $popup-box-shadow-color; position: relative; + + .body { + background-color: $gray-lighter; + padding: $gl-padding; + border-top-left-radius: $border-radius-default; + border-top-right-radius: $border-radius-default; + } + + .footer { + background-color: $white-light; + padding: $gl-padding; + border-bottom-left-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; + border-top: 1px solid $white-dark; + } } -- cgit v1.2.1 From ed01f87c998a24312722972b6e4e84e63c68f137 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:06:41 +0100 Subject: Custom deprecation message styles --- app/assets/stylesheets/pages/milestone.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index e5afa8fffcb..ea67d3fcdeb 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -194,3 +194,27 @@ .issuable-row { background-color: $white-light; } + +.milestone-deprecation-message { + .popup { + max-width: 300px; + position: absolute; + left: 30px; + + .body { + padding: $gl-padding-8; + } + + .footer { + padding: $gl-padding-8 $gl-padding; + } + } + + .instructions-list { + padding: 0 0 0 30px; + } + + .text-container { + position: relative; + } +} \ No newline at end of file -- cgit v1.2.1 From 17e863be5279d452ac10df99ae6ce9f443d92375 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:06:58 +0100 Subject: Create deprecation_message partial and use it --- .../milestones/_deprecation_message.html.haml | 23 ++++++++++++++++++++++ app/views/shared/milestones/_top.html.haml | 10 +--------- 2 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 app/views/shared/milestones/_deprecation_message.html.haml (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml new file mode 100644 index 00000000000..22fe445d64f --- /dev/null +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -0,0 +1,23 @@ +.milestone-deprecation-message.prepend-top-default.js-toggle-container + = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' + .inline.vertical-align-middle.text-container + %strong This page will be removed in a future release. + %p.append-bottom-default.prepend-top-5 + Use group milestones to manage issues from multiple projects in the same milestone. + %br + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link js-toggle-button' + + .popup.js-toggle-content.hide.small-triangle + .body + %ol.instructions-list + %li + Click any + %strong project name + in the project list below to navigate to the project milestone. + %li + Click the + %strong Promote + button in the top right corner to promote it to a group milestone. + .footer= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' + + %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' \ No newline at end of file diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index ad0d4d54a18..9761c9181f2 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,15 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -.prepend-top-default - = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' - .inline.vertical-align-middle - %strong This page will be removed in a future release. - %p.append-bottom-default.prepend-top-default - Use group milestones to manage issues from multiple projects in the same milestone. - %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' - %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' += render 'shared/milestones/deprecation_message' .detail-page-description.milestone-detail %h2.title -- cgit v1.2.1 From 7a8ec42ea7c097ead08ddb35721308d3b736f4d5 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:10:18 +0100 Subject: Remove small-triangle --- app/assets/stylesheets/framework/popup.scss | 9 --------- app/assets/stylesheets/framework/variables.scss | 2 +- app/views/shared/milestones/_deprecation_message.html.haml | 2 +- 3 files changed, 2 insertions(+), 11 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index e21c32a90df..faa827c7f62 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -6,15 +6,6 @@ $popup-triangle-border-size ); - &.small-triangle { - @include triangle( - $gray-lighter, - $gray-darker, - $popup-triangle-size / 2, - $popup-triangle-border-size /2 - ); - } - border: 1px solid $gray-darker; box-shadow: 0 5px 8px $popup-box-shadow-color; position: relative; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 54e13f9d95c..ed5aa5ad07d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -731,7 +731,7 @@ $image-comment-cursor-top-offset: 12; /* Popup */ -$popup-triangle-size: 15px; +$popup-triangle-size: 8px; $popup-triangle-border-size: 1px; $popup-box-shadow-color: rgba(90, 90, 90, 0.05); diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 22fe445d64f..eb4e27de20b 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -7,7 +7,7 @@ %br = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link js-toggle-button' - .popup.js-toggle-content.hide.small-triangle + .popup.js-toggle-content.hide .body %ol.instructions-list %li -- cgit v1.2.1 From 3d6484aded227e04f1f6690de7a91a44ee9e5c15 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sat, 3 Mar 2018 22:13:53 +0100 Subject: Make popup shadow slightly darker and larger to make new design --- app/assets/stylesheets/framework/popup.scss | 2 +- app/assets/stylesheets/framework/variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index faa827c7f62..a571151aef7 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -7,7 +7,7 @@ ); border: 1px solid $gray-darker; - box-shadow: 0 5px 8px $popup-box-shadow-color; + box-shadow: 0 5px 10px $popup-box-shadow-color; position: relative; .body { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ed5aa5ad07d..26f03948bae 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -733,7 +733,7 @@ Popup */ $popup-triangle-size: 8px; $popup-triangle-border-size: 1px; -$popup-box-shadow-color: rgba(90, 90, 90, 0.05); +$popup-box-shadow-color: rgba(90, 90, 90, 0.3); /* Multi file editor -- cgit v1.2.1 From 67b0ac73ae131fec5296e3c05aad311b432ec03b Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 4 Mar 2018 09:41:41 +0100 Subject: Only render deprecation message for deprecated milestones --- app/views/shared/milestones/_top.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 9761c9181f2..021e291bdc2 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,7 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -= render 'shared/milestones/deprecation_message' += render 'shared/milestones/deprecation_message' if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone? .detail-page-description.milestone-detail %h2.title -- cgit v1.2.1 From 4763f3153947610065eccc841aa85722d963d151 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 4 Mar 2018 09:44:15 +0100 Subject: Fix lints --- app/assets/stylesheets/framework/buttons.scss | 38 +++++++++++++-------------- app/assets/stylesheets/pages/milestone.scss | 4 +-- 2 files changed, 21 insertions(+), 21 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 95e3573b43d..b8a47b2cfdb 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -424,27 +424,27 @@ .btn-link { padding: 0; -} - -.btn-link.btn-secondary-hover-link { - color: $gl-text-color-secondary; - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; + &.btn-secondary-hover-link { + color: $gl-text-color-secondary; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } } -} - -.btn-link.btn-primary-hover-link { - color: inherit; - - &:hover, - &:active, - &:focus { - color: $gl-link-color; - text-decoration: none; + + &.btn-primary-hover-link { + color: inherit; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index ea67d3fcdeb..9b5087caacf 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -204,7 +204,7 @@ .body { padding: $gl-padding-8; } - + .footer { padding: $gl-padding-8 $gl-padding; } @@ -217,4 +217,4 @@ .text-container { position: relative; } -} \ No newline at end of file +} -- cgit v1.2.1 From fb7189e369e491436d6ad9cab5c1cea48ff6232f Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Sun, 4 Mar 2018 11:35:42 +0100 Subject: Remove all instance milestone variables in favour of local variables --- app/views/shared/milestones/_top.html.haml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 021e291bdc2..565d8807d0e 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -30,23 +30,23 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -= render 'shared/milestones/deprecation_message' if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone? += render 'shared/milestones/deprecation_message' if milestone.legacy_group_milestone? || milestone.dashboard_milestone? .detail-page-description.milestone-detail %h2.title = markdown_field(milestone, :title) - - if @milestone.group_milestone? && @milestone.description.present? + - if milestone.group_milestone? && milestone.description.present? %div .description .wiki - = markdown_field(@milestone, :description) + = markdown_field(milestone, :description) - if milestone.complete?(current_user) && milestone.active? .alert.alert-success.prepend-top-default - close_msg = group ? 'You may close the milestone now.' : 'Navigate to the project to close the milestone.' %span All issues for this milestone are closed. #{close_msg} -- if @milestone.legacy_group_milestone? || @milestone.dashboard_milestone? +- if milestone.legacy_group_milestone? || milestone.dashboard_milestone? .table-holder %table.table %thead @@ -69,7 +69,7 @@ Open %td = ms.expires_at -- elsif @milestone.group_milestone? +- elsif milestone.group_milestone? %br View = link_to 'Issues', issues_group_path(@group, milestone_title: milestone.title) -- cgit v1.2.1 From c647787bc3d16f6bcc24e02eea2a5b3aad76f51c Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 11:11:44 +0000 Subject: Added is_dymanic_milestone to top partial --- app/views/shared/milestones/_top.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 565d8807d0e..67a41926580 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -1,6 +1,6 @@ - page_title milestone.title, "Milestones" - - group = local_assigns[:group] +- is_dynamic_milestone = milestone.legacy_group_milestone? || milestone.dashboard_milestone? .detail-page-header %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" } @@ -30,7 +30,7 @@ - else = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen" -= render 'shared/milestones/deprecation_message' if milestone.legacy_group_milestone? || milestone.dashboard_milestone? += render 'shared/milestones/deprecation_message' if is_dynamic_milestone .detail-page-description.milestone-detail %h2.title @@ -46,7 +46,7 @@ - close_msg = group ? 'You may close the milestone now.' : 'Navigate to the project to close the milestone.' %span All issues for this milestone are closed. #{close_msg} -- if milestone.legacy_group_milestone? || milestone.dashboard_milestone? +- if is_dynamic_milestone .table-holder %table.table %thead -- cgit v1.2.1 From f1d5af4319a0eead31555adccc994e3d41c10a82 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 11:58:57 +0000 Subject: Fix lint --- app/assets/stylesheets/framework/buttons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index b8a47b2cfdb..c358e9e93de 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -427,7 +427,7 @@ &.btn-secondary-hover-link { color: $gl-text-color-secondary; - + &:hover, &:active, &:focus { @@ -435,10 +435,10 @@ text-decoration: none; } } - + &.btn-primary-hover-link { color: inherit; - + &:hover, &:active, &:focus { -- cgit v1.2.1 From 52a3bcf9e8782061d402890f2234380c166f7ca6 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 12:54:08 +0000 Subject: Fix lint --- app/views/shared/milestones/_deprecation_message.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index eb4e27de20b..668a4f09ee3 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -20,4 +20,4 @@ button in the top right corner to promote it to a group milestone. .footer= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' - %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' \ No newline at end of file + %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' -- cgit v1.2.1 From 3308419b5bcf5b3fe8ac52ce72f122e024b4a4ce Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 5 Mar 2018 12:56:37 +0000 Subject: Fix docs link --- app/views/shared/milestones/_deprecation_message.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 668a4f09ee3..714739a1ca7 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -18,6 +18,6 @@ Click the %strong Promote button in the top right corner to promote it to a group milestone. - .footer= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' + .footer= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' - %div= link_to 'Learn more', help_page_url('user/project/milestones', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + %div= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' -- cgit v1.2.1 From bf619dc62b7f848b1cbcaac41549f7bd5e616c87 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 7 Mar 2018 00:07:47 +0530 Subject: remove relative path --- app/assets/javascripts/pages/projects/snippets/show/index.js | 6 +++--- app/assets/javascripts/pages/snippets/show/index.js | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js index d85cb6439ee..c35b9c30058 100644 --- a/app/assets/javascripts/pages/projects/snippets/show/index.js +++ b/app/assets/javascripts/pages/projects/snippets/show/index.js @@ -1,8 +1,8 @@ import initNotes from '~/init_notes'; import ZenMode from '~/zen_mode'; -import LineHighlighter from '../../../../line_highlighter'; -import BlobViewer from '../../../../blob/viewer'; -import snippetEmbed from '../../../../snippet/snippet_embed'; +import LineHighlighter from '~/line_highlighter'; +import BlobViewer from '~/blob/viewer'; +import snippetEmbed from '~/snippet/snippet_embed'; document.addEventListener('DOMContentLoaded', () => { new LineHighlighter(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/snippets/show/index.js b/app/assets/javascripts/pages/snippets/show/index.js index e3eded8ab9d..26936110402 100644 --- a/app/assets/javascripts/pages/snippets/show/index.js +++ b/app/assets/javascripts/pages/snippets/show/index.js @@ -1,8 +1,8 @@ -import LineHighlighter from '../../../line_highlighter'; -import BlobViewer from '../../../blob/viewer'; -import ZenMode from '../../../zen_mode'; -import initNotes from '../../../init_notes'; -import snippetEmbed from '../../../snippet/snippet_embed'; +import LineHighlighter from '~/line_highlighter'; +import BlobViewer from '~/blob/viewer'; +import ZenMode from '~/zen_mode'; +import initNotes from '~/init_notes'; +import snippetEmbed from '~/snippet/snippet_embed'; document.addEventListener('DOMContentLoaded', () => { new LineHighlighter(); // eslint-disable-line no-new -- cgit v1.2.1 From 460d03b75f5087e74494cb31b28a8c7489f1ce2c Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 7 Mar 2018 00:14:57 +0530 Subject: changes to url posiion --- app/assets/javascripts/snippet/snippet_embed.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js index 62af55addfc..700247cfdb3 100644 --- a/app/assets/javascripts/snippet/snippet_embed.js +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -4,19 +4,20 @@ export default () => { const embedBtn = document.querySelector('#embed-btn'); const snippetUrlArea = document.querySelector('#snippet-url-area'); const embedAction = document.querySelector('#embed-action'); + const url = `${protocol}//${host + pathname}`; shareBtn.addEventListener('click', () => { shareBtn.classList.add('is-active'); embedBtn.classList.remove('is-active'); - snippetUrlArea.value = `${protocol}//${host + pathname}`; - embedAction.innerHTML = 'Share'; + snippetUrlArea.value = url; + embedAction.innerText = 'Share'; }); embedBtn.addEventListener('click', () => { embedBtn.classList.add('is-active'); shareBtn.classList.remove('is-active'); - const scriptTag = ``; + const scriptTag = ``; snippetUrlArea.value = scriptTag; - embedAction.innerHTML = 'Embed'; + embedAction.innerText = 'Embed'; }); }; -- cgit v1.2.1 From 768c4c7a6098ef458cade312a720a142277e505b Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 7 Mar 2018 00:32:02 +0530 Subject: removed unwated column from css --- app/assets/stylesheets/snippets.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index e39ee13be8d..14e6b5a1e1e 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -17,7 +17,6 @@ display: inline-block; background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat; overflow: hidden; - text-indent: -9999px; text-align: left; width: 16px; height: 16px; -- cgit v1.2.1 From c5cd31142bd40fe2529d2c5009cbb1ae664d9c1d Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 7 Mar 2018 00:58:15 +0530 Subject: button type and i18n support --- app/views/shared/snippets/_header.html.haml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'app') diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 6379dbc7b1b..43567bae619 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -33,18 +33,18 @@ .embed-snippet .input-group .input-group-btn - %button.btn.embed-toggle{ 'data-toggle': 'dropdown' } - %span#embed-action Embed + %button.btn.embed-toggle{ 'data-toggle': 'dropdown', type: 'button' } + %span#embed-action= _("Embed") = sprite_icon('angle-down', size: 12) %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list %li - %button#embed-btn.btn.btn-transparent.is-active{ href: "#" } - %strong.embed-toggle-list-item Embed + %button#embed-btn.btn.btn-transparent.is-active{ type: 'button' } + %strong.embed-toggle-list-item= _("Embed") %li - %button#share-btn.btn.btn-transparent{ href: "#" } - %strong.embed-toggle-list-item Share + %button#share-btn.btn.btn-transparent{ type: 'button' } + %strong.embed-toggle-list-item= _("Share") %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn - %button#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } + %button#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", type: "button", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } = sprite_icon('duplicate', size: 16) .clearfix -- cgit v1.2.1 From 101c37085f5342189b64a04f19c742cbd91e01f4 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 7 Mar 2018 18:36:16 +0530 Subject: changes based on review --- app/assets/javascripts/snippet/snippet_embed.js | 8 ++++---- app/assets/stylesheets/snippets.scss | 6 +++--- app/helpers/snippets_helper.rb | 2 +- app/views/shared/snippets/_header.html.haml | 10 +++++----- 4 files changed, 13 insertions(+), 13 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js index 700247cfdb3..81ec483f2d9 100644 --- a/app/assets/javascripts/snippet/snippet_embed.js +++ b/app/assets/javascripts/snippet/snippet_embed.js @@ -1,9 +1,9 @@ export default () => { const { protocol, host, pathname } = location; - const shareBtn = document.querySelector('#share-btn'); - const embedBtn = document.querySelector('#embed-btn'); - const snippetUrlArea = document.querySelector('#snippet-url-area'); - const embedAction = document.querySelector('#embed-action'); + const shareBtn = document.querySelector('.js-share-btn'); + const embedBtn = document.querySelector('.js-embed-btn'); + const snippetUrlArea = document.querySelector('.js-snippet-url-area'); + const embedAction = document.querySelector('.js-embed-action'); const url = `${protocol}//${host + pathname}`; shareBtn.addEventListener('click', () => { diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index 14e6b5a1e1e..0d6b0735f70 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -22,9 +22,9 @@ height: 16px; background-size: cover; - &.gl-snippet-icon-doc_code { background-position: -0 -0; } - &.gl-snippet-icon-doc_text { background-position: -0 -16px; } - &.gl-snippet-icon-download { background-position: -0 -32px; } + &.gl-snippet-icon-doc_code { background-position: 0 0; } + &.gl-snippet-icon-doc_text { background-position: 0 -16px; } + &.gl-snippet-icon-download { background-position: 0 -32px; } } .blob-viewer { diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb index 830db46d67f..59e0d192ffa 100644 --- a/app/helpers/snippets_helper.rb +++ b/app/helpers/snippets_helper.rb @@ -116,7 +116,7 @@ module SnippetsHelper raw_project_snippet_url(@snippet.project, @snippet) end - link_to external_snippet_icon('doc_code'), snippet_raw_url, class: 'btn', target: '_blank', rel: 'noopener noreferrer', title: 'Open raw', data: { container: 'body' } + link_to external_snippet_icon('doc_code'), snippet_raw_url, class: 'btn', target: '_blank', rel: 'noopener noreferrer', title: 'Open raw' end def embedded_snippet_download_button diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 43567bae619..836230ae8ee 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -34,17 +34,17 @@ .input-group .input-group-btn %button.btn.embed-toggle{ 'data-toggle': 'dropdown', type: 'button' } - %span#embed-action= _("Embed") + %span.js-embed-action= _("Embed") = sprite_icon('angle-down', size: 12) %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list %li - %button#embed-btn.btn.btn-transparent.is-active{ type: 'button' } + %button.js-embed-btn.btn.btn-transparent.is-active{ type: 'button' } %strong.embed-toggle-list-item= _("Embed") %li - %button#share-btn.btn.btn-transparent{ type: 'button' } + %button.js-share-btn.btn.btn-transparent{ type: 'button' } %strong.embed-toggle-list-item= _("Share") - %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } + %input.js-snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed } .input-group-btn - %button#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", type: "button", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } } + %button.js-clipboard-btn.btn.btn-default.has-tooltip{ title: "Copy to clipboard", 'data-clipboard-target': '#snippet-url-area' } = sprite_icon('duplicate', size: 16) .clearfix -- cgit v1.2.1 From d23337fd96058d38d6615e210b61830a3d334d46 Mon Sep 17 00:00:00 2001 From: haseeb Date: Wed, 7 Mar 2018 20:24:16 +0530 Subject: fix failing spec --- app/helpers/snippets_helper.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb index 59e0d192ffa..733832c1bbb 100644 --- a/app/helpers/snippets_helper.rb +++ b/app/helpers/snippets_helper.rb @@ -126,7 +126,7 @@ module SnippetsHelper raw_project_snippet_url(@snippet.project, @snippet, inline: false) end - link_to external_snippet_icon('download'), download_url, class: 'btn', target: '_blank', title: 'Download', data: { container: 'body' }, rel: 'noopener noreferrer' + link_to external_snippet_icon('download'), download_url, class: 'btn', target: '_blank', title: 'Download', rel: 'noopener noreferrer' end def public_snippet? -- cgit v1.2.1 From f9dc1e86881f21b0960d0035c1e051c2e54fdd80 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 12 Mar 2018 14:40:17 +0000 Subject: Remove js-toggle classes --- app/views/shared/milestones/_deprecation_message.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 714739a1ca7..9f049e7bde1 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,13 +1,13 @@ -.milestone-deprecation-message.prepend-top-default.js-toggle-container +.milestone-deprecation-message.prepend-top-default = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' .inline.vertical-align-middle.text-container %strong This page will be removed in a future release. %p.append-bottom-default.prepend-top-5 Use group milestones to manage issues from multiple projects in the same milestone. %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link js-toggle-button' + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-blank' - .popup.js-toggle-content.hide + .popup.hide .body %ol.instructions-list %li -- cgit v1.2.1 From 9191f96ab762a5704165120a66131df24f61a272 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 12 Mar 2018 16:11:57 +0000 Subject: Fix illustration padding and center for mobiel --- app/assets/stylesheets/pages/milestone.scss | 8 ++++++++ app/views/shared/milestones/_deprecation_message.html.haml | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 9b5087caacf..b7fe269c7c8 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -217,4 +217,12 @@ .text-container { position: relative; } + + @media (max-width: $screen-xs-max) { + .illustration { + display: block; + text-align: center; + margin: $gl-padding 0; + } + } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 9f049e7bde1..c9a5b273173 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,5 +1,5 @@ -.milestone-deprecation-message.prepend-top-default - = image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' +.milestone-deprecation-message.prepend-top-default.prepend-left-default + .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' .inline.vertical-align-middle.text-container %strong This page will be removed in a future release. %p.append-bottom-default.prepend-top-5 -- cgit v1.2.1 From e5f3696774d893bc2a83086939b090edd1775118 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 12 Mar 2018 16:19:08 +0000 Subject: Center everything on mobile instead and correct btn-link changes --- app/assets/stylesheets/framework/buttons.scss | 2 -- app/assets/stylesheets/pages/milestone.scss | 7 ++++++- app/views/shared/milestones/_deprecation_message.html.haml | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index c358e9e93de..06dabcc77b5 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -423,8 +423,6 @@ } .btn-link { - padding: 0; - &.btn-secondary-hover-link { color: $gl-text-color-secondary; diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index b7fe269c7c8..1b9bab56979 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -218,10 +218,15 @@ position: relative; } + .btn-link { + padding: 0; + } + @media (max-width: $screen-xs-max) { + text-align: center; + .illustration { display: block; - text-align: center; margin: $gl-padding 0; } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index c9a5b273173..c32fca296bc 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -5,7 +5,7 @@ %p.append-bottom-default.prepend-top-5 Use group milestones to manage issues from multiple projects in the same milestone. %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-blank' + = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' .popup.hide .body -- cgit v1.2.1 From 5a68a96ecb3cdba0e3da7aa210f98369e02359ab Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:43:22 +0000 Subject: i8n --- .../milestones/_deprecation_message.html.haml | 30 ++++++++-------------- 1 file changed, 11 insertions(+), 19 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index c32fca296bc..363ce62b73c 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,23 +1,15 @@ .milestone-deprecation-message.prepend-top-default.prepend-left-default .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' - .inline.vertical-align-middle.text-container - %strong This page will be removed in a future release. + .inline.vertical-align-middle + %strong= _('This page will be removed in a future release.') %p.append-bottom-default.prepend-top-5 - Use group milestones to manage issues from multiple projects in the same milestone. + = _('Use group milestones to manage issues from multiple projects in the same milestone.') %br - = button_tag 'Promote these project milestones into a group milestone.', class: 'btn-link' - - .popup.hide - .body - %ol.instructions-list - %li - Click any - %strong project name - in the project list below to navigate to the project milestone. - %li - Click the - %strong Promote - button in the top right corner to promote it to a group milestone. - .footer= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' - - %div= link_to 'Learn more', help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' + %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + + %script.milestone-deprecation-message-template{ type: 'text/template' } + %ol.instructions-list.append-bottom-0 + %li= _('Click any project name in the project list below to navigate to the project milestone.') + %li= _('Click the Promote button in the top right corner to promote it to a group milestone.') + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' \ No newline at end of file -- cgit v1.2.1 From 607636b92080b3760568f36c341cbe71edfdc541 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:43:39 +0000 Subject: Correct styling now we've changed to popover --- app/assets/stylesheets/pages/milestone.scss | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 1b9bab56979..755a1eb5ee3 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -196,26 +196,26 @@ } .milestone-deprecation-message { - .popup { - max-width: 300px; - position: absolute; - left: 30px; + .popover { + padding: 0; - .body { - padding: $gl-padding-8; + .popover-content { + padding: 0; } .footer { + background-color: $white-light; padding: $gl-padding-8 $gl-padding; + border-bottom-left-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; + border-top: 1px solid $white-dark; } - } - .instructions-list { - padding: 0 0 0 30px; - } - - .text-container { - position: relative; + .instructions-list { + list-style-position: inside; + padding: $gl-padding-8 20px; + background-color: $gray-light; + } } .btn-link { -- cgit v1.2.1 From 978d553ad00fad714dd926b5e38fe927fb72051f Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 13 Mar 2018 14:44:06 +0000 Subject: Init deprecation message. Incomplete. --- app/assets/javascripts/milestone.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) (limited to 'app') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index b1d74250dfd..ab97fa50fd5 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -3,6 +3,7 @@ import flash from './flash'; export default class Milestone { constructor() { + Milestone.initDeprecationMessage(); this.bindTabsSwitching(); // Load merge request tab if it is active @@ -42,4 +43,37 @@ export default class Milestone { .catch(() => flash('Error loading milestone tab')); } } + + static initDeprecationMessage() { + const deprecationMesssage = document.querySelector('.milestone-deprecation-message'); + + if (!deprecationMesssage) return; + + const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template'); + const popoverLink = deprecationMesssage.querySelector('.popover-link'); + const $popoverLink = $(popoverLink); + + $popoverLink + .popover({ + html: true, + placement: 'bottom', + content: deprecationMesssageTemplate.innerHTML, + trigger: 'hover', + }) + .on('inserted.bs.popover', () => { + const $popover = $popoverLink.siblings('.popover').first(); + const $popoverContent = $('.popover-content', $popover); + + $popoverContent.on('mouseleave', () => { + $popoverContent.off('mouseleave'); + $popoverLink.popover('hide'); + }); + }) + .on('hidden.bs.popover', (event) => { + $(event.target).data('bs.popover').inState.click = false; + }) + .on('mouseleave', () => { + + }); + } } -- cgit v1.2.1 From a5ab67228f07f6fa1a5db7da07601643b87f23ff Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 20 Mar 2018 18:36:58 +0000 Subject: Fix translation strings and add _blank as link targets --- app/views/shared/milestones/_deprecation_message.html.haml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 363ce62b73c..a92bfd3b9df 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -6,10 +6,10 @@ = _('Use group milestones to manage issues from multiple projects in the same milestone.') %br = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' - %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default' + %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %script.milestone-deprecation-message-template{ type: 'text/template' } %ol.instructions-list.append-bottom-0 - %li= _('Click any project name in the project list below to navigate to the project milestone.') - %li= _('Click the Promote button in the top right corner to promote it to a group milestone.') - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link' \ No newline at end of file + %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe + %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' \ No newline at end of file -- cgit v1.2.1 From 0488d44cc2cc55808cf5aa17cb1b0c5423c958db Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 21 Mar 2018 18:23:33 +0000 Subject: Add popover --- app/assets/javascripts/shared/popover.js | 84 ++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 app/assets/javascripts/shared/popover.js (limited to 'app') diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js new file mode 100644 index 00000000000..48894c2b100 --- /dev/null +++ b/app/assets/javascripts/shared/popover.js @@ -0,0 +1,84 @@ +export default class Popover { + constructor(trigger, content) { + this.isOpen = false; + + this.$popover = $(trigger).popover({ + content, + html: true, + placement: 'bottom', + trigger: 'manual', + }); + } + + init() { + this.registerClickOpenListener(); + } + + openPopover() { + if (this.isOpen) return; + + this.$popover.popover('show'); + this.$popover.one('shown.bs.popover', this.enableClose.bind(this)); + this.isOpen = true; + } + + closePopover() { + if (!this.isOpen) return; + + this.$popover.popover('hide'); + this.disableClose(); + this.isOpen = false; + } + + closePopoverClick(event) { + const $target = $(event.target); + + if ($target.is(this.$popover) || + $target.is('.popover') || + $target.parents('.popover').length > 0) return; + + this.closePopover(); + } + + closePopoverMouseleave() { + setTimeout(() => { + if (this.$popover.is(':hover') || + (this.$popover.siblings('.popover').length > 0 && + this.$popover.siblings('.popover').is(':hover'))) return; + + this.closePopover(); + }, 1500); + } + + registerClickOpenListener() { + this.$popover.on('click.glPopover.open', this.openPopover.bind(this)); + } + + registerClickCloseListener() { + $(document.body).on('click.glPopover.close', this.closePopoverClick.bind(this)); + } + + registerMouseleaveCloseListener() { + this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); + this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); + } + + destroyMouseleaveCloseListener() { + this.$popover.off('mouseleave.glPopover.close'); + this.$popover.siblings('.popover').on('mouseleave.glPopover.close'); + } + + enableClose() { + this.registerClickCloseListener(); + this.registerMouseleaveCloseListener(); + } + + disableClose() { + Popover.destroyClickCloseListener(); + this.destroyMouseleaveCloseListener(); + } + + static destroyClickCloseListener() { + $(document.body).off('click.glPopover.close'); + } +} -- cgit v1.2.1 From 5595afe807c3c11d9c695c558da1210a25544387 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 21 Mar 2018 18:23:42 +0000 Subject: Impl popover for milestone deprecation --- app/assets/javascripts/milestone.js | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index ab97fa50fd5..0f1dcc7e9e9 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -1,5 +1,6 @@ import axios from './lib/utils/axios_utils'; import flash from './flash'; +import Popover from './shared/popover'; export default class Milestone { constructor() { @@ -49,31 +50,10 @@ export default class Milestone { if (!deprecationMesssage) return; - const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template'); + const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template').innerHTML; const popoverLink = deprecationMesssage.querySelector('.popover-link'); - const $popoverLink = $(popoverLink); - $popoverLink - .popover({ - html: true, - placement: 'bottom', - content: deprecationMesssageTemplate.innerHTML, - trigger: 'hover', - }) - .on('inserted.bs.popover', () => { - const $popover = $popoverLink.siblings('.popover').first(); - const $popoverContent = $('.popover-content', $popover); - - $popoverContent.on('mouseleave', () => { - $popoverContent.off('mouseleave'); - $popoverLink.popover('hide'); - }); - }) - .on('hidden.bs.popover', (event) => { - $(event.target).data('bs.popover').inState.click = false; - }) - .on('mouseleave', () => { - - }); + const popover = new Popover(popoverLink, deprecationMesssageTemplate); + popover.init(); } } -- cgit v1.2.1 From e829c39d51d1d4b6b057307049764f7a1146f242 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 23 Mar 2018 19:13:54 +0000 Subject: Tidy timeout and add jquery --- app/assets/javascripts/shared/popover.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 48894c2b100..ae4bfa1c916 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,3 +1,5 @@ +import $ from 'jquery'; + export default class Popover { constructor(trigger, content) { this.isOpen = false; @@ -41,13 +43,15 @@ export default class Popover { } closePopoverMouseleave() { - setTimeout(() => { - if (this.$popover.is(':hover') || - (this.$popover.siblings('.popover').length > 0 && - this.$popover.siblings('.popover').is(':hover'))) return; + if (this.$popover.is(':hover') || + (this.$popover.siblings('.popover').length > 0 && + this.$popover.siblings('.popover').is(':hover'))) return; + + this.closePopover(); + } - this.closePopover(); - }, 1500); + closePopoverMouseleaveDelayed() { + setTimeout(this.closePopoverMouseleave.bind(this), 1500); } registerClickOpenListener() { @@ -59,8 +63,8 @@ export default class Popover { } registerMouseleaveCloseListener() { - this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this)); + this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); + this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); } destroyMouseleaveCloseListener() { -- cgit v1.2.1 From 8f3e53eef138e9b9790437c86434492aab51ada1 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Fri, 23 Mar 2018 19:31:32 +0000 Subject: remove unneeded svg commits --- app/assets/images/icons.json | 1 - app/assets/images/icons.svg | 1 - app/assets/images/illustrations/epics.svg | 1 - app/assets/images/illustrations/epics/list.svg | 1 - app/assets/images/illustrations/epics/roadmap.svg | 1 - app/assets/images/illustrations/lock_promotion.svg | 1 - app/assets/images/illustrations/milestone_removing-page.svg | 1 - app/assets/images/illustrations/prometheus-graphs_empty.svg | 1 - app/assets/images/illustrations/web-ide_promotion.svg | 1 - 9 files changed, 9 deletions(-) delete mode 100644 app/assets/images/icons.json delete mode 100644 app/assets/images/icons.svg delete mode 100644 app/assets/images/illustrations/epics.svg delete mode 100644 app/assets/images/illustrations/epics/list.svg delete mode 100644 app/assets/images/illustrations/epics/roadmap.svg delete mode 100644 app/assets/images/illustrations/lock_promotion.svg delete mode 100644 app/assets/images/illustrations/milestone_removing-page.svg delete mode 100644 app/assets/images/illustrations/prometheus-graphs_empty.svg delete mode 100644 app/assets/images/illustrations/web-ide_promotion.svg (limited to 'app') diff --git a/app/assets/images/icons.json b/app/assets/images/icons.json deleted file mode 100644 index b78dc6a2f07..00000000000 --- a/app/assets/images/icons.json +++ /dev/null @@ -1 +0,0 @@ -{"iconCount":196,"spriteSize":88552,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","blame","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","compress","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","error","expand","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor-lines","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","soft-unwrap","soft-wrap","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_notfound","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]} \ No newline at end of file diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg deleted file mode 100644 index 0dd09b4607f..00000000000 --- a/app/assets/images/icons.svg +++ /dev/null @@ -1 +0,0 @@ -error \ No newline at end of file diff --git a/app/assets/images/illustrations/epics.svg b/app/assets/images/illustrations/epics.svg deleted file mode 100644 index be6c3fb76a5..00000000000 --- a/app/assets/images/illustrations/epics.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/list.svg b/app/assets/images/illustrations/epics/list.svg deleted file mode 100644 index be6c3fb76a5..00000000000 --- a/app/assets/images/illustrations/epics/list.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/epics/roadmap.svg b/app/assets/images/illustrations/epics/roadmap.svg deleted file mode 100644 index a14f14b91c9..00000000000 --- a/app/assets/images/illustrations/epics/roadmap.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/lock_promotion.svg b/app/assets/images/illustrations/lock_promotion.svg deleted file mode 100644 index 6f1f9b2b030..00000000000 --- a/app/assets/images/illustrations/lock_promotion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/milestone_removing-page.svg b/app/assets/images/illustrations/milestone_removing-page.svg deleted file mode 100644 index a8cd54da0d3..00000000000 --- a/app/assets/images/illustrations/milestone_removing-page.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/illustrations/prometheus-graphs_empty.svg b/app/assets/images/illustrations/prometheus-graphs_empty.svg deleted file mode 100644 index 0ef198f59cd..00000000000 --- a/app/assets/images/illustrations/prometheus-graphs_empty.svg +++ /dev/null @@ -1 +0,0 @@ -prometheus-graphs_empty \ No newline at end of file diff --git a/app/assets/images/illustrations/web-ide_promotion.svg b/app/assets/images/illustrations/web-ide_promotion.svg deleted file mode 100644 index ef61348057d..00000000000 --- a/app/assets/images/illustrations/web-ide_promotion.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file -- cgit v1.2.1 From 08290d2c43b0ae4d6689c9ca197f4f3f6fe6de70 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 26 Mar 2018 13:29:43 +0100 Subject: Fix lint --- app/views/shared/milestones/_deprecation_message.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index a92bfd3b9df..7fff0dd6204 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -7,9 +7,9 @@ %br = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' - - %script.milestone-deprecation-message-template{ type: 'text/template' } + + %template.milestone-deprecation-message-template %ol.instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' \ No newline at end of file + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' -- cgit v1.2.1 From 60432a4a7873e2b5f8ddee0d7252b1967a3a3872 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Mon, 26 Mar 2018 18:46:42 +0100 Subject: review --- .../feature_highlight/feature_highlight.js | 5 +- .../feature_highlight/feature_highlight_helper.js | 31 +------ app/assets/javascripts/milestone.js | 20 ++-- app/assets/javascripts/shared/popover.js | 102 +++++---------------- app/assets/stylesheets/framework/popup.scss | 20 +--- app/assets/stylesheets/pages/milestone.scss | 12 +-- .../milestones/_deprecation_message.html.haml | 11 ++- 7 files changed, 58 insertions(+), 143 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index c50ac667c20..a3eaf5b32cd 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -5,7 +5,7 @@ import { togglePopover, inserted, mouseenter, - mouseleave, + debouncedMouseleave, } from './feature_highlight_helper'; export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { @@ -13,7 +13,6 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { const $parent = $selector.parent(); const $popoverContent = $parent.siblings('.feature-highlight-popover-content'); const hideOnScroll = togglePopover.bind($selector, false); - const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout); $selector // Setup popover @@ -29,7 +28,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { `, }) .on('mouseenter', mouseenter) - .on('mouseleave', debouncedMouseleave) + .on('mouseleave', debouncedMouseleave(debounceTimeout)) .on('inserted.bs.popover', inserted) .on('show.bs.popover', () => { window.addEventListener('scroll', hideOnScroll); diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js index f480e72961c..bcc7cefc2f2 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js @@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils'; import { __ } from '../locale'; import Flash from '../flash'; import LazyLoader from '../lazy_loader'; +import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover'; export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`; -export function togglePopover(show) { - const isAlreadyShown = this.hasClass('js-popover-show'); - if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { - return false; - } - this.popover(show ? 'show' : 'hide'); - this.toggleClass('disable-animation js-popover-show', show); - - return true; -} - export function dismiss(highlightId) { axios.post(this.attr('data-dismiss-endpoint'), { feature_name: highlightId, @@ -27,23 +17,6 @@ export function dismiss(highlightId) { this.hide(); } -export function mouseleave() { - if (!$('.popover:hover').length > 0) { - const $featureHighlight = $(this); - togglePopover.call($featureHighlight, false); - } -} - -export function mouseenter() { - const $featureHighlight = $(this); - - const showedPopover = togglePopover.call($featureHighlight, true); - if (showedPopover) { - $('.popover') - .on('mouseleave', mouseleave.bind($featureHighlight)); - } -} - export function inserted() { const popoverId = this.getAttribute('aria-describedby'); const highlightId = this.dataset.highlight; @@ -58,3 +31,5 @@ export function inserted() { LazyLoader.loadImage(lazyImg); } } + +export { togglePopover, mouseenter, debouncedMouseleave }; diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 22aeb396318..5a7843f3093 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import axios from './lib/utils/axios_utils'; import flash from './flash'; -import Popover from './shared/popover'; +import { mouseenter, debouncedMouseleave } from './shared/popover'; export default class Milestone { constructor() { @@ -47,14 +47,20 @@ export default class Milestone { } static initDeprecationMessage() { - const deprecationMesssage = document.querySelector('.milestone-deprecation-message'); + const deprecationMesssageContainer = document.querySelector('.milestone-deprecation-message'); - if (!deprecationMesssage) return; + if (!deprecationMesssageContainer) return; - const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template').innerHTML; - const popoverLink = deprecationMesssage.querySelector('.popover-link'); + const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML; + const popoverLink = deprecationMesssageContainer.querySelector('.popover-link'); - const popover = new Popover(popoverLink, deprecationMesssageTemplate); - popover.init(); + $(popoverLink).popover({ + content: deprecationMessage, + html: true, + placement: 'bottom', + trigger: 'manual', + }) + .on('mouseenter', mouseenter) + .on('mouseleave', debouncedMouseleave()); } } diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index ae4bfa1c916..8df52cfce2b 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,88 +1,34 @@ import $ from 'jquery'; +import { debounce } from 'underscore'; -export default class Popover { - constructor(trigger, content) { - this.isOpen = false; - - this.$popover = $(trigger).popover({ - content, - html: true, - placement: 'bottom', - trigger: 'manual', - }); - } - - init() { - this.registerClickOpenListener(); - } - - openPopover() { - if (this.isOpen) return; - - this.$popover.popover('show'); - this.$popover.one('shown.bs.popover', this.enableClose.bind(this)); - this.isOpen = true; +export function togglePopover(show) { + const isAlreadyShown = this.hasClass('js-popover-show'); + if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { + return false; } + this.popover(show ? 'show' : 'hide'); + this.toggleClass('disable-animation js-popover-show', show); - closePopover() { - if (!this.isOpen) return; - - this.$popover.popover('hide'); - this.disableClose(); - this.isOpen = false; - } - - closePopoverClick(event) { - const $target = $(event.target); - - if ($target.is(this.$popover) || - $target.is('.popover') || - $target.parents('.popover').length > 0) return; - - this.closePopover(); - } - - closePopoverMouseleave() { - if (this.$popover.is(':hover') || - (this.$popover.siblings('.popover').length > 0 && - this.$popover.siblings('.popover').is(':hover'))) return; - - this.closePopover(); - } - - closePopoverMouseleaveDelayed() { - setTimeout(this.closePopoverMouseleave.bind(this), 1500); - } - - registerClickOpenListener() { - this.$popover.on('click.glPopover.open', this.openPopover.bind(this)); - } - - registerClickCloseListener() { - $(document.body).on('click.glPopover.close', this.closePopoverClick.bind(this)); - } - - registerMouseleaveCloseListener() { - this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); - } - - destroyMouseleaveCloseListener() { - this.$popover.off('mouseleave.glPopover.close'); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close'); - } + return true; +} - enableClose() { - this.registerClickCloseListener(); - this.registerMouseleaveCloseListener(); +export function mouseleave() { + if (!$('.popover:hover').length > 0) { + const $popover = $(this); + togglePopover.call($popover, false); } +} - disableClose() { - Popover.destroyClickCloseListener(); - this.destroyMouseleaveCloseListener(); - } +export function mouseenter() { + const $popover = $(this); - static destroyClickCloseListener() { - $(document.body).off('click.glPopover.close'); + const showedPopover = togglePopover.call($popover, true); + if (showedPopover) { + $('.popover') + .on('mouseleave', mouseleave.bind($popover)); } } + +export function debouncedMouseleave(debounceTimeout = 300) { + return debounce(mouseleave, debounceTimeout); +} \ No newline at end of file diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss index a571151aef7..5c76205095f 100644 --- a/app/assets/stylesheets/framework/popup.scss +++ b/app/assets/stylesheets/framework/popup.scss @@ -6,22 +6,10 @@ $popup-triangle-border-size ); + padding: $gl-padding; + background-color: $gray-lighter; border: 1px solid $gray-darker; - box-shadow: 0 5px 10px $popup-box-shadow-color; + border-radius: $border-radius-default; + box-shadow: 0 5px 8px $popup-box-shadow-color; position: relative; - - .body { - background-color: $gray-lighter; - padding: $gl-padding; - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - } - - .footer { - background-color: $white-light; - padding: $gl-padding; - border-bottom-left-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; - border-top: 1px solid $white-dark; - } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 755a1eb5ee3..d00eda0bc30 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,18 +203,18 @@ padding: 0; } + .body { + padding: 8px 15px 8px 30px; + background-color: $gray-light; + } + .footer { - background-color: $white-light; padding: $gl-padding-8 $gl-padding; - border-bottom-left-radius: $border-radius-default; - border-bottom-right-radius: $border-radius-default; border-top: 1px solid $white-dark; } .instructions-list { - list-style-position: inside; - padding: $gl-padding-8 20px; - background-color: $gray-light; + padding: 0; } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 7fff0dd6204..0288a102e02 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -5,11 +5,12 @@ %p.append-bottom-default.prepend-top-5 = _('Use group milestones to manage issues from multiple projects in the same milestone.') %br - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link' + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link prepend-left-0' %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.milestone-deprecation-message-template - %ol.instructions-list.append-bottom-0 - %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe - %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link', target: '_blank' + .body + %ol.instructions-list.append-bottom-0 + %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe + %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe + .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' -- cgit v1.2.1 From 77ee14280e48987274ea9e6ce7ed8181de7f37a3 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 27 Mar 2018 16:15:18 +0100 Subject: Lint fix --- app/assets/javascripts/feature_highlight/feature_highlight.js | 1 - app/assets/javascripts/shared/popover.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index a3eaf5b32cd..983f4eaf4c7 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -1,5 +1,4 @@ import $ from 'jquery'; -import _ from 'underscore'; import { getSelector, togglePopover, diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 8df52cfce2b..66d4bec973f 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -31,4 +31,4 @@ export function mouseenter() { export function debouncedMouseleave(debounceTimeout = 300) { return debounce(mouseleave, debounceTimeout); -} \ No newline at end of file +} -- cgit v1.2.1 From 4950f3a5eef331f33df8fafd7ada5de5505a43e5 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Tue, 27 Mar 2018 18:17:36 +0100 Subject: Review changes --- .../javascripts/feature_highlight/feature_highlight.js | 6 ++++-- .../feature_highlight/feature_highlight_helper.js | 4 +--- app/assets/javascripts/milestone.js | 16 +++++++++++----- app/assets/javascripts/shared/popover.js | 3 +-- app/assets/stylesheets/framework/variables.scss | 4 ++-- app/assets/stylesheets/pages/milestone.scss | 15 +++++++++------ .../shared/milestones/_deprecation_message.html.haml | 6 +++--- 7 files changed, 31 insertions(+), 23 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index 983f4eaf4c7..0d385ab0aac 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -1,11 +1,13 @@ import $ from 'jquery'; import { getSelector, - togglePopover, inserted, +} from './feature_highlight_helper'; +import { + togglePopover, mouseenter, debouncedMouseleave, -} from './feature_highlight_helper'; +} from '../shared/popover'; export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { const $selector = $(getSelector(id)); diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js index bcc7cefc2f2..d5b97ebb264 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js @@ -3,7 +3,7 @@ import axios from '../lib/utils/axios_utils'; import { __ } from '../locale'; import Flash from '../flash'; import LazyLoader from '../lazy_loader'; -import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover'; +import { togglePopover } from '../shared/popover'; export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`; @@ -31,5 +31,3 @@ export function inserted() { LazyLoader.loadImage(lazyImg); } } - -export { togglePopover, mouseenter, debouncedMouseleave }; diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 5a7843f3093..714b543db04 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import axios from './lib/utils/axios_utils'; import flash from './flash'; -import { mouseenter, debouncedMouseleave } from './shared/popover'; +import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover'; export default class Milestone { constructor() { @@ -52,15 +52,21 @@ export default class Milestone { if (!deprecationMesssageContainer) return; const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML; - const popoverLink = deprecationMesssageContainer.querySelector('.popover-link'); + const $popover = $('.popover-link', deprecationMesssageContainer); + const hideOnScroll = togglePopover.bind($popover, false); - $(popoverLink).popover({ + $popover.popover({ content: deprecationMessage, html: true, placement: 'bottom', - trigger: 'manual', }) .on('mouseenter', mouseenter) - .on('mouseleave', debouncedMouseleave()); + .on('mouseleave', debouncedMouseleave()) + .on('show.bs.popover', () => { + window.addEventListener('scroll', hideOnScroll); + }) + .on('hide.bs.popover', () => { + window.removeEventListener('scroll', hideOnScroll); + }); } } diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index 66d4bec973f..b406571a1db 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -24,8 +24,7 @@ export function mouseenter() { const showedPopover = togglePopover.call($popover, true); if (showedPopover) { - $('.popover') - .on('mouseleave', mouseleave.bind($popover)); + $('.popover').on('mouseleave', mouseleave.bind($popover)); } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b8e0811e92c..a81904d5338 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -754,9 +754,9 @@ $image-comment-cursor-top-offset: 12; /* Popup */ -$popup-triangle-size: 8px; +$popup-triangle-size: 15px; $popup-triangle-border-size: 1px; -$popup-box-shadow-color: rgba(90, 90, 90, 0.3); +$popup-box-shadow-color: rgba(90, 90, 90, 0.05); /* Multi file editor diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index d00eda0bc30..0c00ee0a98c 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,18 +203,21 @@ padding: 0; } - .body { - padding: 8px 15px 8px 30px; - background-color: $gray-light; + .milestone-popover-body { + padding: $gl-padding-8; } - .footer { + .milestone-popover-footer { padding: $gl-padding-8 $gl-padding; border-top: 1px solid $white-dark; } - .instructions-list { - padding: 0; + .milestone-popover-instructions-list { + padding-left: 2em; + + & > li { + padding-left: 1em; + } } } diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 0288a102e02..38799003c11 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -9,8 +9,8 @@ %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' %template.milestone-deprecation-message-template - .body - %ol.instructions-list.append-bottom-0 + .milestone-popover-body + %ol.milestone-popover-instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe %li= _('Click the Promote button in the top right corner to promote it to a group milestone.').html_safe - .footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' + .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn-link prepend-left-0', target: '_blank' -- cgit v1.2.1 From cc00f468b0f1c2fe692050cadad9f8ecd7343e45 Mon Sep 17 00:00:00 2001 From: George Tsiolis Date: Mon, 19 Mar 2018 17:03:52 +0200 Subject: Add i18n and update specs for UnresolvedDiscussions vue component --- .../components/states/unresolved_discussions.vue | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue index 9ade6a91747..a1f7e696795 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue @@ -7,7 +7,10 @@ export default { statusIcon, }, props: { - mr: { type: Object, required: true }, + mr: { + type: Object, + required: true, + }, }, }; @@ -20,13 +23,14 @@ export default { />
- There are unresolved discussions. Please resolve these discussions + {{ s__("mrWidget|There are unresolved discussions. Please resolve these discussions") }} - Create an issue to resolve them later + class="btn btn-default btn-xs js-create-issue" + > + {{ s__("mrWidget|Create an issue to resolve them later") }}
-- cgit v1.2.1 From 90ca4aa03239c3924c0005c3c3e2fdb563a9beb2 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 11:16:06 +0000 Subject: Fix milestone.scss lint --- app/assets/stylesheets/pages/milestone.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 0c00ee0a98c..1729fe1c2e9 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -215,7 +215,7 @@ .milestone-popover-instructions-list { padding-left: 2em; - & > li { + > li { padding-left: 1em; } } -- cgit v1.2.1 From 3a6fc8b3298faa89f8b9d5899546738db230fbe9 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 16:19:35 +0000 Subject: Update popover.js --- app/assets/javascripts/shared/popover.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index b406571a1db..3fc03553bdd 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import { debounce } from 'underscore'; +import _ from 'underscore'; export function togglePopover(show) { const isAlreadyShown = this.hasClass('js-popover-show'); @@ -29,5 +29,5 @@ export function mouseenter() { } export function debouncedMouseleave(debounceTimeout = 300) { - return debounce(mouseleave, debounceTimeout); + return _.debounce(mouseleave, debounceTimeout); } -- cgit v1.2.1 From cd336b13730ae195928a677ebb9b86b30d54afd7 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 18:12:30 +0100 Subject: Review --- app/assets/stylesheets/pages/milestone.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 1729fe1c2e9..5c9b33b09ba 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -205,6 +205,7 @@ .milestone-popover-body { padding: $gl-padding-8; + background-color: $gray-light; } .milestone-popover-footer { -- cgit v1.2.1 From 410a54c55e4b223316c310b949977257649e9adb Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 28 Mar 2018 18:27:35 +0100 Subject: Review fix --- app/assets/stylesheets/pages/milestone.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 5c9b33b09ba..54bcf5c837c 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -232,6 +232,10 @@ .illustration { display: block; margin: $gl-padding 0; + + > img { + margin: 0; + } } } } -- cgit v1.2.1 From d3ebaae596c3ebe62a87fb6e595c205b65503129 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:18:49 +0100 Subject: use js- prefix --- app/assets/javascripts/milestone.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 714b543db04..046c8908a38 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -47,12 +47,12 @@ export default class Milestone { } static initDeprecationMessage() { - const deprecationMesssageContainer = document.querySelector('.milestone-deprecation-message'); + const deprecationMesssageContainer = document.querySelector('.js-milestone-deprecation-message'); if (!deprecationMesssageContainer) return; - const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML; - const $popover = $('.popover-link', deprecationMesssageContainer); + const deprecationMessage = deprecationMesssageContainer.querySelector('.js-milestone-deprecation-message-template').innerHTML; + const $popover = $('.js-popover-link', deprecationMesssageContainer); const hideOnScroll = togglePopover.bind($popover, false); $popover.popover({ -- cgit v1.2.1 From 8479bf58a21bf526646cbcef1472f94fdb25e9e2 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:19:01 +0100 Subject: Remove media query --- app/assets/stylesheets/pages/milestone.scss | 39 ++++++++++------------------- 1 file changed, 13 insertions(+), 26 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 54bcf5c837c..9995ac7f0b6 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -203,39 +203,26 @@ padding: 0; } - .milestone-popover-body { - padding: $gl-padding-8; - background-color: $gray-light; - } + .milestone-popover-body { + padding: $gl-padding-8; + background-color: $gray-light; + } - .milestone-popover-footer { - padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $white-dark; - } + .milestone-popover-footer { + padding: $gl-padding-8 $gl-padding; + border-top: 1px solid $white-dark; + } - .milestone-popover-instructions-list { - padding-left: 2em; + .milestone-popover-instructions-list { + padding-left: 2em; - > li { - padding-left: 1em; - } + > li { + padding-left: 1em; } } +} .btn-link { padding: 0; } - - @media (max-width: $screen-xs-max) { - text-align: center; - - .illustration { - display: block; - margin: $gl-padding 0; - - > img { - margin: 0; - } - } - } } -- cgit v1.2.1 From 4847acd81de27c17be2b3c19b8829b38d467b6a3 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:19:28 +0100 Subject: Re-jig banner callout for new design --- app/assets/stylesheets/framework/banner.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 6433b0c7855..49642177c67 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -2,6 +2,8 @@ display: flex; position: relative; flex-wrap: wrap; + justify-content: center; + align-items: start; .banner-close { position: absolute; @@ -16,10 +18,18 @@ } .banner-graphic { - margin: 20px auto; + margin: 0 20px 20px; } &.banner-non-empty-state { border-bottom: 1px solid $border-color; } + + .banner-body { + text-align: left; + } + + .banner-buttons { + text-align: center; + } } -- cgit v1.2.1 From 91df6c2270c2de728c42d5d862894e3b6f9941eb Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Thu, 29 Mar 2018 14:20:04 +0100 Subject: Re-jig banner callout markup for new design --- app/views/shared/_auto_devops_callout.html.haml | 4 ++-- .../shared/milestones/_deprecation_message.html.haml | 18 ++++++++---------- 2 files changed, 10 insertions(+), 12 deletions(-) (limited to 'app') diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml index 934d65e8b42..c7e9226babd 100644 --- a/app/views/shared/_auto_devops_callout.html.haml +++ b/app/views/shared/_auto_devops_callout.html.haml @@ -2,13 +2,13 @@ .banner-graphic = custom_icon('icon_autodevops') - .prepend-top-10.prepend-left-10.append-bottom-10 + .banner-body.prepend-top-10.prepend-left-10.append-bottom-10 %h5= s_('AutoDevOps|Auto DevOps (Beta)') %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.') %p - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer') = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link } - .prepend-top-10 + .banner-buttons = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings'), class: 'btn js-close-callout' %button.btn-transparent.banner-close.close.js-close-callout{ type: 'button', diff --git a/app/views/shared/milestones/_deprecation_message.html.haml b/app/views/shared/milestones/_deprecation_message.html.haml index 38799003c11..6d41e056081 100644 --- a/app/views/shared/milestones/_deprecation_message.html.haml +++ b/app/views/shared/milestones/_deprecation_message.html.haml @@ -1,14 +1,12 @@ -.milestone-deprecation-message.prepend-top-default.prepend-left-default - .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default' - .inline.vertical-align-middle - %strong= _('This page will be removed in a future release.') - %p.append-bottom-default.prepend-top-5 - = _('Use group milestones to manage issues from multiple projects in the same milestone.') - %br - = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link prepend-left-0' - %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' +.banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20 + .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg' + .banner-body.prepend-left-10.append-right-10 + %h5.prepend-top-0= _('This page will be removed in a future release.') + %p= _('Use group milestones to manage issues from multiple projects in the same milestone.') + = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left' + .banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank' - %template.milestone-deprecation-message-template + %template.js-milestone-deprecation-message-template .milestone-popover-body %ol.milestone-popover-instructions-list.append-bottom-0 %li= _('Click any project name in the project list below to navigate to the project milestone.').html_safe -- cgit v1.2.1 From 5cb0a2ef83ee4618b7dfa4fa90cbc95689246051 Mon Sep 17 00:00:00 2001 From: George Tsiolis Date: Tue, 6 Mar 2018 00:24:16 +0200 Subject: Move ReadyToMerge vue component --- .../components/states/mr_widget_ready_to_merge.js | 352 -------------------- .../components/states/ready_to_merge.vue | 363 +++++++++++++++++++++ .../vue_merge_request_widget/dependencies.js | 2 +- 3 files changed, 364 insertions(+), 353 deletions(-) delete mode 100644 app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue (limited to 'app') diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js deleted file mode 100644 index 3c781ccddc8..00000000000 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js +++ /dev/null @@ -1,352 +0,0 @@ -import successSvg from 'icons/_icon_status_success.svg'; -import warningSvg from 'icons/_icon_status_warning.svg'; -import simplePoll from '~/lib/utils/simple_poll'; -import MergeRequest from '../../../merge_request'; -import Flash from '../../../flash'; -import statusIcon from '../mr_widget_status_icon.vue'; -import eventHub from '../../event_hub'; - -export default { - name: 'MRWidgetReadyToMerge', - props: { - mr: { type: Object, required: true }, - service: { type: Object, required: true }, - }, - data() { - return { - removeSourceBranch: this.mr.shouldRemoveSourceBranch, - mergeWhenBuildSucceeds: false, - useCommitMessageWithDescription: false, - setToMergeWhenPipelineSucceeds: false, - showCommitMessageEditor: false, - isMakingRequest: false, - isMergingImmediately: false, - commitMessage: this.mr.commitMessage, - successSvg, - warningSvg, - }; - }, - components: { - statusIcon, - }, - computed: { - shouldShowMergeWhenPipelineSucceedsText() { - return this.mr.isPipelineActive; - }, - commitMessageLinkTitle() { - const withDesc = 'Include description in commit message'; - const withoutDesc = "Don't include description in commit message"; - - return this.useCommitMessageWithDescription ? withoutDesc : withDesc; - }, - status() { - const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr; - - if (hasCI && !ciStatus) { - return 'failed'; - } else if (!pipeline) { - return 'success'; - } else if (isPipelineActive) { - return 'pending'; - } else if (isPipelineFailed) { - return 'failed'; - } - - return 'success'; - }, - mergeButtonClass() { - const defaultClass = 'btn btn-sm btn-success accept-merge-request'; - const failedClass = `${defaultClass} btn-danger`; - const inActionClass = `${defaultClass} btn-info`; - - if (this.status === 'failed') { - return failedClass; - } else if (this.status === 'pending') { - return inActionClass; - } - - return defaultClass; - }, - iconClass() { - if (this.status === 'failed' || !this.commitMessage.length || !this.mr.isMergeAllowed || this.mr.preventMerge) { - return 'warning'; - } - return 'success'; - }, - mergeButtonText() { - if (this.isMergingImmediately) { - return 'Merge in progress'; - } else if (this.shouldShowMergeWhenPipelineSucceedsText) { - return 'Merge when pipeline succeeds'; - } - - return 'Merge'; - }, - shouldShowMergeOptionsDropdown() { - return this.mr.isPipelineActive && !this.mr.onlyAllowMergeIfPipelineSucceeds; - }, - isMergeButtonDisabled() { - const { commitMessage } = this; - return Boolean(!commitMessage.length - || !this.shouldShowMergeControls() - || this.isMakingRequest - || this.mr.preventMerge); - }, - isRemoveSourceBranchButtonDisabled() { - return this.isMergeButtonDisabled; - }, - shouldShowSquashBeforeMerge() { - const { commitsCount, enableSquashBeforeMerge } = this.mr; - return enableSquashBeforeMerge && commitsCount > 1; - }, - }, - methods: { - shouldShowMergeControls() { - return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText; - }, - updateCommitMessage() { - const cmwd = this.mr.commitMessageWithDescription; - this.useCommitMessageWithDescription = !this.useCommitMessageWithDescription; - this.commitMessage = this.useCommitMessageWithDescription ? cmwd : this.mr.commitMessage; - }, - toggleCommitMessageEditor() { - this.showCommitMessageEditor = !this.showCommitMessageEditor; - }, - handleMergeButtonClick(mergeWhenBuildSucceeds, mergeImmediately) { - // TODO: Remove no-param-reassign - if (mergeWhenBuildSucceeds === undefined) { - mergeWhenBuildSucceeds = this.mr.isPipelineActive; // eslint-disable-line no-param-reassign - } else if (mergeImmediately) { - this.isMergingImmediately = true; - } - - this.setToMergeWhenPipelineSucceeds = mergeWhenBuildSucceeds === true; - - const options = { - sha: this.mr.sha, - commit_message: this.commitMessage, - merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds, - should_remove_source_branch: this.removeSourceBranch === true, - }; - - // Only truthy in EE extension of this component - if (this.setAdditionalParams) { - this.setAdditionalParams(options); - } - - this.isMakingRequest = true; - this.service.merge(options) - .then(res => res.data) - .then((data) => { - const hasError = data.status === 'failed' || data.status === 'hook_validation_error'; - - if (data.status === 'merge_when_pipeline_succeeds') { - eventHub.$emit('MRWidgetUpdateRequested'); - } else if (data.status === 'success') { - this.initiateMergePolling(); - } else if (hasError) { - eventHub.$emit('FailedToMerge', data.merge_error); - } - }) - .catch(() => { - this.isMakingRequest = false; - new Flash('Something went wrong. Please try again.'); // eslint-disable-line - }); - }, - initiateMergePolling() { - simplePoll((continuePolling, stopPolling) => { - this.handleMergePolling(continuePolling, stopPolling); - }); - }, - handleMergePolling(continuePolling, stopPolling) { - this.service.poll() - .then(res => res.data) - .then((data) => { - if (data.state === 'merged') { - // If state is merged we should update the widget and stop the polling - eventHub.$emit('MRWidgetUpdateRequested'); - eventHub.$emit('FetchActionsContent'); - MergeRequest.setStatusBoxToMerged(); - MergeRequest.hideCloseButton(); - MergeRequest.decreaseCounter(); - stopPolling(); - - // If user checked remove source branch and we didn't remove the branch yet - // we should start another polling for source branch remove process - if (this.removeSourceBranch && data.source_branch_exists) { - this.initiateRemoveSourceBranchPolling(); - } - } else if (data.merge_error) { - eventHub.$emit('FailedToMerge', data.merge_error); - stopPolling(); - } else { - // MR is not merged yet, continue polling until the state becomes 'merged' - continuePolling(); - } - }) - .catch(() => { - new Flash('Something went wrong while merging this merge request. Please try again.'); // eslint-disable-line - }); - }, - initiateRemoveSourceBranchPolling() { - // We need to show source branch is being removed spinner in another component - eventHub.$emit('SetBranchRemoveFlag', [true]); - - simplePoll((continuePolling, stopPolling) => { - this.handleRemoveBranchPolling(continuePolling, stopPolling); - }); - }, - handleRemoveBranchPolling(continuePolling, stopPolling) { - this.service.poll() - .then(res => res.data) - .then((data) => { - // If source branch exists then we should continue polling - // because removing a source branch is a background task and takes time - if (data.source_branch_exists) { - continuePolling(); - } else { - // Branch is removed. Update widget, stop polling and hide the spinner - eventHub.$emit('MRWidgetUpdateRequested', () => { - eventHub.$emit('SetBranchRemoveFlag', [false]); - }); - stopPolling(); - } - }) - .catch(() => { - new Flash('Something went wrong while removing the source branch. Please try again.'); // eslint-disable-line - }); - }, - }, - template: ` -
- -
-
- -