From f46acfc7abd72342bbd07cd9e87b0d5a3740a8b6 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 25 Oct 2016 16:00:38 -0600 Subject: integrate vue components, use intance variables to pass data to vue --- app/assets/javascripts/pipeline.vue.js.es6 | 14 +++++++++++++ app/assets/javascripts/pipelines.vue.js.es6 | 31 +++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 app/assets/javascripts/pipeline.vue.js.es6 create mode 100644 app/assets/javascripts/pipelines.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/pipeline.vue.js.es6 b/app/assets/javascripts/pipeline.vue.js.es6 new file mode 100644 index 00000000000..959d7be32fa --- /dev/null +++ b/app/assets/javascripts/pipeline.vue.js.es6 @@ -0,0 +1,14 @@ +//= require vue + +(gl => { + gl.VuePipeLine = Vue.extend({ + props: ['pipeline'], + template: ` +
+ + {{ pipeline.status }} + +
+ ` + }) +})(window.gl || (window.gl = {})) diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 new file mode 100644 index 00000000000..8cf0558d94b --- /dev/null +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -0,0 +1,31 @@ +//= require vue + +(gl => { + gl.VuePipeLines = Vue.extend({ + props: ['pipelines', 'count'], + template: ` +
+ + + + + + + + + + +
+ +
+ +
StatusPipelineCommitStages
+
+ `, + computed: { + pipes() { + return this.pipelines + } + } + }) +})(window.gl || (window.gl = {})) -- cgit v1.2.1 From 243717c0cc3172d50e4ca5c0be567bfd599b4d90 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 25 Oct 2016 16:42:55 -0600 Subject: conditional show --- app/assets/javascripts/pipelines.vue.js.es6 | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index 8cf0558d94b..e98c8816dfd 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -4,7 +4,12 @@ gl.VuePipeLines = Vue.extend({ props: ['pipelines', 'count'], template: ` -
+
+
+ No pipelines to show +
+
+
-- cgit v1.2.1 From d858c54879c61afde2df07e96e31c96b8a9f9586 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 26 Oct 2016 12:43:58 -0600 Subject: conform to eslint --- app/assets/javascripts/pipeline.vue.js.es6 | 10 ++++++---- app/assets/javascripts/pipelines.vue.js.es6 | 14 ++++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/pipeline.vue.js.es6 b/app/assets/javascripts/pipeline.vue.js.es6 index 959d7be32fa..7e9da71b6ab 100644 --- a/app/assets/javascripts/pipeline.vue.js.es6 +++ b/app/assets/javascripts/pipeline.vue.js.es6 @@ -1,6 +1,8 @@ //= require vue +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ -(gl => { +((gl) => { gl.VuePipeLine = Vue.extend({ props: ['pipeline'], template: ` @@ -9,6 +11,6 @@ {{ pipeline.status }} - ` - }) -})(window.gl || (window.gl = {})) + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index e98c8816dfd..50ecf28394d 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -1,6 +1,8 @@ //= require vue +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ -(gl => { +((gl) => { gl.VuePipeLines = Vue.extend({ props: ['pipelines', 'count'], template: ` @@ -29,8 +31,8 @@ `, computed: { pipes() { - return this.pipelines - } - } - }) -})(window.gl || (window.gl = {})) + return this.pipelines; + }, + }, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 50b4c2dc0f2844c7017a352a1df0b919f2bcc51d Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 15:53:29 -0600 Subject: getting somewhere - now need to fix loop --- app/assets/javascripts/pipelines.vue.js.es6 | 182 +++++++++++++++++++++++++--- 1 file changed, 162 insertions(+), 20 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index 50ecf28394d..cf3f7a729eb 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -6,28 +6,170 @@ gl.VuePipeLines = Vue.extend({ props: ['pipelines', 'count'], template: ` -
-
- No pipelines to show -
-
-
-
Status
- - - - - - - - - -
- +
+ + + + + + + + +
+
+ + + + + + -
StatusPipelineCommitStages
StatusPipelineCommitStages
+ + + + + + + +  failed + + + + #30 + by + API + +
+ +
+ master +
+ + + +
+ 29141ed3 +

+ + fix broken repo 500 errors in UI and added relevant specs +

+ 		+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+ 		+
-
+ + `, computed: { pipes() { -- cgit v1.2.1 From 02c2ef89e9bb5f86e1fd1c3f188befea480908c1 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 16:18:55 -0600 Subject: fixed loop - move on to make components --- app/assets/javascripts/pipelines.vue.js.es6 | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index cf3f7a729eb..4d6b00553cf 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -14,8 +14,7 @@ - -
+ @@ -168,7 +167,6 @@
- `, computed: { -- cgit v1.2.1 From 89823100b7cf37944ab8061a68e08afd46dcfc59 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 16:24:33 -0600 Subject: formatting --- app/assets/javascripts/pipelines.vue.js.es6 | 302 ++++++++++++++-------------- 1 file changed, 152 insertions(+), 150 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index 4d6b00553cf..e20bdf8e992 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -7,166 +7,168 @@ props: ['pipelines', 'count'], template: ` - Status - Pipeline - Commit - Stages - - - + + Status + Pipeline + Commit + Stages + + + + - - - - - - - - - -  failed - - - - - #30 - by - API - - -
- -
- master -
- - - + + + + + + + + + +  {{pipeline.status}} + + + + + #30 + by + API + + +
+
- 29141ed3 -

- - fix broken repo 500 errors in UI and added relevant specs -

- - -
- - - - - - + master +
+ + + +
+ 29141ed3 +

+ + fix broken repo 500 errors in UI and added relevant specs +

+ + +
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
-
- - - - - - +
+
+ + + + + + -
- - - - -
-
-
- - - - - - - -
-
- - - - - -
-
-
- -
-
- - +
+ + + + +
+
+
+ + + + + + + +
+
+ + + + + +
+
+
+ +
+
+ + `, computed: { -- cgit v1.2.1 From 0208d6008f7d154615b510d7060c37ff5698a5e4 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 27 Oct 2016 16:32:39 -0600 Subject: id is dynamic --- app/assets/javascripts/pipelines.vue.js.es6 | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index e20bdf8e992..26a3bc2d65f 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -19,7 +19,7 @@ - + @@ -31,7 +31,7 @@ - #30 + #{{pipeline.id}} by API @@ -53,7 +53,7 @@
- + @@ -62,7 +62,7 @@
- + @@ -71,7 +71,7 @@
- + @@ -80,7 +80,7 @@
- + @@ -89,7 +89,7 @@
- + @@ -98,7 +98,7 @@
- + @@ -107,7 +107,7 @@
- + @@ -116,7 +116,7 @@
- + @@ -164,7 +164,7 @@
- +
@@ -173,6 +173,7 @@ `, computed: { pipes() { + console.log(this.pipelines); return this.pipelines; }, }, -- cgit v1.2.1 From dc476fe6ff1c55a992fce8483b9f8a4762e302fa Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 29 Oct 2016 13:50:08 -0600 Subject: stashing --- app/assets/javascripts/pipeline.vue.js.es6 | 16 ------- app/assets/javascripts/pipelines.vue.js.es6 | 59 ++++++++++++++----------- app/assets/javascripts/runnerstats/index.js.es6 | 56 +++++++++++++++++++++++ app/assets/javascripts/status_svg.vue.js.es6 | 18 ++++++++ 4 files changed, 106 insertions(+), 43 deletions(-) delete mode 100644 app/assets/javascripts/pipeline.vue.js.es6 create mode 100644 app/assets/javascripts/runnerstats/index.js.es6 create mode 100644 app/assets/javascripts/status_svg.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/pipeline.vue.js.es6 b/app/assets/javascripts/pipeline.vue.js.es6 deleted file mode 100644 index 7e9da71b6ab..00000000000 --- a/app/assets/javascripts/pipeline.vue.js.es6 +++ /dev/null @@ -1,16 +0,0 @@ -//= require vue -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePipeLine = Vue.extend({ - props: ['pipeline'], - template: ` -
- - {{ pipeline.status }} - -
- `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 index 26a3bc2d65f..1bd30feaf9e 100644 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ b/app/assets/javascripts/pipelines.vue.js.es6 @@ -1,9 +1,15 @@ //= require vue +//= require_tree ./runnerstats /* global Vue, gl */ /* eslint-disable no-param-reassign */ ((gl) => { gl.VuePipeLines = Vue.extend({ + data() { + return { + runnerStats: new gl.RunnerStats(), + }; + }, props: ['pipelines', 'count'], template: ` @@ -19,21 +25,19 @@ - - - - - - - -  {{pipeline.status}} - + + + + + - #{{pipeline.id}} + #{{pipeline.id}} by - API + {{pipeline.user}}
@@ -53,7 +57,7 @@
- + @@ -62,7 +66,7 @@
- + @@ -71,7 +75,7 @@
- + @@ -80,7 +84,7 @@
- + @@ -89,7 +93,7 @@
- + @@ -98,7 +102,7 @@
- + @@ -107,7 +111,7 @@
- + @@ -116,7 +120,7 @@
- + @@ -164,18 +168,19 @@
- -
+ + + + `, - computed: { - pipes() { - console.log(this.pipelines); - return this.pipelines; - }, - }, }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/runnerstats/index.js.es6 b/app/assets/javascripts/runnerstats/index.js.es6 new file mode 100644 index 00000000000..35f95f3a811 --- /dev/null +++ b/app/assets/javascripts/runnerstats/index.js.es6 @@ -0,0 +1,56 @@ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.RunnerStats = class { + constructor() { + return { + running: { + text: 'pending', + color: '#E75E40', + pathOne: 'M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z', + pathTwo: 'M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z', + }, + passed: ` + + + + + + + + passed + `, + failed: ` + + + + + + +  failed + `, + created: ` +  created + `, + skipped: ` + + + + + + +  skipped + `, + pending: ` + + + + + + +  pending + `, + }; + } + }; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/status_svg.vue.js.es6 b/app/assets/javascripts/status_svg.vue.js.es6 new file mode 100644 index 00000000000..0af35ba6f3a --- /dev/null +++ b/app/assets/javascripts/status_svg.vue.js.es6 @@ -0,0 +1,18 @@ +//= require vue +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunnerStatus = Vue.extend({ + props: ['status'], + template: ` + + + + + + +  {{status.text}} + `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 66727f74b806a978c4bf76a8e9bd4b86c6443651 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 01:28:57 -0600 Subject: change architecture - add store - make api call by default --- app/assets/javascripts/pipelines.vue.js.es6 | 186 ------------------- app/assets/javascripts/runnerstats/index.js.es6 | 56 ------ app/assets/javascripts/status_svg.vue.js.es6 | 18 -- .../javascripts/vue_pipelines_index/index.js.es6 | 7 + .../vue_pipelines_index/pipelines.vue.js.es6 | 198 +++++++++++++++++++++ .../vue_pipelines_index/status_data_icons.js.es6 | 56 ++++++ .../javascripts/vue_pipelines_index/store.js.es6 | 15 ++ .../vue_pipelines_index/vue_commit_link.vue.js.es6 | 50 ++++++ app/assets/javascripts/vue_pipelines_loader.js.es6 | 1 + 9 files changed, 327 insertions(+), 260 deletions(-) delete mode 100644 app/assets/javascripts/pipelines.vue.js.es6 delete mode 100644 app/assets/javascripts/runnerstats/index.js.es6 delete mode 100644 app/assets/javascripts/status_svg.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/index.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/store.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_loader.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/pipelines.vue.js.es6 b/app/assets/javascripts/pipelines.vue.js.es6 deleted file mode 100644 index 1bd30feaf9e..00000000000 --- a/app/assets/javascripts/pipelines.vue.js.es6 +++ /dev/null @@ -1,186 +0,0 @@ -//= require vue -//= require_tree ./runnerstats -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePipeLines = Vue.extend({ - data() { - return { - runnerStats: new gl.RunnerStats(), - }; - }, - props: ['pipelines', 'count'], - template: ` - - - Status - Pipeline - Commit - Stages - - - - - - - - - - - - - - - - #{{pipeline.id}} - by - {{pipeline.user}} - - -
- -
- master -
- - - -
- 29141ed3 -

- - fix broken repo 500 errors in UI and added relevant specs -

- - -
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
- - - - -
-
-
- - - - - - - -
-
- - - - - -
-
-
- - - -
-
- - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/runnerstats/index.js.es6 b/app/assets/javascripts/runnerstats/index.js.es6 deleted file mode 100644 index 35f95f3a811..00000000000 --- a/app/assets/javascripts/runnerstats/index.js.es6 +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.RunnerStats = class { - constructor() { - return { - running: { - text: 'pending', - color: '#E75E40', - pathOne: 'M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z', - pathTwo: 'M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z', - }, - passed: ` - - - - - - - - passed - `, - failed: ` - - - - - - -  failed - `, - created: ` -  created - `, - skipped: ` - - - - - - -  skipped - `, - pending: ` - - - - - - -  pending - `, - }; - } - }; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/status_svg.vue.js.es6 b/app/assets/javascripts/status_svg.vue.js.es6 deleted file mode 100644 index 0af35ba6f3a..00000000000 --- a/app/assets/javascripts/status_svg.vue.js.es6 +++ /dev/null @@ -1,18 +0,0 @@ -//= require vue -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunnerStatus = Vue.extend({ - props: ['status'], - template: ` - - - - - - -  {{status.text}} - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 new file mode 100644 index 00000000000..3657d9c5b0d --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -0,0 +1,7 @@ +//= require vue +//= require vue-resource + +//= require ./store.js.es6 +//= require ./status_data_icons.js.es6 +//= require ./vue_commit_link.vue.js.es6 +//= require ./pipelines.vue.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 new file mode 100644 index 00000000000..424b29ae527 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -0,0 +1,198 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePipeLines = Vue.extend({ + data() { + return { + endpoint: `/api/v3/projects/${this.scopeId}/pipelines`, + pipelines: [], + runnerStats: new gl.RunnerStats(), + }; + }, + props: ['scope', 'store'], + created() { + this.store.fetchData.call(this, Vue); + }, + methods: { + shortSha(pipeline) { + return pipeline.sha.slice(0, 8); + }, + }, + template: ` + + + Status + Pipeline + Commit + Stages + + + + + + + + +
+ + running + +
+
+ + passed + +
+ + + + #{{pipeline.id}} + by + {{pipeline.user}} + + +
+ +
+ master +
+ + + +
+ {{shortSha(pipeline)}} +

+ + fix broken repo 500 errors in UI and added relevant specs +

+ + +
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+ + + + +
+
+
+ + + + + + + +
+
+ + + + + +
+
+
+ + + +
+
+ + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 b/app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 new file mode 100644 index 00000000000..b4e0c07a665 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 @@ -0,0 +1,56 @@ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.RunnerStats = class { + constructor() { + return { + running: { + text: 'running', + color: '#E75E40', + pathOne: 'M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z', + pathTwo: 'M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z', + }, + passed: ` + + + + + + + + passed + `, + failed: ` + + + + + + +  failed + `, + created: ` +  created + `, + skipped: ` + + + + + + +  skipped + `, + pending: ` + + + + + + +  pending + `, + }; + } + }; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 new file mode 100644 index 00000000000..3f03bb31068 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -0,0 +1,15 @@ +/* global gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.PipelineStore = class { + fetchData(Vue) { + this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) + .then((response) => { + Vue.set(this, 'pipelines', JSON.parse(response.body)); + }, () => { + Vue.set(this, 'pipelines', []); + }); + } + }; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 new file mode 100644 index 00000000000..9e2ef8993a2 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 @@ -0,0 +1,50 @@ + +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueCommitLink = Vue.extend({ + props: ['pipeline'], + template: ` + + +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_loader.js.es6 b/app/assets/javascripts/vue_pipelines_loader.js.es6 new file mode 100644 index 00000000000..1b8ba72b697 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_loader.js.es6 @@ -0,0 +1 @@ +//= require_tree ./vue_pipelines_index -- cgit v1.2.1 From 8658c9788370f1d7ab63270e3dcac423c27d38c5 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 01:31:59 -0600 Subject: remove uneeded endpoint data key --- app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 424b29ae527..2847fa024d9 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -5,7 +5,6 @@ gl.VuePipeLines = Vue.extend({ data() { return { - endpoint: `/api/v3/projects/${this.scopeId}/pipelines`, pipelines: [], runnerStats: new gl.RunnerStats(), }; -- cgit v1.2.1 From 308e0eb554cbd271cbcbc13e8f795ae08c2af62c Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 01:45:55 -0600 Subject: have polling working --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 3f03bb31068..aca603cf756 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -4,12 +4,17 @@ ((gl) => { gl.PipelineStore = class { fetchData(Vue) { - this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) - .then((response) => { - Vue.set(this, 'pipelines', JSON.parse(response.body)); + const goFetch = vue => + this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) + .then((response) => { + vue.set(this, 'pipelines', JSON.parse(response.body)); }, () => { - Vue.set(this, 'pipelines', []); + vue.set(this, 'pipelines', []); }); + + goFetch(Vue); + + setInterval(() => { console.log('DID IT'); goFetch(Vue) }, 3000); } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From b4d8cb0cf031d6817952709ab90d27d9f23c04a5 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 01:48:26 -0600 Subject: changed fetchData to fetchDataLoop - ensured '#created' is part of Vue1 and Vue2 --- app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 2847fa024d9..8036febd593 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -11,7 +11,7 @@ }, props: ['scope', 'store'], created() { - this.store.fetchData.call(this, Vue); + this.store.fetchDataLoop.call(this, Vue); }, methods: { shortSha(pipeline) { diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index aca603cf756..6abd160f9a4 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -3,7 +3,7 @@ ((gl) => { gl.PipelineStore = class { - fetchData(Vue) { + fetchDataLoop(Vue) { const goFetch = vue => this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) .then((response) => { -- cgit v1.2.1 From ae90118e1dfaaf6db890b4bfa00bc45cf287fa21 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 01:50:11 -0600 Subject: formatting - eslint --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 6abd160f9a4..7479caf107d 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -14,7 +14,10 @@ goFetch(Vue); - setInterval(() => { console.log('DID IT'); goFetch(Vue) }, 3000); + setInterval(() => { + console.log('DID IT'); + goFetch(Vue); + }, 3000); } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 384ea58f72d73c858769b22c81e5345e9e3e09bc Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 14:46:31 -0600 Subject: change to more component like structure for reusable components --- .../javascripts/vue_pipelines_index/index.js.es6 | 3 +- .../vue_pipelines_index/pipelines.vue.js.es6 | 31 ++++++-------- .../vue_pipelines_index/running.vue.js.es6 | 25 +++++++++++ .../vue_pipelines_index/running_icon.vue.js.es6 | 13 ++++++ .../javascripts/vue_pipelines_index/store.js.es6 | 1 - .../vue_pipelines_index/vue_commit_link.vue.js.es6 | 50 ---------------------- 6 files changed, 54 insertions(+), 69 deletions(-) create mode 100644 app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 3657d9c5b0d..36661553444 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -2,6 +2,7 @@ //= require vue-resource //= require ./store.js.es6 +//= require ./running_icon.vue.js.es6 +//= require ./running.vue.js.es6 //= require ./status_data_icons.js.es6 -//= require ./vue_commit_link.vue.js.es6 //= require ./pipelines.vue.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 8036febd593..ba6ef3011ab 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -3,13 +3,19 @@ ((gl) => { gl.VuePipeLines = Vue.extend({ + components: { + 'vue-running-pipeline': gl.VueRunningPipeline, + }, data() { return { pipelines: [], runnerStats: new gl.RunnerStats(), }; }, - props: ['scope', 'store'], + props: [ + 'scope', + 'store', + ], created() { this.store.fetchDataLoop.call(this, Vue); }, @@ -31,24 +37,15 @@ - - -
- - running - -
-
- - passed - -
- + + - #{{pipeline.id}} - by - {{pipeline.user}} + + #{{pipeline.id}} + + by + {{pipeline.user}}
diff --git a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 new file mode 100644 index 00000000000..5edf8403bd9 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 @@ -0,0 +1,25 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningPipeline = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipe', + ], + template: ` + + + + + + +  running + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 new file mode 100644 index 00000000000..c37f213525c --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 @@ -0,0 +1,13 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningIcon = Vue.extend({ + template: ` + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 7479caf107d..38797f85f0a 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -13,7 +13,6 @@ }); goFetch(Vue); - setInterval(() => { console.log('DID IT'); goFetch(Vue); diff --git a/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 deleted file mode 100644 index 9e2ef8993a2..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 +++ /dev/null @@ -1,50 +0,0 @@ - -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueCommitLink = Vue.extend({ - props: ['pipeline'], - template: ` - - -
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
- - - `, - }); -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From c373706f2f188672ba24b2a545b6a50e374dd316 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 15:16:42 -0600 Subject: remove singleton in favor of components --- .../vue_pipelines_index/status_data_icons.js.es6 | 56 ---------------------- 1 file changed, 56 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 b/app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 deleted file mode 100644 index b4e0c07a665..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6 +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.RunnerStats = class { - constructor() { - return { - running: { - text: 'running', - color: '#E75E40', - pathOne: 'M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z', - pathTwo: 'M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z', - }, - passed: ` - - - - - - - - passed - `, - failed: ` - - - - - - -  failed - `, - created: ` -  created - `, - skipped: ` - - - - - - -  skipped - `, - pending: ` - - - - - - -  pending - `, - }; - } - }; -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 23b9a99fccd956a3bdc5adbd299b277fdd727d9b Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 15:23:13 -0600 Subject: will discuss what to do on error at a later time --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 38797f85f0a..f1cd991994d 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -9,7 +9,7 @@ .then((response) => { vue.set(this, 'pipelines', JSON.parse(response.body)); }, () => { - vue.set(this, 'pipelines', []); + console.error('API Error for Pipelines'); }); goFetch(Vue); -- cgit v1.2.1 From 1439b9b8d688e5650be565bd6ffe890ba4393c82 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 22:11:57 -0600 Subject: can grab commits prior to pipelines - might need more custom API --- .../javascripts/vue_pipelines_index/index.js.es6 | 1 - .../vue_pipelines_index/pipelines.vue.js.es6 | 27 ++++++++++++++++++---- .../javascripts/vue_pipelines_index/store.js.es6 | 21 +++++++++++++++-- 3 files changed, 42 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 36661553444..fcf91107da5 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -4,5 +4,4 @@ //= require ./store.js.es6 //= require ./running_icon.vue.js.es6 //= require ./running.vue.js.es6 -//= require ./status_data_icons.js.es6 //= require ./pipelines.vue.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index ba6ef3011ab..1ff7b117223 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -9,7 +9,7 @@ data() { return { pipelines: [], - runnerStats: new gl.RunnerStats(), + commits: [], }; }, props: [ @@ -17,6 +17,7 @@ 'store', ], created() { + this.store.fetchCommits.call(this, Vue); this.store.fetchDataLoop.call(this, Vue); }, methods: { @@ -57,10 +58,28 @@
- {{shortSha(pipeline)}} + {{shortSha(pipeline)}} +

- - fix broken repo 500 errors in UI and added relevant specs + + + + + fix broken repo 500 errors in UI and added relevant specs +

diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index f1cd991994d..f9e802714df 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -12,11 +12,28 @@ console.error('API Error for Pipelines'); }); - goFetch(Vue); setInterval(() => { console.log('DID IT'); goFetch(Vue); - }, 3000); + }, 30000); + } + + fetchCommits(vue) { + const goFetch = vueSet => + this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) + .then((response) => { + vueSet.set(this, 'pipelines', JSON.parse(response.body)); + }, () => { + console.error('API Error for Pipelines'); + }); + + this.$http.get(`/api/v3/projects/${this.scope}/repository/commits`) + .then((response) => { + vue.set(this, 'commits', JSON.parse(response.body)); + }, () => { + console.error('API Error for Pipelines'); + }) + .then(() => goFetch(vue)); } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 2caf62d1a22d39f312c7306c408e40120ec362db Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 30 Oct 2016 22:22:08 -0600 Subject: refactor --- .../javascripts/vue_pipelines_index/store.js.es6 | 28 ++++++++-------------- 1 file changed, 10 insertions(+), 18 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index f9e802714df..046ec342478 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,38 +2,30 @@ /* eslint-disable no-param-reassign */ ((gl) => { + const goFetch = (that, vue) => + that.$http.get(`/api/v3/projects/${that.scope}/pipelines`) + .then((response) => { + vue.set(that, 'pipelines', JSON.parse(response.body)); + }, () => { + console.error('API Error for Pipelines'); + }); + gl.PipelineStore = class { fetchDataLoop(Vue) { - const goFetch = vue => - this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) - .then((response) => { - vue.set(this, 'pipelines', JSON.parse(response.body)); - }, () => { - console.error('API Error for Pipelines'); - }); - setInterval(() => { console.log('DID IT'); - goFetch(Vue); + goFetch(this, Vue); }, 30000); } fetchCommits(vue) { - const goFetch = vueSet => - this.$http.get(`/api/v3/projects/${this.scope}/pipelines`) - .then((response) => { - vueSet.set(this, 'pipelines', JSON.parse(response.body)); - }, () => { - console.error('API Error for Pipelines'); - }); - this.$http.get(`/api/v3/projects/${this.scope}/repository/commits`) .then((response) => { vue.set(this, 'commits', JSON.parse(response.body)); }, () => { console.error('API Error for Pipelines'); }) - .then(() => goFetch(vue)); + .then(() => goFetch(this, vue)); } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From cbd1303bec800dbacf2769ffb4f7ec63f4035eaf Mon Sep 17 00:00:00 2001 From: selfup Date: Mon, 31 Oct 2016 00:55:10 -0600 Subject: relative sha paths for commits --- app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 1ff7b117223..7bfd49344ca 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -60,7 +60,7 @@ {{shortSha(pipeline)}} + href="./commit/{{pipeline.sha}}">{{shortSha(pipeline)}}

fix broken repo 500 errors in UI and added relevant specs -- cgit v1.2.1 From c32c77a095a4fb5cebb6db47fa031e1f8752031e Mon Sep 17 00:00:00 2001 From: selfup Date: Mon, 31 Oct 2016 01:15:29 -0600 Subject: pagination exists - will become dynamic soon --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 046ec342478..6a909f74e53 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -3,7 +3,7 @@ ((gl) => { const goFetch = (that, vue) => - that.$http.get(`/api/v3/projects/${that.scope}/pipelines`) + that.$http.get(`/api/v3/projects/${that.scope}/pipelines?per_page=5&page=1`) .then((response) => { vue.set(that, 'pipelines', JSON.parse(response.body)); }, () => { @@ -19,7 +19,7 @@ } fetchCommits(vue) { - this.$http.get(`/api/v3/projects/${this.scope}/repository/commits`) + this.$http.get(`/api/v3/projects/${this.scope}/repository/commits?per_page=5&page=1`) .then((response) => { vue.set(this, 'commits', JSON.parse(response.body)); }, () => { -- cgit v1.2.1 From a42140d08fea03acf406c64db5de67beee4b8107 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 31 Oct 2016 13:02:34 -0600 Subject: page specific js - remove inline js - refactor --- .../javascripts/vue_pipelines_index/index.js.es6 | 23 ++++++++++++++++++++++ .../vue_pipelines_index/pipelines.vue.js.es6 | 8 ++++++++ .../javascripts/vue_pipelines_index/store.js.es6 | 13 +++++++++--- app/assets/javascripts/vue_pipelines_loader.js.es6 | 1 - 4 files changed, 41 insertions(+), 4 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelines_loader.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index fcf91107da5..4b69c4d4c7d 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -1,3 +1,5 @@ +/* global Vue, VueResource, gl */ + //= require vue //= require vue-resource @@ -5,3 +7,24 @@ //= require ./running_icon.vue.js.es6 //= require ./running.vue.js.es6 //= require ./pipelines.vue.js.es6 + +(() => { + const project = document.querySelector('.table-holder'); + + Vue.use(VueResource); + + new Vue({ + el: '.vue-pipelines-index', + data: { + scope: project.dataset.projectId, + store: new gl.PipelineStore(), + }, + components: { + 'vue-pipelines': gl.VuePipeLines, + }, + template: '' + + '

' + + "" + + '
', + }); +})(); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 7bfd49344ca..021a5ca8743 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -10,6 +10,8 @@ return { pipelines: [], commits: [], + currentPage: '', + intervalId: '', }; }, props: [ @@ -24,6 +26,11 @@ shortSha(pipeline) { return pipeline.sha.slice(0, 8); }, + changePage() { + // clearInterval(this.intervalId); + // this.store.fetchCommits.call(this, Vue); + // this.store.fetchDataLoop.call(this, Vue); + }, }, template: ` @@ -52,6 +59,7 @@
+ master
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 6a909f74e53..bdba9575013 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,8 +2,12 @@ /* eslint-disable no-param-reassign */ ((gl) => { + const api = '/api/v3/projects'; + const goFetch = (that, vue) => - that.$http.get(`/api/v3/projects/${that.scope}/pipelines?per_page=5&page=1`) + that.$http.get( + `${api}/${that.scope}/pipelines?per_page=5&page=1` + ) .then((response) => { vue.set(that, 'pipelines', JSON.parse(response.body)); }, () => { @@ -12,14 +16,17 @@ gl.PipelineStore = class { fetchDataLoop(Vue) { - setInterval(() => { + // eventually clearInterval(this.intervalId) + this.intervalId = setInterval(() => { console.log('DID IT'); goFetch(this, Vue); }, 30000); } fetchCommits(vue) { - this.$http.get(`/api/v3/projects/${this.scope}/repository/commits?per_page=5&page=1`) + this.$http.get( + `${api}/${this.scope}/repository/commits?per_page=5&page=1` + ) .then((response) => { vue.set(this, 'commits', JSON.parse(response.body)); }, () => { diff --git a/app/assets/javascripts/vue_pipelines_loader.js.es6 b/app/assets/javascripts/vue_pipelines_loader.js.es6 deleted file mode 100644 index 1b8ba72b697..00000000000 --- a/app/assets/javascripts/vue_pipelines_loader.js.es6 +++ /dev/null @@ -1 +0,0 @@ -//= require_tree ./vue_pipelines_index -- cgit v1.2.1 From 87d4d235683f5a40acec6c73116f1217caece5c2 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 31 Oct 2016 15:06:25 -0600 Subject: remove commit endpoint callprep for backend api to be updated or new endpoint to be built --- .../vue_pipelines_index/pipelines.vue.js.es6 | 2 -- .../javascripts/vue_pipelines_index/store.js.es6 | 36 ++++++++-------------- 2 files changed, 13 insertions(+), 25 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 021a5ca8743..c1a2ac3292e 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -9,7 +9,6 @@ data() { return { pipelines: [], - commits: [], currentPage: '', intervalId: '', }; @@ -19,7 +18,6 @@ 'store', ], created() { - this.store.fetchCommits.call(this, Vue); this.store.fetchDataLoop.call(this, Vue); }, methods: { diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index bdba9575013..06282744d8b 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -4,35 +4,25 @@ ((gl) => { const api = '/api/v3/projects'; - const goFetch = (that, vue) => - that.$http.get( - `${api}/${that.scope}/pipelines?per_page=5&page=1` - ) - .then((response) => { - vue.set(that, 'pipelines', JSON.parse(response.body)); - }, () => { - console.error('API Error for Pipelines'); - }); - gl.PipelineStore = class { fetchDataLoop(Vue) { + const goFetch = () => + this.$http.get( + `${api}/${this.scope}/pipelines?per_page=5&page=1` + ) + .then((response) => { + Vue.set(this, 'pipelines', JSON.parse(response.body)); + }, () => { + console.error('API Error for Pipelines'); + }); + + goFetch(); + // eventually clearInterval(this.intervalId) this.intervalId = setInterval(() => { console.log('DID IT'); - goFetch(this, Vue); + goFetch(); }, 30000); } - - fetchCommits(vue) { - this.$http.get( - `${api}/${this.scope}/repository/commits?per_page=5&page=1` - ) - .then((response) => { - vue.set(this, 'commits', JSON.parse(response.body)); - }, () => { - console.error('API Error for Pipelines'); - }) - .then(() => goFetch(this, vue)); - } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 257146032e1340701772097cfe7e4b29b7b56c97 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 31 Oct 2016 15:51:24 -0600 Subject: begin pagination logic - add Flash to error - refactor --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 2 +- .../javascripts/vue_pipelines_index/pipelines.vue.js.es6 | 9 ++++++--- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 16 ++++++---------- 3 files changed, 13 insertions(+), 14 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 4b69c4d4c7d..015716b0540 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -13,7 +13,7 @@ Vue.use(VueResource); - new Vue({ + return new Vue({ el: '.vue-pipelines-index', data: { scope: project.dataset.projectId, diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index c1a2ac3292e..a209b9d0532 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -11,6 +11,7 @@ pipelines: [], currentPage: '', intervalId: '', + pageNum: 'page=1', }; }, props: [ @@ -18,7 +19,10 @@ 'store', ], created() { - this.store.fetchDataLoop.call(this, Vue); + const url = window.location.href; + if (url.includes('?')) this.pageNum = url.split('?')[1]; + // now fetch page appropriate data + this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, methods: { shortSha(pipeline) { @@ -26,8 +30,7 @@ }, changePage() { // clearInterval(this.intervalId); - // this.store.fetchCommits.call(this, Vue); - // this.store.fetchDataLoop.call(this, Vue); + // this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, }, template: ` diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 06282744d8b..17f530a8ca2 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -1,28 +1,24 @@ -/* global gl */ +/* global gl, Flash */ /* eslint-disable no-param-reassign */ ((gl) => { const api = '/api/v3/projects'; gl.PipelineStore = class { - fetchDataLoop(Vue) { + fetchDataLoop(Vue, pageNum) { const goFetch = () => - this.$http.get( - `${api}/${this.scope}/pipelines?per_page=5&page=1` - ) + this.$http.get(`${api}/${this.scope}/pipelines?per_page=30&${pageNum}`) .then((response) => { Vue.set(this, 'pipelines', JSON.parse(response.body)); - }, () => { - console.error('API Error for Pipelines'); - }); + }, () => new Flash('Something went wrong on our end.')); + // inital fetch and then start timeout loop goFetch(); // eventually clearInterval(this.intervalId) this.intervalId = setInterval(() => { - console.log('DID IT'); goFetch(); - }, 30000); + }, 60000); } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From c2d6969c97bf4c524c58722c2c5f0e4dba139e45 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 31 Oct 2016 16:10:50 -0600 Subject: formatting --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 17f530a8ca2..789e8e791b6 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -10,7 +10,9 @@ this.$http.get(`${api}/${this.scope}/pipelines?per_page=30&${pageNum}`) .then((response) => { Vue.set(this, 'pipelines', JSON.parse(response.body)); - }, () => new Flash('Something went wrong on our end.')); + }, () => new Flash( + 'Something went wrong on our end.' + )); // inital fetch and then start timeout loop goFetch(); -- cgit v1.2.1 From ae4eacadf35fec8db8d7c316dcc8fe8d0f57535b Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 31 Oct 2016 16:45:25 -0600 Subject: fix styling by removing main div --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 015716b0540..35f78656856 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -22,9 +22,8 @@ components: { 'vue-pipelines': gl.VuePipeLines, }, - template: '' - + '
' - + "" - + '
', + template: ` + + `, }); })(); -- cgit v1.2.1 From c659ffcbc52c433879c4108276175f28f1105e6f Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 31 Oct 2016 17:17:29 -0600 Subject: breaking more HTML out of template --- .../javascripts/vue_pipelines_index/index.js.es6 | 4 +- .../vue_pipelines_index/pipelines.vue.js.es6 | 167 ++++++--------------- .../vue_pipelines_index/stages.vue.js.es6 | 83 ++++++++++ 3 files changed, 134 insertions(+), 120 deletions(-) create mode 100644 app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 35f78656856..c7a5204c7d6 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -6,15 +6,17 @@ //= require ./store.js.es6 //= require ./running_icon.vue.js.es6 //= require ./running.vue.js.es6 +//= require ./stages.vue.js.es6 //= require ./pipelines.vue.js.es6 (() => { const project = document.querySelector('.table-holder'); Vue.use(VueResource); + // Vue.config.silent = true; return new Vue({ - el: '.vue-pipelines-index', + el: '#vue-pipelines-index', data: { scope: project.dataset.projectId, store: new gl.PipelineStore(), diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index a209b9d0532..34b8ceecd29 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -5,6 +5,7 @@ gl.VuePipeLines = Vue.extend({ components: { 'vue-running-pipeline': gl.VueRunningPipeline, + 'vue-stages': gl.VueStages, }, data() { return { @@ -92,128 +93,56 @@

-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
- - + + -
-
-
- - - - - - - -
-
- - - - - -
-
-
- - +
+
+
+ + + + + -
-
+ +
+
+ + + + + +
+
+
+ + + +
+
diff --git a/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 new file mode 100644 index 00000000000..0baf90dcf60 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 @@ -0,0 +1,83 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueStages = Vue.extend({ + template: ` +
+ + + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + + +
+ `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 13f11b470e0b94da082099ca32f8850dbce01b19 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 1 Nov 2016 10:38:17 -0600 Subject: add comments on data needed from API to help extract into components --- .../vue_pipelines_index/pipelines.vue.js.es6 | 43 +++++++++++++++++++--- 1 file changed, 38 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 34b8ceecd29..6d6c866c449 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -61,8 +61,10 @@
- - master + + master
@@ -76,6 +78,12 @@ + + fix broken repo 500 errors in UI and added relevant specs

+ @@ -108,7 +135,10 @@
- - - - - - - -
+ + + + + + + + +
- - - - - - - -
+ + + + + + + + +
- - - - - - - -
+ + + + + + + + +
- - - - - - - -
+ + + + + + + + +
- - - - - - - -
+ + + + + + + + +
- - - - - - - - + + + + + + + +
`, }); -- cgit v1.2.1 From 5ba83d961a7cf8bebea9f9e9814354be769041e9 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 1 Nov 2016 18:48:45 -0600 Subject: extracted Commit Column to vue component --- .../vue_pipelines_index/branch_commit.vue.js.es6 | 54 ++++++++++++++++++++++ .../javascripts/vue_pipelines_index/index.js.es6 | 1 + .../vue_pipelines_index/pipelines.vue.js.es6 | 52 +++------------------ 3 files changed, 62 insertions(+), 45 deletions(-) create mode 100644 app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 new file mode 100644 index 00000000000..46cbf706d97 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 @@ -0,0 +1,54 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueBranchCommit = Vue.extend({ + props: ['pipeline', 'shortsha'], + template: ` +
+ +
+ + master +
+ + + +
+ {{shortsha(pipeline)}} + +

+ + + + + + + fix broken repo 500 errors in UI and added relevant specs + +

+ `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 4450fde4103..14a4a5d9b1d 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -8,6 +8,7 @@ //= require ./running.vue.js.es6 //= require ./stages.vue.js.es6 //= require ./pipeline_actions.vue.js.es6 +//= require ./branch_commit.vue.js.es6 //= require ./pipelines.vue.js.es6 (() => { diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 16da8b8f423..0b1c2c33ca0 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -7,6 +7,7 @@ 'vue-running-pipeline': gl.VueRunningPipeline, 'vue-stages': gl.VueStages, 'vue-pipeline-actions': gl.VuePipelineActions, + 'vue-branch-commit': gl.VueBranchCommit, }, data() { return { @@ -27,7 +28,7 @@ this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, methods: { - shortSha(pipeline) { + shortsha(pipeline) { return pipeline.sha.slice(0, 8); }, changePage() { @@ -61,50 +62,11 @@ {{pipeline.user}} -
- -
- - master -
- - - -
- {{shortSha(pipeline)}} - -

- - - - - - - fix broken repo 500 errors in UI and added relevant specs - -

+ + + master +
+ + +
- - master -
- - - -
- {{shortsha(pipeline)}} - -

- - - - - - fix broken repo 500 errors in UI and added relevant specs + {{shortsha(pipeline)}} -

+

+ + + + + + + fix broken repo 500 errors in UI and added relevant specs + +

+ `, }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 14a4a5d9b1d..b8bcfdb30c3 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -4,6 +4,8 @@ //= require vue-resource //= require ./store.js.es6 +//= require ./pipeline_url.vue.js.es6 +//= require ./pipeline_head.vue.js.es6 //= require ./running_icon.vue.js.es6 //= require ./running.vue.js.es6 //= require ./stages.vue.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 index aa1069cff9f..a6ff2f10ccf 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 @@ -5,6 +5,7 @@ gl.VuePipelineActions = Vue.extend({ // props: ['builds'], template: ` +
@@ -71,6 +72,7 @@
+ `, }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 new file mode 100644 index 00000000000..2ead571aa9f --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 @@ -0,0 +1,26 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePipelineHead = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + Status + Pipeline + Commit + Stages + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 new file mode 100644 index 00000000000..148fe58d9ce --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 @@ -0,0 +1,23 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePipelineUrl = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + #{{pipeline.id}} + + by + {{pipeline.user}} + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index bdb52b21b20..86c18ace09e 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -1,5 +1,5 @@ /* global Vue, gl */ -/* eslint-disable no-param-reassign */ +/* eslint-disable no-param-reassign, no-bitwise*/ ((gl) => { gl.VuePipeLines = Vue.extend({ @@ -8,6 +8,8 @@ 'vue-stages': gl.VueStages, 'vue-pipeline-actions': gl.VuePipelineActions, 'vue-branch-commit': gl.VueBranchCommit, + 'vue-pipeline-url': gl.VuePipelineUrl, + 'vue-pipeline-head': gl.VuePipelineHead, }, data() { return { @@ -22,11 +24,8 @@ 'store', ], created() { - // ** `.includes` does not work in PhantomJS ** - - // const url = window.location.toString(); - // if (url.includes('?')) this.pageNum = url.split('?')[1]; - // now fetch page appropriate data + const url = window.location.toString(); + if (~url.indexOf('?')) this.pageNum = url.split('?')[1]; this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, methods: { @@ -37,66 +36,36 @@ // clearInterval(this.intervalId); // this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, + pipelineurl(id) { + return `pipelines/${id}`; + }, }, template: `
- - - - - - - - - - - - - - - + + - + + + + + - +
StatusPipelineCommitStages
- - - - #{{pipeline.id}} - - by - {{pipeline.user}} - - +
+ - - - - +
diff --git a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 index 5edf8403bd9..8d18f5f3aa3 100644 --- a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 @@ -7,11 +7,12 @@ 'vue-running-icon': gl.VueRunningIcon, }, props: [ - 'pipe', + 'pipeline', + 'pipelineurl', ], template: ` - + diff --git a/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 index 400eb0e4d3f..da8c9280486 100644 --- a/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 @@ -4,86 +4,107 @@ ((gl) => { gl.VueStages = Vue.extend({ template: ` -
- - - - - - - - -
-
- - - - - - - - -
-
- - - - - - - - -
-
- - - - - - - - -
-
- - - - - - - - -
-
- - - - - - - - -
-
- - - - - - - - -
-
- - - - - - - - -
+ + +
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+ `, }); })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 25e60f879fc21e55902ad5c069a5de0a3e340db7 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 2 Nov 2016 18:54:04 -0600 Subject: basic pagination ^_^ - will make component dynamic soon --- .../javascripts/vue_pipelines_index/index.js.es6 | 1 + .../vue_pipelines_index/pipelines.vue.js.es6 | 71 +++++++++++++--------- .../javascripts/vue_pipelines_index/store.js.es6 | 5 +- .../vue_gl_pagination.vue.js.es6 | 54 ++++++++++++++++ 4 files changed, 99 insertions(+), 32 deletions(-) create mode 100644 app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index b8bcfdb30c3..6ecbc1ba8ff 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -5,6 +5,7 @@ //= require ./store.js.es6 //= require ./pipeline_url.vue.js.es6 +//= require ./vue_gl_pagination.vue.js.es6 //= require ./pipeline_head.vue.js.es6 //= require ./running_icon.vue.js.es6 //= require ./running.vue.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 86c18ace09e..4706ea61c8e 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -10,13 +10,14 @@ 'vue-branch-commit': gl.VueBranchCommit, 'vue-pipeline-url': gl.VuePipelineUrl, 'vue-pipeline-head': gl.VuePipelineHead, + 'vue-gl-pagination': gl.VueGlPagination, }, data() { return { pipelines: [], currentPage: '', intervalId: '', - pageNum: 'page=1', + pageNum: 1, }; }, props: [ @@ -25,50 +26,60 @@ ], created() { const url = window.location.toString(); - if (~url.indexOf('?')) this.pageNum = url.split('?')[1]; + if (~url.indexOf('?')) this.pageNum = url.split('?')[1].split('=')[1]; this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, methods: { shortsha(pipeline) { return pipeline.sha.slice(0, 8); }, - changePage() { - // clearInterval(this.intervalId); - // this.store.fetchDataLoop.call(this, Vue, this.pageNum); + changepage(event) { + this.pageNum = +event.target.innerText; + // use p instead of page to avoid rails tyring to make an actual request + window.history.pushState({}, null, `?p=${this.pageNum}`); + clearInterval(this.intervalId); + this.store.fetchDataLoop.call(this, Vue, this.pageNum); }, pipelineurl(id) { return `pipelines/${id}`; }, }, template: ` -
- - - - - + + + +
- +
+ + + + + + - - - - - - - - - - - -
+ + +
+ + + + +
+
+ +
`, }); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 66cb989030a..bf5fba45194 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -3,11 +3,12 @@ ((gl) => { const api = '/api/v3/projects'; + const paginate = '?per_page=5&page='; gl.PipelineStore = class { fetchDataLoop(Vue, pageNum) { const goFetch = () => - this.$http.get(`${api}/${this.scope}/pipelines?per_page=30&${pageNum}`) + this.$http.get(`${api}/${this.scope}/pipelines${paginate}${pageNum}`) .then((response) => { Vue.set(this, 'pipelines', JSON.parse(response.body)); }, () => new Flash( @@ -20,7 +21,7 @@ // eventually clearInterval(this.intervalId) this.intervalId = setInterval(() => { goFetch(); - }, 3000); + }, 30000); } }; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 new file mode 100644 index 00000000000..29d4a4df511 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 @@ -0,0 +1,54 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueGlPagination = Vue.extend({ + props: [ + 'changepage', + 'pages', + ], + template: ` +
+ +
+ `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From c249fb2ee9b522d02f49eee9734a1d6665d01e14 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 2 Nov 2016 22:14:46 -0600 Subject: formatting --- app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 index 8d18f5f3aa3..e363cb3c14e 100644 --- a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 @@ -14,7 +14,12 @@ - +  running -- cgit v1.2.1 From 77b0d6058ead2f42200c8a69dcd0e31561deae9e Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 2 Nov 2016 22:41:51 -0600 Subject: count passing through - last page known --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 9 +++++++-- app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 | 2 ++ .../javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 | 9 ++++++++- 3 files changed, 17 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 6ecbc1ba8ff..4e335ca1d13 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -18,12 +18,12 @@ const project = document.querySelector('.pipelines'); Vue.use(VueResource); - // Vue.config.silent = true; return new Vue({ el: '.vue-pipelines-index', data: { scope: project.dataset.projectId, + count: project.dataset.count, store: new gl.PipelineStore(), }, components: { @@ -31,7 +31,12 @@ }, template: `
- + +
`, }); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 4706ea61c8e..2f3bdc7a2a9 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -23,6 +23,7 @@ props: [ 'scope', 'store', + 'count', ], created() { const url = window.location.toString(); @@ -78,6 +79,7 @@
diff --git a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 index 29d4a4df511..977d0e2b240 100644 --- a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 @@ -6,7 +6,14 @@ props: [ 'changepage', 'pages', + 'count', ], + computed: { + lastpage() { + const lastPage = Math.ceil(+this.count / 5); + return `pipelines?page=${lastPage}`; + }, + }, template: `
-- cgit v1.2.1 From 64e8ab95be436ccd22e087f39774b93ce6e4eeba Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 3 Nov 2016 11:20:15 -0600 Subject: pagination logic almost complete - active and inactive elements next - page gap not working --- .../vue_pipelines_index/pipelines.vue.js.es6 | 13 ++-- .../vue_gl_pagination.vue.js.es6 | 74 ++++++++++++---------- 2 files changed, 47 insertions(+), 40 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 index 2f3bdc7a2a9..77923e68004 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 @@ -17,7 +17,7 @@ pipelines: [], currentPage: '', intervalId: '', - pageNum: 1, + pagenum: 1, }; }, props: [ @@ -27,19 +27,19 @@ ], created() { const url = window.location.toString(); - if (~url.indexOf('?')) this.pageNum = url.split('?')[1].split('=')[1]; - this.store.fetchDataLoop.call(this, Vue, this.pageNum); + if (~url.indexOf('?')) this.pagenum = url.split('?')[1].split('=')[1]; + this.store.fetchDataLoop.call(this, Vue, this.pagenum); }, methods: { shortsha(pipeline) { return pipeline.sha.slice(0, 8); }, changepage(event) { - this.pageNum = +event.target.innerText; + this.pagenum = +event.target.innerText; // use p instead of page to avoid rails tyring to make an actual request - window.history.pushState({}, null, `?p=${this.pageNum}`); + window.history.pushState({}, null, `?p=${this.pagenum}`); clearInterval(this.intervalId); - this.store.fetchDataLoop.call(this, Vue, this.pageNum); + this.store.fetchDataLoop.call(this, Vue, this.pagenum); }, pipelineurl(id) { return `pipelines/${id}`; @@ -77,6 +77,7 @@ { gl.VueGlPagination = Vue.extend({ + data() { + return { + last: Math.ceil(+this.count / 5), + }; + }, props: [ 'changepage', 'pages', 'count', + 'pagenum', ], + methods: { + pagenumberstatus(n) { + if (n - 1 === +this.pagenum) return 'page active'; + return ''; + }, + }, computed: { lastpage() { - const lastPage = Math.ceil(+this.count / 5); - return `pipelines?page=${lastPage}`; + return `pipelines?p=${this.last}`; + }, + upcount() { + return +this.last + 1; + }, + prev() { + if (this.pagenum === 1) return 1; + return this.pagenum - 1; + }, + next() { + if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`; + return `pipelines?p=${this.pagenum + 1}`; }, }, template: `
-
    -
  • {{(n - 1)}}
    • - +
  • + … +
    • -
  • - Last » +
  • + Last »
-- cgit v1.2.1 From 4d8314ae0f07549b4e77f3aca8a2e3a84f80cb9b Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 3 Nov 2016 11:34:18 -0600 Subject: move last to computed --- .../vue_pipelines_index/vue_gl_pagination.vue.js.es6 | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 index 48efa4bd57e..5f9e47bf3b2 100644 --- a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 @@ -3,11 +3,6 @@ ((gl) => { gl.VueGlPagination = Vue.extend({ - data() { - return { - last: Math.ceil(+this.count / 5), - }; - }, props: [ 'changepage', 'pages', @@ -21,6 +16,9 @@ }, }, computed: { + last() { + return Math.ceil(+this.count / 5) + }, lastpage() { return `pipelines?p=${this.last}`; }, @@ -38,10 +36,7 @@ }, template: `
-
    +
      -- cgit v1.2.1 From ea71e327f17c57e42d86717479a34af160d73d8e Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 3 Nov 2016 11:42:12 -0600 Subject: page gap works --- .../javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 index 5f9e47bf3b2..84b75b469f0 100644 --- a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 @@ -11,7 +11,7 @@ ], methods: { pagenumberstatus(n) { - if (n - 1 === +this.pagenum) return 'page active'; + if (n - 1 === +this.pagenum) return 'active'; return ''; }, }, @@ -43,8 +43,8 @@
    • {{(n - 1)}}
      • -
    • - … +
    • + …
    • {{(n - 1)}}
      • +
    • …
      • diff --git a/app/assets/javascripts/vue_pipelinesindex/store.js.es6 b/app/assets/javascripts/vue_pipelinesindex/store.js.es6 new file mode 100644 index 00000000000..bf5fba45194 --- /dev/null +++ b/app/assets/javascripts/vue_pipelinesindex/store.js.es6 @@ -0,0 +1,27 @@ +/* global gl, Flash */ +/* eslint-disable no-param-reassign */ + +((gl) => { + const api = '/api/v3/projects'; + const paginate = '?per_page=5&page='; + + gl.PipelineStore = class { + fetchDataLoop(Vue, pageNum) { + const goFetch = () => + this.$http.get(`${api}/${this.scope}/pipelines${paginate}${pageNum}`) + .then((response) => { + Vue.set(this, 'pipelines', JSON.parse(response.body)); + }, () => new Flash( + 'Something went wrong on our end.' + )); + + // inital fetch and then start timeout loop + goFetch(); + + // eventually clearInterval(this.intervalId) + this.intervalId = setInterval(() => { + goFetch(); + }, 30000); + } + }; +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 18ff82c6a6949aa4c4b4efa77fc6e08e856eb79a Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 4 Nov 2016 09:56:45 -0600 Subject: remove extra dir when debugging eslint --- .../javascripts/vue_pipelinesindex/store.js.es6 | 27 ---------------------- 1 file changed, 27 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelinesindex/store.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelinesindex/store.js.es6 b/app/assets/javascripts/vue_pipelinesindex/store.js.es6 deleted file mode 100644 index bf5fba45194..00000000000 --- a/app/assets/javascripts/vue_pipelinesindex/store.js.es6 +++ /dev/null @@ -1,27 +0,0 @@ -/* global gl, Flash */ -/* eslint-disable no-param-reassign */ - -((gl) => { - const api = '/api/v3/projects'; - const paginate = '?per_page=5&page='; - - gl.PipelineStore = class { - fetchDataLoop(Vue, pageNum) { - const goFetch = () => - this.$http.get(`${api}/${this.scope}/pipelines${paginate}${pageNum}`) - .then((response) => { - Vue.set(this, 'pipelines', JSON.parse(response.body)); - }, () => new Flash( - 'Something went wrong on our end.' - )); - - // inital fetch and then start timeout loop - goFetch(); - - // eventually clearInterval(this.intervalId) - this.intervalId = setInterval(() => { - goFetch(); - }, 30000); - } - }; -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 45992dc98c027701b8c187ef50ad9afaf6e8e052 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 4 Nov 2016 11:25:50 -0600 Subject: rename files for eslint --- .../vue_pipelines_index/branch_commit.js.es6 | 63 ++++++++++++ .../vue_pipelines_index/branch_commit.vue.js.es6 | 63 ------------ .../vue_pipelines_index/gl_pagination.js.es6 | 64 ++++++++++++ .../vue_pipelines_index/pipeline_actions.js.es6 | 78 +++++++++++++++ .../pipeline_actions.vue.js.es6 | 78 --------------- .../vue_pipelines_index/pipeline_head.js.es6 | 26 +++++ .../vue_pipelines_index/pipeline_head.vue.js.es6 | 26 ----- .../vue_pipelines_index/pipeline_url.js.es6 | 23 +++++ .../vue_pipelines_index/pipeline_url.vue.js.es6 | 23 ----- .../vue_pipelines_index/pipelines.js.es6 | 89 +++++++++++++++++ .../vue_pipelines_index/pipelines.vue.js.es6 | 89 ----------------- .../javascripts/vue_pipelines_index/running.js.es6 | 31 ++++++ .../vue_pipelines_index/running.vue.js.es6 | 31 ------ .../vue_pipelines_index/running_icon.js.es6 | 13 +++ .../vue_pipelines_index/running_icon.vue.js.es6 | 13 --- .../javascripts/vue_pipelines_index/stages.js.es6 | 110 +++++++++++++++++++++ .../vue_pipelines_index/stages.vue.js.es6 | 110 --------------------- .../vue_gl_pagination.vue.js.es6 | 64 ------------ 18 files changed, 497 insertions(+), 497 deletions(-) create mode 100644 app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/running.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/stages.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 new file mode 100644 index 00000000000..ee8b1234697 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 @@ -0,0 +1,63 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueBranchCommit = Vue.extend({ + props: ['pipeline', 'shortsha'], + methods: { + commiturl(sha) { + return `./commit/${sha}`; + }, + }, + template: ` + +
      + +
      + + master +
      + + + +
      + + {{shortsha(pipeline)}} + +

      + + + + + + + fix broken repo 500 errors in UI and added relevant specs + +

      + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 deleted file mode 100644 index ee8b1234697..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/branch_commit.vue.js.es6 +++ /dev/null @@ -1,63 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueBranchCommit = Vue.extend({ - props: ['pipeline', 'shortsha'], - methods: { - commiturl(sha) { - return `./commit/${sha}`; - }, - }, - template: ` - -
      - -
      - - master -
      - - - -
      - - {{shortsha(pipeline)}} - -

      - - - - - - - fix broken repo 500 errors in UI and added relevant specs - -

      - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 b/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 new file mode 100644 index 00000000000..84d908f8e52 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 @@ -0,0 +1,64 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueGlPagination = Vue.extend({ + props: [ + 'changepage', + 'pages', + 'count', + 'pagenum', + ], + methods: { + pagenumberstatus(n) { + if (n - 1 === +this.pagenum) return 'active'; + return ''; + }, + }, + computed: { + last() { + return Math.ceil(+this.count / 5); + }, + lastpage() { + return `pipelines?p=${this.last}`; + }, + upcount() { + return +this.last + 1; + }, + prev() { + if (this.pagenum === 1) return 1; + return this.pagenum - 1; + }, + next() { + if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`; + return `pipelines?p=${this.pagenum + 1}`; + }, + }, + template: ` +
      + +
      + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 new file mode 100644 index 00000000000..a6ff2f10ccf --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -0,0 +1,78 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePipelineActions = Vue.extend({ + // props: ['builds'], + template: ` + +
      +
      +
      + + + + + + + + +
      +
      + + + + + +
      +
      +
      + + + +
      +
      + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 deleted file mode 100644 index a6ff2f10ccf..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.vue.js.es6 +++ /dev/null @@ -1,78 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePipelineActions = Vue.extend({ - // props: ['builds'], - template: ` - -
      -
      -
      - - - - - - - - -
      -
      - - - - - -
      -
      -
      - - - -
      -
      - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 new file mode 100644 index 00000000000..2ead571aa9f --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 @@ -0,0 +1,26 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePipelineHead = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + Status + Pipeline + Commit + Stages + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 deleted file mode 100644 index 2ead571aa9f..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_head.vue.js.es6 +++ /dev/null @@ -1,26 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePipelineHead = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - Status - Pipeline - Commit - Stages - - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 new file mode 100644 index 00000000000..148fe58d9ce --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -0,0 +1,23 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePipelineUrl = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + #{{pipeline.id}} + + by + {{pipeline.user}} + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 deleted file mode 100644 index 148fe58d9ce..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.vue.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePipelineUrl = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - #{{pipeline.id}} - - by - {{pipeline.user}} - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 new file mode 100644 index 00000000000..a1d472cc464 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -0,0 +1,89 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign, no-bitwise*/ + +((gl) => { + gl.VuePipeLines = Vue.extend({ + components: { + 'vue-running-pipeline': gl.VueRunningPipeline, + 'vue-stages': gl.VueStages, + 'vue-pipeline-actions': gl.VuePipelineActions, + 'vue-branch-commit': gl.VueBranchCommit, + 'vue-pipeline-url': gl.VuePipelineUrl, + 'vue-pipeline-head': gl.VuePipelineHead, + 'vue-gl-pagination': gl.VueGlPagination, + }, + data() { + return { + pipelines: [], + currentPage: '', + intervalId: '', + pagenum: 1, + }; + }, + props: [ + 'scope', + 'store', + 'count', + ], + created() { + const url = window.location.toString(); + if (~url.indexOf('?')) this.pagenum = url.split('?')[1].split('=')[1]; + this.store.fetchDataLoop.call(this, Vue, this.pagenum); + }, + methods: { + shortsha(pipeline) { + return pipeline.sha.slice(0, 8); + }, + changepage(event, last) { + if (last) this.pagenum = +last; + if (!last) this.pagenum = +event.target.innerText; + // use p instead of page to avoid rails tyring to make an actual request + window.history.pushState({}, null, `?p=${this.pagenum}`); + clearInterval(this.intervalId); + this.store.fetchDataLoop.call(this, Vue, this.pagenum); + }, + pipelineurl(id) { + return `pipelines/${id}`; + }, + }, + template: ` +
      +
      + + + + + + + + + + + + + + +
      + + +
      +
      + + +
      + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 deleted file mode 100644 index a1d472cc464..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 +++ /dev/null @@ -1,89 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign, no-bitwise*/ - -((gl) => { - gl.VuePipeLines = Vue.extend({ - components: { - 'vue-running-pipeline': gl.VueRunningPipeline, - 'vue-stages': gl.VueStages, - 'vue-pipeline-actions': gl.VuePipelineActions, - 'vue-branch-commit': gl.VueBranchCommit, - 'vue-pipeline-url': gl.VuePipelineUrl, - 'vue-pipeline-head': gl.VuePipelineHead, - 'vue-gl-pagination': gl.VueGlPagination, - }, - data() { - return { - pipelines: [], - currentPage: '', - intervalId: '', - pagenum: 1, - }; - }, - props: [ - 'scope', - 'store', - 'count', - ], - created() { - const url = window.location.toString(); - if (~url.indexOf('?')) this.pagenum = url.split('?')[1].split('=')[1]; - this.store.fetchDataLoop.call(this, Vue, this.pagenum); - }, - methods: { - shortsha(pipeline) { - return pipeline.sha.slice(0, 8); - }, - changepage(event, last) { - if (last) this.pagenum = +last; - if (!last) this.pagenum = +event.target.innerText; - // use p instead of page to avoid rails tyring to make an actual request - window.history.pushState({}, null, `?p=${this.pagenum}`); - clearInterval(this.intervalId); - this.store.fetchDataLoop.call(this, Vue, this.pagenum); - }, - pipelineurl(id) { - return `pipelines/${id}`; - }, - }, - template: ` -
      -
      - - - - - - - - - - - - - - -
      - - -
      -
      - - -
      - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/running.js.es6 b/app/assets/javascripts/vue_pipelines_index/running.js.es6 new file mode 100644 index 00000000000..e363cb3c14e --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/running.js.es6 @@ -0,0 +1,31 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningPipeline = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + + + +  running + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 deleted file mode 100644 index e363cb3c14e..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 +++ /dev/null @@ -1,31 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningPipeline = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - - - - -  running - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 b/app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 new file mode 100644 index 00000000000..c37f213525c --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 @@ -0,0 +1,13 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningIcon = Vue.extend({ + template: ` + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 deleted file mode 100644 index c37f213525c..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 +++ /dev/null @@ -1,13 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningIcon = Vue.extend({ - template: ` - - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 new file mode 100644 index 00000000000..da8c9280486 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 @@ -0,0 +1,110 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueStages = Vue.extend({ + template: ` + + +
      + + + + + + + + +
      +
      + + + + + + + + +
      +
      + + + + + + + + +
      +
      + + + + + + + + +
      +
      + + + + + + + + +
      +
      + + + + + + + + +
      +
      + + + + + + + + +
      +
      + + + + + + + + +
      + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 deleted file mode 100644 index da8c9280486..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/stages.vue.js.es6 +++ /dev/null @@ -1,110 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueStages = Vue.extend({ - template: ` - - -
      - - - - - - - - -
      -
      - - - - - - - - -
      -
      - - - - - - - - -
      -
      - - - - - - - - -
      -
      - - - - - - - - -
      -
      - - - - - - - - -
      -
      - - - - - - - - -
      -
      - - - - - - - - -
      - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 deleted file mode 100644 index 84d908f8e52..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6 +++ /dev/null @@ -1,64 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueGlPagination = Vue.extend({ - props: [ - 'changepage', - 'pages', - 'count', - 'pagenum', - ], - methods: { - pagenumberstatus(n) { - if (n - 1 === +this.pagenum) return 'active'; - return ''; - }, - }, - computed: { - last() { - return Math.ceil(+this.count / 5); - }, - lastpage() { - return `pipelines?p=${this.last}`; - }, - upcount() { - return +this.last + 1; - }, - prev() { - if (this.pagenum === 1) return 1; - return this.pagenum - 1; - }, - next() { - if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`; - return `pipelines?p=${this.pagenum + 1}`; - }, - }, - template: ` -
      - -
      - `, - }); -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 35066c8558398e5d2dc096801b93e5c693e080fd Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 5 Nov 2016 16:36:33 -0600 Subject: making reusable status and status icons components --- app/assets/javascripts/svg_icons/index.js.es6 | 38 +++++++++++++++++ app/assets/javascripts/vue_icons/index.js.es6 | 49 ++++++++++++++++++++++ .../javascripts/vue_pipelines_index/index.js.es6 | 22 +++++----- .../vue_pipelines_index/pipelines.js.es6 | 13 +++--- .../javascripts/vue_pipelines_index/running.js.es6 | 31 -------------- .../vue_pipelines_index/running_icon.js.es6 | 13 ------ .../javascripts/vue_pipelines_index/store.js.es6 | 9 ++++ .../javascripts/vue_pipelines_status/failed.js.es6 | 24 +++++++++++ .../javascripts/vue_pipelines_status/index.js.es6 | 4 ++ .../vue_pipelines_status/pending.js.es6 | 24 +++++++++++ .../vue_pipelines_status/running.js.es6 | 24 +++++++++++ .../javascripts/vue_pipelines_status/status.js.es6 | 38 +++++++++++++++++ 12 files changed, 227 insertions(+), 62 deletions(-) create mode 100644 app/assets/javascripts/svg_icons/index.js.es6 create mode 100644 app/assets/javascripts/vue_icons/index.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/running.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/failed.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/index.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/pending.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/running.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/status.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/svg_icons/index.js.es6 b/app/assets/javascripts/svg_icons/index.js.es6 new file mode 100644 index 00000000000..b84c5f85a01 --- /dev/null +++ b/app/assets/javascripts/svg_icons/index.js.es6 @@ -0,0 +1,38 @@ +//= require vue +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningIcon = Vue.extend({ + template: ` + + + + + + + `, + }); + + gl.VuePendingIcon = Vue.extend({ + template: ` + + + + + + + `, + }); + + gl.VueSuccessIcon = Vue.extend({ + template: ` + + + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_icons/index.js.es6 b/app/assets/javascripts/vue_icons/index.js.es6 new file mode 100644 index 00000000000..413f9b45393 --- /dev/null +++ b/app/assets/javascripts/vue_icons/index.js.es6 @@ -0,0 +1,49 @@ +//= require vue +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningIcon = Vue.extend({ + template: ` + + + + + + + `, + }); + + gl.VuePendingIcon = Vue.extend({ + template: ` + + + + + + + `, + }); + + gl.VueSuccessIcon = Vue.extend({ + template: ` + + + + + + + `, + }); + + gl.VueFailedIcon = Vue.extend({ + template: ` + + + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index ecdb3e397c2..0ba043ef612 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -1,21 +1,21 @@ /* global Vue, VueResource, gl */ +/* eslint-disable no-bitwise*/ -//= require vue //= require vue-resource //= require ./store.js.es6 -//= require ./pipeline_url.vue.js.es6 -//= require ./vue_gl_pagination.vue.js.es6 -//= require ./pipeline_head.vue.js.es6 -//= require ./running_icon.vue.js.es6 -//= require ./running.vue.js.es6 -//= require ./stages.vue.js.es6 -//= require ./pipeline_actions.vue.js.es6 -//= require ./branch_commit.vue.js.es6 -//= require ./pipelines.vue.js.es6 +//= require ./pipeline_url.js.es6 +//= require ./gl_pagination.js.es6 +//= require ./pipeline_head.js.es6 +//= require ./stages.js.es6 +//= require ./pipeline_actions.js.es6 +//= require ./branch_commit.js.es6 +//= require ./pipelines.js.es6 (() => { - if (~window.location.href.indexOf('scope')) return null; + const url = window.location.href; + if (~url.indexOf('scope')) return null; + const project = document.querySelector('.pipelines'); Vue.use(VueResource); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index a1d472cc464..6cc516d025f 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -11,6 +11,7 @@ 'vue-pipeline-url': gl.VuePipelineUrl, 'vue-pipeline-head': gl.VuePipelineHead, 'vue-gl-pagination': gl.VueGlPagination, + 'vue-status-pipeline': gl.VueStatusPipeline, }, data() { return { @@ -53,13 +54,11 @@ - - - - + + { - gl.VueRunningPipeline = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - - - - -  running - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 b/app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 deleted file mode 100644 index c37f213525c..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/running_icon.js.es6 +++ /dev/null @@ -1,13 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningIcon = Vue.extend({ - template: ` - - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 89982b11b31..b4bdc27ede3 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -23,5 +23,14 @@ goFetch(); }, 60000); } + + fetchSvg(type, icon) { + this.$http.get(`/shared/icons/${icon}`) + .then((response) => { + this[type] = JSON.parse(response.body); + }, () => new Flash( + 'Something went wrong on our end.' + )); + } }; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/failed.js.es6 b/app/assets/javascripts/vue_pipelines_status/failed.js.es6 new file mode 100644 index 00000000000..33050186fe5 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/failed.js.es6 @@ -0,0 +1,24 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueFailedPipeline = Vue.extend({ + components: { + 'vue-failed-icon': gl.VuePendingIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + +  failed + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/index.js.es6 b/app/assets/javascripts/vue_pipelines_status/index.js.es6 new file mode 100644 index 00000000000..cea02b5d6af --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/index.js.es6 @@ -0,0 +1,4 @@ +//= require ./pending.js.es6 +//= require ./failed.js.es6 +//= require ./running.js.es6 +//= require ./status.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_status/pending.js.es6 b/app/assets/javascripts/vue_pipelines_status/pending.js.es6 new file mode 100644 index 00000000000..4c4a5ade09d --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/pending.js.es6 @@ -0,0 +1,24 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePendingPipeline = Vue.extend({ + components: { + 'vue-pending-icon': gl.VuePendingIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + +  pending + + + + `, + }); +})(window.gl || (window.gl = {})); \ No newline at end of file diff --git a/app/assets/javascripts/vue_pipelines_status/running.js.es6 b/app/assets/javascripts/vue_pipelines_status/running.js.es6 new file mode 100644 index 00000000000..af8480f4795 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/running.js.es6 @@ -0,0 +1,24 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningPipeline = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + +  running + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 new file mode 100644 index 00000000000..043468ea538 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/status.js.es6 @@ -0,0 +1,38 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueStatusPipeline = Vue.extend({ + components: { + 'vue-running-pipeline': gl.VueRunningPipeline, + 'vue-pending-pipeline': gl.VuePendingPipeline, + 'vue-failed-pipeline': gl.VueFailedPipeline, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + + + + + + `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 905f7391e76deb92f787f3701224214bd2b4663b Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 5 Nov 2016 16:43:21 -0600 Subject: status icon and status components dynamic by scope --- .../vue_pipelines_index/pipelines.js.es6 | 10 +++--- .../javascripts/vue_pipelines_status/failed.js.es6 | 8 ++--- .../vue_pipelines_status/pending.js.es6 | 8 ++--- .../vue_pipelines_status/running.js.es6 | 8 ++--- .../javascripts/vue_pipelines_status/status.js.es6 | 42 +++++++++++----------- 5 files changed, 38 insertions(+), 38 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 6cc516d025f..30f8806fdf2 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -11,7 +11,7 @@ 'vue-pipeline-url': gl.VuePipelineUrl, 'vue-pipeline-head': gl.VuePipelineHead, 'vue-gl-pagination': gl.VueGlPagination, - 'vue-status-pipeline': gl.VueStatusPipeline, + 'vue-status-scope': gl.VueStatusScope, }, data() { return { @@ -54,11 +54,11 @@ - - + { - gl.VueFailedPipeline = Vue.extend({ + gl.VueFailedScope = Vue.extend({ components: { 'vue-failed-icon': gl.VuePendingIcon, }, props: [ - 'pipeline', - 'pipelineurl', + 'scope', + 'scopeurl', ], template: ` - +  failed diff --git a/app/assets/javascripts/vue_pipelines_status/pending.js.es6 b/app/assets/javascripts/vue_pipelines_status/pending.js.es6 index 4c4a5ade09d..1742e52a2bb 100644 --- a/app/assets/javascripts/vue_pipelines_status/pending.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/pending.js.es6 @@ -2,17 +2,17 @@ /* eslint-disable no-param-reassign */ ((gl) => { - gl.VuePendingPipeline = Vue.extend({ + gl.VuePendingScope = Vue.extend({ components: { 'vue-pending-icon': gl.VuePendingIcon, }, props: [ - 'pipeline', - 'pipelineurl', + 'scope', + 'scopeurl', ], template: ` - +  pending diff --git a/app/assets/javascripts/vue_pipelines_status/running.js.es6 b/app/assets/javascripts/vue_pipelines_status/running.js.es6 index af8480f4795..bc2b2b0b1e9 100644 --- a/app/assets/javascripts/vue_pipelines_status/running.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/running.js.es6 @@ -2,17 +2,17 @@ /* eslint-disable no-param-reassign */ ((gl) => { - gl.VueRunningPipeline = Vue.extend({ + gl.VueRunningScope = Vue.extend({ components: { 'vue-running-icon': gl.VueRunningIcon, }, props: [ - 'pipeline', - 'pipelineurl', + 'scope', + 'scopeurl', ], template: ` - +  running diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 index 043468ea538..6695b600488 100644 --- a/app/assets/javascripts/vue_pipelines_status/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/status.js.es6 @@ -2,36 +2,36 @@ /* eslint-disable no-param-reassign */ ((gl) => { - gl.VueStatusPipeline = Vue.extend({ + gl.VueStatusScope = Vue.extend({ components: { - 'vue-running-pipeline': gl.VueRunningPipeline, - 'vue-pending-pipeline': gl.VuePendingPipeline, - 'vue-failed-pipeline': gl.VueFailedPipeline, + 'vue-running-scope': gl.VueRunningScope, + 'vue-pending-scope': gl.VuePendingScope, + 'vue-failed-scope': gl.VueFailedScope, }, props: [ - 'pipeline', - 'pipelineurl', + 'scope', + 'scopeurl', ], template: ` - - - + - - + - + `, }); -- cgit v1.2.1 From f140da6b55013c1170285be84cf1f53b23bfe67e Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 5 Nov 2016 16:50:18 -0600 Subject: remove files/folders --- app/assets/javascripts/svg_icons/index.js.es6 | 38 --------------------------- 1 file changed, 38 deletions(-) delete mode 100644 app/assets/javascripts/svg_icons/index.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/svg_icons/index.js.es6 b/app/assets/javascripts/svg_icons/index.js.es6 deleted file mode 100644 index b84c5f85a01..00000000000 --- a/app/assets/javascripts/svg_icons/index.js.es6 +++ /dev/null @@ -1,38 +0,0 @@ -//= require vue -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningIcon = Vue.extend({ - template: ` - - - - - - - `, - }); - - gl.VuePendingIcon = Vue.extend({ - template: ` - - - - - - - `, - }); - - gl.VueSuccessIcon = Vue.extend({ - template: ` - - - - - - - `, - }); -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 0c9a4c14209c16d14d856fdb3b5e88c917232c6c Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 6 Nov 2016 11:17:18 -0700 Subject: icon and status comps - pagination logic almost done --- .../javascripts/vue_pipeline_status/failed.js.es6 | 24 ++++++++++++++ .../javascripts/vue_pipeline_status/pending.js.es6 | 24 ++++++++++++++ .../javascripts/vue_pipeline_status/running.js.es6 | 24 ++++++++++++++ .../javascripts/vue_pipeline_status/status.js.es6 | 38 ++++++++++++++++++++++ .../vue_pipelines_index/gl_pagination.js.es6 | 24 +++++++------- .../vue_pipelines_index/pipelines.js.es6 | 10 +++--- 6 files changed, 129 insertions(+), 15 deletions(-) create mode 100644 app/assets/javascripts/vue_pipeline_status/failed.js.es6 create mode 100644 app/assets/javascripts/vue_pipeline_status/pending.js.es6 create mode 100644 app/assets/javascripts/vue_pipeline_status/running.js.es6 create mode 100644 app/assets/javascripts/vue_pipeline_status/status.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipeline_status/failed.js.es6 b/app/assets/javascripts/vue_pipeline_status/failed.js.es6 new file mode 100644 index 00000000000..33050186fe5 --- /dev/null +++ b/app/assets/javascripts/vue_pipeline_status/failed.js.es6 @@ -0,0 +1,24 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueFailedPipeline = Vue.extend({ + components: { + 'vue-failed-icon': gl.VuePendingIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + +  failed + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipeline_status/pending.js.es6 b/app/assets/javascripts/vue_pipeline_status/pending.js.es6 new file mode 100644 index 00000000000..bd2a1d0a496 --- /dev/null +++ b/app/assets/javascripts/vue_pipeline_status/pending.js.es6 @@ -0,0 +1,24 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VuePendingPipeline = Vue.extend({ + components: { + 'vue-pending-icon': gl.VuePendingIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + +  pending + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipeline_status/running.js.es6 b/app/assets/javascripts/vue_pipeline_status/running.js.es6 new file mode 100644 index 00000000000..af8480f4795 --- /dev/null +++ b/app/assets/javascripts/vue_pipeline_status/running.js.es6 @@ -0,0 +1,24 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueRunningPipeline = Vue.extend({ + components: { + 'vue-running-icon': gl.VueRunningIcon, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + +  running + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipeline_status/status.js.es6 b/app/assets/javascripts/vue_pipeline_status/status.js.es6 new file mode 100644 index 00000000000..043468ea538 --- /dev/null +++ b/app/assets/javascripts/vue_pipeline_status/status.js.es6 @@ -0,0 +1,38 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueStatusPipeline = Vue.extend({ + components: { + 'vue-running-pipeline': gl.VueRunningPipeline, + 'vue-pending-pipeline': gl.VuePendingPipeline, + 'vue-failed-pipeline': gl.VueFailedPipeline, + }, + props: [ + 'pipeline', + 'pipelineurl', + ], + template: ` + + + + + + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 b/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 index 84d908f8e52..d4b31649f9b 100644 --- a/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 @@ -14,6 +14,10 @@ if (n - 1 === +this.pagenum) return 'active'; return ''; }, + prevstatus() { + if (+this.pagenum > 1) return ''; + return 'prev disabled'; + }, }, computed: { last() { @@ -29,33 +33,31 @@ if (this.pagenum === 1) return 1; return this.pagenum - 1; }, - next() { - if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`; - return `pipelines?p=${this.pagenum + 1}`; - }, }, template: `
      diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 30f8806fdf2..b5c451ab221 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -35,10 +35,12 @@ shortsha(pipeline) { return pipeline.sha.slice(0, 8); }, - changepage(event, last) { - if (last) this.pagenum = +last; - if (!last) this.pagenum = +event.target.innerText; - // use p instead of page to avoid rails tyring to make an actual request + changepage(event, page = {}) { + if (page) this.pagenum = +event.target.innerText; + if (page.last) this.pagenum = +page.last; + if (page.where) this.pagenum = +page.next; + + // use p instead of page to avoid making an actual request window.history.pushState({}, null, `?p=${this.pagenum}`); clearInterval(this.intervalId); this.store.fetchDataLoop.call(this, Vue, this.pagenum); -- cgit v1.2.1 From 91a22eb6c537bea870bd14db81b36e6b19044b62 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 6 Nov 2016 11:23:21 -0700 Subject: remove extra folder --- .../javascripts/vue_pipeline_status/failed.js.es6 | 24 -------------- .../javascripts/vue_pipeline_status/pending.js.es6 | 24 -------------- .../javascripts/vue_pipeline_status/running.js.es6 | 24 -------------- .../javascripts/vue_pipeline_status/status.js.es6 | 38 ---------------------- 4 files changed, 110 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipeline_status/failed.js.es6 delete mode 100644 app/assets/javascripts/vue_pipeline_status/pending.js.es6 delete mode 100644 app/assets/javascripts/vue_pipeline_status/running.js.es6 delete mode 100644 app/assets/javascripts/vue_pipeline_status/status.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipeline_status/failed.js.es6 b/app/assets/javascripts/vue_pipeline_status/failed.js.es6 deleted file mode 100644 index 33050186fe5..00000000000 --- a/app/assets/javascripts/vue_pipeline_status/failed.js.es6 +++ /dev/null @@ -1,24 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueFailedPipeline = Vue.extend({ - components: { - 'vue-failed-icon': gl.VuePendingIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - - -  failed - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipeline_status/pending.js.es6 b/app/assets/javascripts/vue_pipeline_status/pending.js.es6 deleted file mode 100644 index bd2a1d0a496..00000000000 --- a/app/assets/javascripts/vue_pipeline_status/pending.js.es6 +++ /dev/null @@ -1,24 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePendingPipeline = Vue.extend({ - components: { - 'vue-pending-icon': gl.VuePendingIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - - -  pending - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipeline_status/running.js.es6 b/app/assets/javascripts/vue_pipeline_status/running.js.es6 deleted file mode 100644 index af8480f4795..00000000000 --- a/app/assets/javascripts/vue_pipeline_status/running.js.es6 +++ /dev/null @@ -1,24 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningPipeline = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - - -  running - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipeline_status/status.js.es6 b/app/assets/javascripts/vue_pipeline_status/status.js.es6 deleted file mode 100644 index 043468ea538..00000000000 --- a/app/assets/javascripts/vue_pipeline_status/status.js.es6 +++ /dev/null @@ -1,38 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueStatusPipeline = Vue.extend({ - components: { - 'vue-running-pipeline': gl.VueRunningPipeline, - 'vue-pending-pipeline': gl.VuePendingPipeline, - 'vue-failed-pipeline': gl.VueFailedPipeline, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], - template: ` - - - - - - - - - `, - }); -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From fd10ff30bbd4b24889fc0c79fbe35af95f9b5666 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 6 Nov 2016 11:27:27 -0700 Subject: extract pagination into own folder and precompile in application.rb --- app/assets/javascripts/vue_pagination/index.js.es6 | 66 ++++++++++++++++++++++ .../vue_pipelines_index/gl_pagination.js.es6 | 66 ---------------------- .../javascripts/vue_pipelines_index/index.js.es6 | 1 - 3 files changed, 66 insertions(+), 67 deletions(-) create mode 100644 app/assets/javascripts/vue_pagination/index.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 new file mode 100644 index 00000000000..d4b31649f9b --- /dev/null +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -0,0 +1,66 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueGlPagination = Vue.extend({ + props: [ + 'changepage', + 'pages', + 'count', + 'pagenum', + ], + methods: { + pagenumberstatus(n) { + if (n - 1 === +this.pagenum) return 'active'; + return ''; + }, + prevstatus() { + if (+this.pagenum > 1) return ''; + return 'prev disabled'; + }, + }, + computed: { + last() { + return Math.ceil(+this.count / 5); + }, + lastpage() { + return `pipelines?p=${this.last}`; + }, + upcount() { + return +this.last + 1; + }, + prev() { + if (this.pagenum === 1) return 1; + return this.pagenum - 1; + }, + }, + template: ` +
      +
        +
      • + Prev +
        • +
      • + {{(n - 1)}} +
        • + +
      • + … +
        • + +
      • + Last » +
        • +
      +
      + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 b/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 deleted file mode 100644 index d4b31649f9b..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/gl_pagination.js.es6 +++ /dev/null @@ -1,66 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueGlPagination = Vue.extend({ - props: [ - 'changepage', - 'pages', - 'count', - 'pagenum', - ], - methods: { - pagenumberstatus(n) { - if (n - 1 === +this.pagenum) return 'active'; - return ''; - }, - prevstatus() { - if (+this.pagenum > 1) return ''; - return 'prev disabled'; - }, - }, - computed: { - last() { - return Math.ceil(+this.count / 5); - }, - lastpage() { - return `pipelines?p=${this.last}`; - }, - upcount() { - return +this.last + 1; - }, - prev() { - if (this.pagenum === 1) return 1; - return this.pagenum - 1; - }, - }, - template: ` -
      -
        -
      • - Prev -
        • -
      • - {{(n - 1)}} -
        • - -
      • - … -
        • - -
      • - Last » -
        • -
      -
      - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 0ba043ef612..f7657879ac4 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -5,7 +5,6 @@ //= require ./store.js.es6 //= require ./pipeline_url.js.es6 -//= require ./gl_pagination.js.es6 //= require ./pipeline_head.js.es6 //= require ./stages.js.es6 //= require ./pipeline_actions.js.es6 -- cgit v1.2.1 From be146a4f0cfa26995748e6c086139cfcacfa613b Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 6 Nov 2016 13:35:29 -0700 Subject: remove svg api call - more progress on pagination --- app/assets/javascripts/vue_pagination/index.js.es6 | 45 +++++++++++++++------- .../javascripts/vue_pipelines_index/index.js.es6 | 2 +- .../vue_pipelines_index/pipelines.js.es6 | 4 +- .../javascripts/vue_pipelines_index/store.js.es6 | 9 ----- 4 files changed, 35 insertions(+), 25 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index d4b31649f9b..2665b2bd2c5 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -3,14 +3,19 @@ ((gl) => { gl.VueGlPagination = Vue.extend({ + data() { + return { + nslice: +this.pagenum, + }; + }, props: [ 'changepage', - 'pages', 'count', 'pagenum', ], methods: { pagenumberstatus(n) { + console.log(n, this.nslice); if (n - 1 === +this.pagenum) return 'active'; return ''; }, @@ -20,35 +25,46 @@ }, }, computed: { + paginationsection() { + if (this.last < 6 && this.pagenum < 6) { + const pageArray = [...Array(6).keys()]; + pageArray.shift(); + return pageArray.slice(0, this.upcount); + } + const section = [...Array(this.upcount).keys()]; + section.shift(); + this.nslice = +this.pagenum; + return section.slice(+this.pagenum, +this.pagenum + 5); + }, last() { return Math.ceil(+this.count / 5); }, - lastpage() { - return `pipelines?p=${this.last}`; - }, upcount() { return +this.last + 1; }, - prev() { - if (this.pagenum === 1) return 1; - return this.pagenum - 1; + endspread() { + if (+this.pagenum < this.last && +this.pagenum > 5) return true; + return false + }, + begspread() { + if (+this.pagenum > 5 && +this.pagenum < this.last) return true; + return false }, }, template: `
      -
        -
      • +
          +
        • Prev
          • -
        • +
        • {{(n - 1)}}
          • -
        • +
        • …
          • +
        • + … +
        • - Last » + Last »
      diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index f7657879ac4..1aea0820208 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -34,7 +34,7 @@
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index b5c451ab221..3ab336f0e6d 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -37,8 +37,8 @@ }, changepage(event, page = {}) { if (page) this.pagenum = +event.target.innerText; - if (page.last) this.pagenum = +page.last; - if (page.where) this.pagenum = +page.next; + if (page.where) this.pagenum = +page.where; + if (page.where) this.pagenum = +page.where; // use p instead of page to avoid making an actual request window.history.pushState({}, null, `?p=${this.pagenum}`); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index b4bdc27ede3..89982b11b31 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -23,14 +23,5 @@ goFetch(); }, 60000); } - - fetchSvg(type, icon) { - this.$http.get(`/shared/icons/${icon}`) - .then((response) => { - this[type] = JSON.parse(response.body); - }, () => new Flash( - 'Something went wrong on our end.' - )); - } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 286b96f02501db38535f8a1e5f9b8a15bfafe5a6 Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 6 Nov 2016 13:56:08 -0700 Subject: a lot more progress on pagination :) --- app/assets/javascripts/vue_pagination/index.js.es6 | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 2665b2bd2c5..a6a8dd93480 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -34,6 +34,7 @@ const section = [...Array(this.upcount).keys()]; section.shift(); this.nslice = +this.pagenum; + this.endcount = +this.pagenum + 5; return section.slice(+this.pagenum, +this.pagenum + 5); }, last() { @@ -44,17 +45,17 @@ }, endspread() { if (+this.pagenum < this.last && +this.pagenum > 5) return true; - return false + return false; }, begspread() { if (+this.pagenum > 5 && +this.pagenum < this.last) return true; - return false + return false; }, }, template: `
    -
  • +
  • Prev
  • @@ -67,15 +68,15 @@
  • …
    • -
  • …
    • -
  • +
  • Last »
-- cgit v1.2.1 From fa2f052ba78d4cdbc8d1800da25f5cc8041f655e Mon Sep 17 00:00:00 2001 From: Regis Date: Sun, 6 Nov 2016 14:00:36 -0700 Subject: formatting --- app/assets/javascripts/vue_pagination/index.js.es6 | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index a6a8dd93480..73232b45b81 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -15,7 +15,6 @@ ], methods: { pagenumberstatus(n) { - console.log(n, this.nslice); if (n - 1 === +this.pagenum) return 'active'; return ''; }, @@ -68,7 +67,10 @@
  • …
    • -
  • …
    • -
  • +
  • Last »
    • -- cgit v1.2.1 From 31af345b476f0995888dc1e75bcabc95def2aba2 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 7 Nov 2016 14:16:57 -0700 Subject: fix prev button being misplaced --- app/assets/javascripts/vue_pagination/index.js.es6 | 31 +++++++++++----------- .../javascripts/vue_pipelines_index/index.js.es6 | 2 +- 2 files changed, 17 insertions(+), 16 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 73232b45b81..88a2c5567a1 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -3,16 +3,16 @@ ((gl) => { gl.VueGlPagination = Vue.extend({ - data() { - return { - nslice: +this.pagenum, - }; - }, props: [ 'changepage', 'count', 'pagenum', ], + data() { + return { + nslice: +this.pagenum, + }; + }, methods: { pagenumberstatus(n) { if (n - 1 === +this.pagenum) return 'active'; @@ -24,17 +24,20 @@ }, }, computed: { + dynamicpage() { + const section = [...Array(this.upcount).keys()]; + section.shift(); + this.nslice = +this.pagenum; + this.endcount = +this.pagenum + 5; + return section.slice(+this.pagenum, +this.pagenum + 5); + }, paginationsection() { if (this.last < 6 && this.pagenum < 6) { const pageArray = [...Array(6).keys()]; pageArray.shift(); return pageArray.slice(0, this.upcount); } - const section = [...Array(this.upcount).keys()]; - section.shift(); - this.nslice = +this.pagenum; - this.endcount = +this.pagenum + 5; - return section.slice(+this.pagenum, +this.pagenum + 5); + return this.dynamicpage; }, last() { return Math.ceil(+this.count / 5); @@ -54,7 +57,7 @@ template: `
      -
    • +
    • Prev
    • @@ -71,16 +74,14 @@ class="next" v-if='(n === upcount || n === endcount) && pagenum !== last' > - - Next - + Next
    • …
    • Last »
      • diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 1aea0820208..f7657879ac4 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -34,7 +34,7 @@
    -- cgit v1.2.1 From b0e6d0788625ae4a1e522c33496c06b4cdd53020 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 7 Nov 2016 14:43:11 -0700 Subject: end dot logic complete --- app/assets/javascripts/vue_pagination/index.js.es6 | 26 +++++++++++++--------- .../javascripts/vue_pipelines_index/index.js.es6 | 2 +- 2 files changed, 16 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 88a2c5567a1..71031c4d76d 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -29,7 +29,12 @@ section.shift(); this.nslice = +this.pagenum; this.endcount = +this.pagenum + 5; - return section.slice(+this.pagenum, +this.pagenum + 5); + if (+this.pagenum + 5 <= this.last) { + return section.slice(+this.pagenum, +this.pagenum + 5); + } + if (+this.pagenum + 5 > this.last) { + return section.slice(this.last - 5, this.last); + } }, paginationsection() { if (this.last < 6 && this.pagenum < 6) { @@ -46,7 +51,7 @@ return +this.last + 1; }, endspread() { - if (+this.pagenum < this.last && +this.pagenum > 5) return true; + if (+this.pagenum < this.last) return true; return false; }, begspread() { @@ -57,17 +62,19 @@ template: `
      -
    • +
    • Prev
      • +
    • + … +
    • {{(n - 1)}}
      • - -
    • +
    • …
    • Next
      • -
    • - … -
    -- cgit v1.2.1 From e95a2b156b181145c98a790edd924e90cca3f3ee Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 7 Nov 2016 23:56:02 -0700 Subject: remove use of spread operator - attempt render function --- app/assets/javascripts/vue_pagination/index.js.es6 | 36 +++++++++++++++++++--- .../vue_pipelines_index/pipelines.js.es6 | 1 - 2 files changed, 32 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 71031c4d76d..7703901e113 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -11,6 +11,7 @@ data() { return { nslice: +this.pagenum, + endcount: this.last, }; }, methods: { @@ -20,12 +21,15 @@ }, prevstatus() { if (+this.pagenum > 1) return ''; - return 'prev disabled'; + return 'disabled'; + }, + createSection(n) { + return Array.from(Array(n)).map((e, i) => i); }, }, computed: { dynamicpage() { - const section = [...Array(this.upcount).keys()]; + const section = this.createSection(this.upcount); section.shift(); this.nslice = +this.pagenum; this.endcount = +this.pagenum + 5; @@ -38,7 +42,7 @@ }, paginationsection() { if (this.last < 6 && this.pagenum < 6) { - const pageArray = [...Array(6).keys()]; + const pageArray = this.createSection(6); pageArray.shift(); return pageArray.slice(0, this.upcount); } @@ -81,7 +85,7 @@ class="next" v-if='(n === upcount || n === endcount) && pagenum !== last' > - Next + Next
    • `, + // render(createElement) { + // return createElement('div', { + // class: { + // 'gl-pagination': true, + // }, + // }, [createElement('ul', { + // class: { + // pagination: true, + // clearfix: true, + // }, + // }, this.paginationsection.map((e, i) => { + // if (!i) return createElement('li', [createElement('span', { + // class: { + // prev: this.prevstatus, + // }, + // }, 'Prev')]); + // if (i) { + // return createElement('li', + // [createElement('span', i)] + // ); + // } + // })), + // ]); + // }, }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 3ab336f0e6d..4ef9fca6474 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -40,7 +40,6 @@ if (page.where) this.pagenum = +page.where; if (page.where) this.pagenum = +page.where; - // use p instead of page to avoid making an actual request window.history.pushState({}, null, `?p=${this.pagenum}`); clearInterval(this.intervalId); this.store.fetchDataLoop.call(this, Vue, this.pagenum); -- cgit v1.2.1 From cdbbce17cb0f83895183d342fa27e0ee015f58bb Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 8 Nov 2016 12:23:29 -0700 Subject: cleanup --- app/assets/javascripts/vue_pagination/index.js.es6 | 115 ++++----------------- .../javascripts/vue_pipelines_index/index.js.es6 | 2 +- .../vue_pipelines_index/pipeline_head.js.es6 | 7 -- .../vue_pipelines_index/pipelines.js.es6 | 10 +- .../javascripts/vue_pipelines_index/store.js.es6 | 2 +- .../javascripts/vue_pipelines_status/failed.js.es6 | 2 +- 6 files changed, 27 insertions(+), 111 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 7703901e113..dce1c86ffa2 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -8,117 +8,38 @@ 'count', 'pagenum', ], - data() { - return { - nslice: +this.pagenum, - endcount: this.last, - }; - }, methods: { pagenumberstatus(n) { if (n - 1 === +this.pagenum) return 'active'; return ''; }, - prevstatus() { - if (+this.pagenum > 1) return ''; - return 'disabled'; - }, - createSection(n) { - return Array.from(Array(n)).map((e, i) => i); - }, + createSection(n) { return Array.from(Array(n)).map((e, i) => i); }, }, computed: { - dynamicpage() { - const section = this.createSection(this.upcount); - section.shift(); - this.nslice = +this.pagenum; - this.endcount = +this.pagenum + 5; - if (+this.pagenum + 5 <= this.last) { - return section.slice(+this.pagenum, +this.pagenum + 5); - } - if (+this.pagenum + 5 > this.last) { - return section.slice(this.last - 5, this.last); - } - }, - paginationsection() { - if (this.last < 6 && this.pagenum < 6) { - const pageArray = this.createSection(6); - pageArray.shift(); - return pageArray.slice(0, this.upcount); - } - return this.dynamicpage; - }, - last() { - return Math.ceil(+this.count / 5); - }, - upcount() { - return +this.last + 1; - }, - endspread() { - if (+this.pagenum < this.last) return true; - return false; - }, - begspread() { - if (+this.pagenum > 5 && +this.pagenum < this.last) return true; - return false; + last() { return Math.ceil(+this.count / 5); }, + getItems() { + const items = []; + const pages = this.createSection(+this.last + 1); + pages.shift(); + + if (+this.pagenum !== 1) items.push({ text: 'Prev' }); + + pages.forEach(i => items.push({ text: i })); + + if (+this.pagenum < this.last) items.push({ text: 'Next' }); + if (+this.pagenum !== this.last) items.push({ text: 'Last »' }); + + return items; }, }, template: `
    -
      -
    • - Prev -
      • -
    • - … -
      • -
    • - {{(n - 1)}} -
      • -
    • - … -
      • - -
    • - Last » +
        +
      • + {{item.text}}
    `, - // render(createElement) { - // return createElement('div', { - // class: { - // 'gl-pagination': true, - // }, - // }, [createElement('ul', { - // class: { - // pagination: true, - // clearfix: true, - // }, - // }, this.paginationsection.map((e, i) => { - // if (!i) return createElement('li', [createElement('span', { - // class: { - // prev: this.prevstatus, - // }, - // }, 'Prev')]); - // if (i) { - // return createElement('li', - // [createElement('span', i)] - // ); - // } - // })), - // ]); - // }, }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 1aea0820208..f7657879ac4 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -34,7 +34,7 @@ diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 index 2ead571aa9f..510e54f3a6f 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 @@ -3,13 +3,6 @@ ((gl) => { gl.VuePipelineHead = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - 'pipelineurl', - ], template: ` diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 4ef9fca6474..ecb07af9a32 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -35,10 +35,12 @@ shortsha(pipeline) { return pipeline.sha.slice(0, 8); }, - changepage(event, page = {}) { - if (page) this.pagenum = +event.target.innerText; - if (page.where) this.pagenum = +page.where; - if (page.where) this.pagenum = +page.where; + changepage(event, last) { + const text = event.target.innerText; + if (typeof +text === 'number') this.pagenum = +text; + if (text === 'Last »') this.pagenum = last; + if (text === 'Next') this.pagnum = +this.pagenum + 1; + if (text === 'Prev') this.pagenum = +this.pagenum - 1; window.history.pushState({}, null, `?p=${this.pagenum}`); clearInterval(this.intervalId); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 89982b11b31..d4b0c79f225 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -21,7 +21,7 @@ // eventually clearInterval(this.intervalId) this.intervalId = setInterval(() => { goFetch(); - }, 60000); + }, 3000); } }; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/failed.js.es6 b/app/assets/javascripts/vue_pipelines_status/failed.js.es6 index 92373e12c25..a877cfc688e 100644 --- a/app/assets/javascripts/vue_pipelines_status/failed.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/failed.js.es6 @@ -4,7 +4,7 @@ ((gl) => { gl.VueFailedScope = Vue.extend({ components: { - 'vue-failed-icon': gl.VuePendingIcon, + 'vue-failed-icon': gl.VueFailedIcon, }, props: [ 'scope', -- cgit v1.2.1 From 4dd82e1d49d5dc1958c2425d1d052645638c2274 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 8 Nov 2016 12:31:41 -0700 Subject: fix changepage logic --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index ecb07af9a32..2c26b0a2bc7 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -37,9 +37,9 @@ }, changepage(event, last) { const text = event.target.innerText; - if (typeof +text === 'number') this.pagenum = +text; + if (typeof text === 'number') this.pagenum = +text; if (text === 'Last »') this.pagenum = last; - if (text === 'Next') this.pagnum = +this.pagenum + 1; + if (text === 'Next') this.pagenum = +this.pagenum + 1; if (text === 'Prev') this.pagenum = +this.pagenum - 1; window.history.pushState({}, null, `?p=${this.pagenum}`); -- cgit v1.2.1 From 39a8f1aaf4c05764045de5fcdacd52af2406c152 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 8 Nov 2016 13:04:30 -0700 Subject: regex for number check --- app/assets/javascripts/vue_pagination/index.js.es6 | 17 +++++++++++------ .../javascripts/vue_pipelines_index/pipelines.js.es6 | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index dce1c86ffa2..8dabfef3b95 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -9,9 +9,14 @@ 'pagenum', ], methods: { - pagenumberstatus(n) { - if (n - 1 === +this.pagenum) return 'active'; - return ''; + pagestatus(n) { + if (n - 1 === +this.pagenum) return true; + return false; + }, + prevstatus(index) { + if (index > 0) return false; + if (+this.pagenum < 2) return true; + return false; }, createSection(n) { return Array.from(Array(n)).map((e, i) => i); }, }, @@ -22,7 +27,7 @@ const pages = this.createSection(+this.last + 1); pages.shift(); - if (+this.pagenum !== 1) items.push({ text: 'Prev' }); + items.push({ text: 'Prev', class: this.prevstatus() }); pages.forEach(i => items.push({ text: i })); @@ -34,8 +39,8 @@ }, template: `
    -
    + Date: Thu, 10 Nov 2016 21:18:33 -0700 Subject: conditional action buttons - spans for pipeline tags --- .../vue_pipelines_index/pipeline_actions.js.es6 | 14 ++++++++++++-- .../javascripts/vue_pipelines_index/pipeline_url.js.es6 | 16 ++++++++++++++++ 2 files changed, 28 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 0b469e8ffb6..583069aea2a 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -24,7 +24,12 @@
    - +
    - + diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index d0cbf99a344..9ebbe3ccf9e 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -22,6 +22,22 @@ by {{user}} + + latest + + + yaml invalid + `, }); -- cgit v1.2.1 From df1b15e327877066364271384975a8307d5f6c22 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 10 Nov 2016 22:21:09 -0700 Subject: loading icon - rename component keys --- .../vue_pipelines_index/pipelines.js.es6 | 28 ++++++++++++++-------- .../javascripts/vue_pipelines_index/store.js.es6 | 2 +- 2 files changed, 19 insertions(+), 11 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 7dcc319390e..421e4111187 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -4,15 +4,15 @@ ((gl) => { gl.VuePipeLines = Vue.extend({ components: { - 'running-pipeline': gl.VueRunningPipeline, - 'stages': gl.VueStages, - 'pipeline-actions': gl.VuePipelineActions, - 'branch-commit': gl.VueBranchCommit, - 'pipeline-url': gl.VuePipelineUrl, - 'pipeline-head': gl.VuePipelineHead, - 'gl-pagination': gl.VueGlPagination, - 'status-scope': gl.VueStatusScope, - 'time-ago': gl.VueTimeAgo, + runningPipeline: gl.VueRunningPipeline, + pipelineActions: gl.VuePipelineActions, + stages: gl.VueStages, + branchCommit: gl.VueBranchCommit, + pipelineUrl: gl.VuePipelineUrl, + pipelineHead: gl.VuePipelineHead, + glPagination: gl.VueGlPagination, + statusScope: gl.VueStatusScope, + timeAgo: gl.VueTimeAgo, }, data() { return { @@ -24,6 +24,7 @@ all: 0, running_or_pending: 0, }, + pageRequest: false, }; }, props: [ @@ -47,12 +48,16 @@ window.history.pushState({}, null, `?p=${this.pagenum}`); clearInterval(this.intervalId); + this.pageRequest = true; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, }, template: `
    -
    +
    + +
    +
    @@ -67,6 +72,9 @@
    +
    + +
    { const res = JSON.parse(response.body); - debugger Vue.set(this, 'updatedAt', res.updated_at); Vue.set(this, 'pipelines', res.pipelines); Vue.set(this, 'count', res.count); + this.pageRequest = false; }, () => new Flash( 'Something went wrong on our end.' )); -- cgit v1.2.1 From 31e34715bf62993a42ca7636edf1408891b0595b Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 11 Nov 2016 12:05:07 -0700 Subject: scoped polyfill for now --- .../javascripts/vue_pipelines_index/index.js.es6 | 1 + .../vue_pipelines_index/object_assign.js.es6 | 30 ++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 3a7842f305b..ab53b12d3d0 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -3,6 +3,7 @@ //= require vue-resource +//= require ./object_assign.js.es6 //= require ./store.js.es6 //= require ./pipeline_url.js.es6 //= require ./pipeline_head.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 b/app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 new file mode 100644 index 00000000000..05a5a7da1c3 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 @@ -0,0 +1,30 @@ +/* eslint-disable */ + +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ +(() => { + if (typeof Object.assign != 'function') { + (function () { + Object.assign = function (target) { + 'use strict'; + // We must check against these specific cases. + if (target === undefined || target === null) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + var output = Object(target); + for (var index = 1; index < arguments.length; index++) { + var source = arguments[index]; + if (source !== undefined && source !== null) { + for (var nextKey in source) { + if (source.hasOwnProperty(nextKey)) { + output[nextKey] = source[nextKey]; + } + } + } + } + return output; + }; + })(); + } +})(); -- cgit v1.2.1 From b64ee664a69eaa0474a8befeb2379e948eb647cb Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 11 Nov 2016 12:25:10 -0700 Subject: add stuck icon --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index 9ebbe3ccf9e..efeef974960 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -38,6 +38,12 @@ > yaml invalid + + stuck + `, }); -- cgit v1.2.1 From af4459e5314b8d7d054995e6cf244e91feacf78a Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 11 Nov 2016 12:35:57 -0700 Subject: update stage icons with created --- app/assets/javascripts/vue_icons/index.js.es6 | 9 +++++++++ .../javascripts/vue_pipelines_index/stage.js.es6 | 7 ++++++- .../vue_pipelines_status/created.js.es6 | 23 ++++++++++++++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/vue_pipelines_status/created.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_icons/index.js.es6 b/app/assets/javascripts/vue_icons/index.js.es6 index 413f9b45393..66b4a58a4c0 100644 --- a/app/assets/javascripts/vue_icons/index.js.es6 +++ b/app/assets/javascripts/vue_icons/index.js.es6 @@ -46,4 +46,13 @@ `, }); + + gl.VueCreatedIcon = Vue.extend({ + template: ` + + + + + `, + }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index f983226a4ce..8a77f213b7f 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -8,16 +8,20 @@ 'pending-icon': gl.VuePendingIcon, 'failed-icon': gl.VueFailedIcon, 'success-icon': gl.VueSuccessIcon, + 'created-icon': gl.VueCreatedIcon, }, props: ['stage'], computed: { buildStatus() { return `Build: ${this.stage.status}`; }, + tooltip() { + return `has-tooltip ci-status-icon-${this.stage.status}`; + }, }, template: ` @@ -25,6 +29,7 @@ + `, }); diff --git a/app/assets/javascripts/vue_pipelines_status/created.js.es6 b/app/assets/javascripts/vue_pipelines_status/created.js.es6 new file mode 100644 index 00000000000..b74566b7341 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/created.js.es6 @@ -0,0 +1,23 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueCreatedScope = Vue.extend({ + components: { + 'vue-created-icon': gl.VueCreatedIcon, + }, + props: [ + 'pipeline', + ], + template: ` + + + + +  failed + + + + `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From e5af16a3e097a6e7ea79c3120b2cc95c64b769ac Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 11 Nov 2016 12:37:24 -0700 Subject: add created to pipeline scope status --- app/assets/javascripts/vue_pipelines_status/status.js.es6 | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 index 3f8cb1164ec..394c6349b91 100644 --- a/app/assets/javascripts/vue_pipelines_status/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/status.js.es6 @@ -7,6 +7,7 @@ 'vue-running-scope': gl.VueRunningScope, 'vue-pending-scope': gl.VuePendingScope, 'vue-failed-scope': gl.VueFailedScope, + 'vue-created-scope': gl.VueCreatedScope, }, props: [ 'pipeline', @@ -28,6 +29,11 @@ :pipeline='pipeline' > + + `, }); -- cgit v1.2.1 From 35c8e533c05a68feacc52cf8b8e173ef6290c641 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 11 Nov 2016 12:40:29 -0700 Subject: created component instead of failed --- app/assets/javascripts/vue_pipelines_status/status.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 index 394c6349b91..0a722ba7ca5 100644 --- a/app/assets/javascripts/vue_pipelines_status/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/status.js.es6 @@ -29,11 +29,11 @@ :pipeline='pipeline' > - - + `, }); -- cgit v1.2.1 From 04a4520c2d389bae4358c9429aa22cf3a53ba9a2 Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 12 Nov 2016 01:57:23 -0700 Subject: fix cancel url - clearInterval on refresh and page close - fix branch url --- app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 4 ++-- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 4 ++-- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 6 +++++- 4 files changed, 10 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 index e1f404befa1..43bad6e36e7 100644 --- a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 @@ -20,7 +20,7 @@ {{pipeline.ref.name}} diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 583069aea2a..c86b49c15fa 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -80,7 +80,7 @@
    diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 421e4111187..7872e7d4ac6 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -37,8 +37,8 @@ this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, methods: { - changepage(event, last) { - const text = event.target.innerText; + changepage(e, last) { + const text = e.target.innerText; if (text === '...') return; if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text; if (text === 'Last >>') this.pagenum = last; diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index d00e30760a8..861df939451 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -53,8 +53,12 @@ goFetch(); this.intervalId = setInterval(() => { - goUpdate(); + if (this.updatedAt) goUpdate(); }, 3000); + + window.onbeforeunload = function removePipelineInterval() { + clearInterval(this.intervalId); + }; } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 7748282996d7754a342b5956b1a277a54a9b26f5 Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 12 Nov 2016 02:00:35 -0700 Subject: better comment [ci skip] --- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 2fbfa486f88..159c7585580 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -21,8 +21,8 @@ }, }, computed: { + // need started_at or created_at for finish and running finishdate() { - // need started_at or created_at here const date = new Date( new Date( this.pipeline.details.finished_at @@ -35,7 +35,6 @@ ); }, runningdate() { - // need started_at or created_at at here const date = new Date( new Date().getTime() - new Date(this.pipeline.started_at).getTime() ); -- cgit v1.2.1 From a3c93ee8ad2caae0d7ace8c4a0c796840209f20e Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 12 Nov 2016 03:21:00 -0700 Subject: waiting for api changes --- .../vue_pipelines_index/branch_commit.js.es6 | 8 ++++++-- .../javascripts/vue_pipelines_index/time_ago.js.es6 | 18 ++++++++---------- 2 files changed, 14 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 index 43bad6e36e7..b594d08e96d 100644 --- a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 @@ -11,13 +11,17 @@ alt() { return `${this.pipeline.commit.author_name}'s avatar`; }, + avatarUrl() { + const author = this.pipeline.commit.author; + if (author) return author.avatar_url; + return this.pipeline.commit.author_gravatar_url; + }, }, template: `
    -     - {{duration}} + {{duration()}}

    -

    +

    -- cgit v1.2.1 From 4f290de7c14131f9241834136ae4f0b7de0aa394 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 14 Nov 2016 09:58:20 -0700 Subject: add cancelled icon --- app/assets/javascripts/vue_icons/index.js.es6 | 11 +++++++++++ .../javascripts/vue_pipelines_index/stage.js.es6 | 2 ++ .../vue_pipelines_status/canceled.js.es6 | 23 ++++++++++++++++++++++ .../javascripts/vue_pipelines_status/index.js.es6 | 1 + .../javascripts/vue_pipelines_status/status.js.es6 | 6 ++++++ 5 files changed, 43 insertions(+) create mode 100644 app/assets/javascripts/vue_pipelines_status/canceled.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_icons/index.js.es6 b/app/assets/javascripts/vue_icons/index.js.es6 index 66b4a58a4c0..b7da80a6377 100644 --- a/app/assets/javascripts/vue_icons/index.js.es6 +++ b/app/assets/javascripts/vue_icons/index.js.es6 @@ -55,4 +55,15 @@ `, }); + + gl.VueCanceledIcon = Vue.extend({ + template: ` + + + + + + + `, + }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 8a77f213b7f..e5f9178a796 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -9,6 +9,7 @@ 'failed-icon': gl.VueFailedIcon, 'success-icon': gl.VueSuccessIcon, 'created-icon': gl.VueCreatedIcon, + 'canceled-icon': gl.VueCanceledIcon, }, props: ['stage'], computed: { @@ -30,6 +31,7 @@ +     `, }); diff --git a/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 b/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 new file mode 100644 index 00000000000..ed677fea93c --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 @@ -0,0 +1,23 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueCanceledScope = Vue.extend({ + components: { + 'vue-canceled-icon': gl.VueCanceledIcon, + }, + props: [ + 'pipeline', + ], + template: ` + + + + +  cancelled + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/index.js.es6 b/app/assets/javascripts/vue_pipelines_status/index.js.es6 index cea02b5d6af..ab2755eb323 100644 --- a/app/assets/javascripts/vue_pipelines_status/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/index.js.es6 @@ -1,4 +1,5 @@ //= require ./pending.js.es6 //= require ./failed.js.es6 //= require ./running.js.es6 +//= require ./canceled.js.es6 //= require ./status.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 index 0a722ba7ca5..8732337c3ef 100644 --- a/app/assets/javascripts/vue_pipelines_status/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/status.js.es6 @@ -8,6 +8,7 @@ 'vue-pending-scope': gl.VuePendingScope, 'vue-failed-scope': gl.VueFailedScope, 'vue-created-scope': gl.VueCreatedScope, + 'vue-canceled-scope': gl.VueCanceledScope, }, props: [ 'pipeline', @@ -34,6 +35,11 @@ :pipeline='pipeline' > + + `, }); -- cgit v1.2.1 From 2d1effb11e74883ed16e3577fcdfc05d2692c12e Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 14 Nov 2016 10:08:14 -0700 Subject: change class name for css to take effect --- app/assets/javascripts/vue_pipelines_status/canceled.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 b/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 index ed677fea93c..20ca8ad5ebb 100644 --- a/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 @@ -12,9 +12,9 @@ template: ` - + -  cancelled +  canceled -- cgit v1.2.1 From 40a503650e319cefb285c63f8cbfc39f3422a837 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 14 Nov 2016 12:43:08 -0700 Subject: more progress --- app/assets/javascripts/vue_icons/index.js.es6 | 21 ++++++++++++++++++++ .../vue_pipelines_index/pipeline_actions.js.es6 | 2 +- .../vue_pipelines_index/time_ago.js.es6 | 1 - .../javascripts/vue_pipelines_status/index.js.es6 | 2 ++ .../vue_pipelines_status/skipped.js.es6 | 23 ++++++++++++++++++++++ .../javascripts/vue_pipelines_status/status.js.es6 | 6 ++++++ .../vue_pipelines_status/unstable.js.es6 | 23 ++++++++++++++++++++++ 7 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/vue_pipelines_status/skipped.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/unstable.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_icons/index.js.es6 b/app/assets/javascripts/vue_icons/index.js.es6 index b7da80a6377..84a19348862 100644 --- a/app/assets/javascripts/vue_icons/index.js.es6 +++ b/app/assets/javascripts/vue_icons/index.js.es6 @@ -66,4 +66,25 @@ `, }); + + gl.VueSkippedIcon = Vue.extend({ + template: ` + + + + + + `, + }); + + gl.VueUnstableIcon = Vue.extend({ + template: ` + + + + + + { + gl.VueSkippedScope = Vue.extend({ + components: { + 'vue-skipped-icon': gl.VueSkippedIcon, + }, + props: [ + 'pipeline', + ], + template: ` + + + + +  skipped + + + + `, + }); +})(window.gl || (window.gl = {})); \ No newline at end of file diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 index 8732337c3ef..dfef19e21da 100644 --- a/app/assets/javascripts/vue_pipelines_status/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/status.js.es6 @@ -9,6 +9,7 @@ 'vue-failed-scope': gl.VueFailedScope, 'vue-created-scope': gl.VueCreatedScope, 'vue-canceled-scope': gl.VueCanceledScope, + 'vue-unstable-scope': gl.VueUnstableScope, }, props: [ 'pipeline', @@ -40,6 +41,11 @@ :pipeline='pipeline' > + + `, }); diff --git a/app/assets/javascripts/vue_pipelines_status/unstable.js.es6 b/app/assets/javascripts/vue_pipelines_status/unstable.js.es6 new file mode 100644 index 00000000000..27fd29b9d80 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/unstable.js.es6 @@ -0,0 +1,23 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueUnstableScope = Vue.extend({ + components: { + 'vue-unstable-icon': gl.VueUnstableIcon, + }, + props: [ + 'pipeline', + ], + template: ` + + + + +  unstable + + + + `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From fa1a99a17388c3880e84385255566d776960cf4c Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 14 Nov 2016 12:44:50 -0700 Subject: rid of extra api calls --- .../javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 9 --------- 1 file changed, 9 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index d1519ec83f7..223fcce62d8 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -10,14 +10,6 @@ download(name) { return `Download ${name} artifacts`; }, - // retry(e) { - // e.preventDefault(); - // this.$http.post(this.pipeline.retry_url, { - // pipeline: { id: this.pipeline.id }, - // }) - // .then(() => {}) - // .catch(() => new Flash('Something went wrong on our end.')); - // }, }, template: ` @@ -78,7 +70,6 @@
    - Date: Tue, 15 Nov 2016 07:53:46 -0700 Subject: prep for testing - update all pipeline api response attributes --- .../javascripts/vue_pipelines_index/index.js.es6 | 2 +- .../vue_pipelines_index/pipeline_actions.js.es6 | 4 ++-- .../javascripts/vue_pipelines_index/store.js.es6 | 19 ++++++++++++++++++- 3 files changed, 21 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index ab53b12d3d0..90c8b47062c 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -1,5 +1,5 @@ /* global Vue, VueResource, gl */ -/* eslint-disable no-bitwise*/ +/* eslint-disable no-bitwise, no-plusplus*/ //= require vue-resource diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 223fcce62d8..1e81862ec83 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -33,7 +33,7 @@ diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index d8058386898..c1c153b0604 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -35,7 +35,7 @@ gl.PipelineStore = class { fetchDataLoop(Vue, pageNum, url) { Vue.activeResources = 0; - const updateNumberOfPipelines = (total, running) => { + const updatePipelineNums = (total, running) => { document.querySelector('.js-totalbuilds-count').innerHTML = total; document.querySelector('.js-running-count').innerHTML = running; }; @@ -55,7 +55,7 @@ Vue.set(this, 'updatedAt', res.updated_at); Vue.set(this, 'pipelines', res.pipelines); Vue.set(this, 'count', res.count); - updateNumberOfPipelines(this.count.all, this.count.running_or_pending); + updatePipelineNums(this.count.all, this.count.running_or_pending); this.pageRequest = false; Vue.activeResources -= 1; }, () => new Flash( @@ -70,7 +70,7 @@ Vue.set(this, 'updatedAt', res.updated_at); Vue.set(this, 'pipelines', p.updatePipelines(res)); Vue.set(this, 'count', res.count); - updateNumberOfPipelines(this.count.all, this.count.running_or_pending); + updatePipelineNums(this.count.all, this.count.running_or_pending); Vue.activeResources -= 1; }, () => new Flash( 'Something went wrong on our end.' -- cgit v1.2.1 From fc5eb253dbd1fac0674c1a164847dabfd1229c9e Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 17 Nov 2016 12:06:45 -0700 Subject: refactor store --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index c1c153b0604..8226aef9c05 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -34,7 +34,13 @@ gl.PipelineStore = class { fetchDataLoop(Vue, pageNum, url) { - Vue.activeResources = 0; + const setVueResources = () => { Vue.activeResources = 1; }; + const resetVueResources = () => { Vue.activeResources = 0; }; + const addToVueResources = () => { Vue.activeResources += 1; }; + const subtractFromVueResources = () => { Vue.activeResources -= 1; }; + + resetVueResources(); // set Vue.resources to 0 + const updatePipelineNums = (total, running) => { document.querySelector('.js-totalbuilds-count').innerHTML = total; document.querySelector('.js-running-count').innerHTML = running; @@ -42,9 +48,9 @@ const resourceChecker = () => { if (Vue.activeResources === 0) { - Vue.activeResources = 1; + setVueResources(); } else { - Vue.activeResources += 1; + addToVueResources(); } }; @@ -57,7 +63,7 @@ Vue.set(this, 'count', res.count); updatePipelineNums(this.count.all, this.count.running_or_pending); this.pageRequest = false; - Vue.activeResources -= 1; + subtractFromVueResources(); }, () => new Flash( 'Something went wrong on our end.' )); @@ -71,7 +77,7 @@ Vue.set(this, 'pipelines', p.updatePipelines(res)); Vue.set(this, 'count', res.count); updatePipelineNums(this.count.all, this.count.running_or_pending); - Vue.activeResources -= 1; + subtractFromVueResources(); }, () => new Flash( 'Something went wrong on our end.' )); -- cgit v1.2.1 From 398be9cadd5c50c1de3d31facba7e62d54437f37 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 18 Nov 2016 08:10:32 -0600 Subject: performance and diff updates --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 8226aef9c05..053a068396f 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -7,7 +7,7 @@ this.pipelines = pipelines; this.updateClone = (update, newPipe) => { update.forEach((pipe) => { - if (pipe.id === newPipe.id) pipe = Object.assign(pipe, newPipe); + if (pipe.id === newPipe.id) pipe = Object.assign({}, pipe, newPipe); }); }; } @@ -20,7 +20,7 @@ } updatePipelines(apiResponse) { - const update = this.pipelines.map(e => e); + const update = this.pipelines.slice(0); apiResponse.pipelines.forEach((newPipe) => { if (newPipe.commit) { update.unshift(newPipe); -- cgit v1.2.1 From 061b4dd82a0736cf9b92d4633c3ef5af61a11cc3 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 18 Nov 2016 11:33:51 -0600 Subject: much more performant pageSlicer - [ci skip] --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 053a068396f..396114e05b6 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -13,10 +13,8 @@ } currentPageSlicer(update) { - const length = update.length; - if (this.pipelines.length === update.length) return update; if (update.length <= 30) return update; - return update.slice(0, (length - 1)); + return update.slice(0, 29); } updatePipelines(apiResponse) { -- cgit v1.2.1 From 758cdf54fe61ff7e62c9e3aac70819fb824a8b5c Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 18 Nov 2016 11:35:35 -0600 Subject: no this - define in constructor - [ci skip] --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 396114e05b6..ffe6292782a 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -10,11 +10,10 @@ if (pipe.id === newPipe.id) pipe = Object.assign({}, pipe, newPipe); }); }; - } - - currentPageSlicer(update) { - if (update.length <= 30) return update; - return update.slice(0, 29); + this.currentPageSlicer = (update) => { + if (update.length <= 30) return update; + return update.slice(0, 29); + }; } updatePipelines(apiResponse) { -- cgit v1.2.1 From d0a5428a3865f59814528fd950a1e00ccb65af3d Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 18 Nov 2016 16:26:49 -0600 Subject: constant variable hardcoding --- app/assets/javascripts/vue_pagination/index.js.es6 | 32 ++++++++++++++-------- .../javascripts/vue_pipelines_index/index.js.es6 | 2 +- .../vue_pipelines_index/pipelines.js.es6 | 18 ++++++++---- .../javascripts/vue_pipelines_index/store.js.es6 | 7 +++-- 4 files changed, 39 insertions(+), 20 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 5f844ae8923..4f83671e83d 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -2,6 +2,14 @@ /* eslint-disable no-param-reassign, no-plusplus */ ((gl) => { + const PAGINATION_SIZE = 30; + const PAGINATION_UI_BUTTON_LIMIT = 4; + const SPREAD = '...'; + const PREV = 'Prev'; + const NEXT = 'Next'; + const FIRST = '<< First'; + const LAST = 'Last >>'; + gl.VueGlPagination = Vue.extend({ props: [ 'changepage', @@ -10,40 +18,42 @@ ], computed: { last() { - return Math.ceil(+this.count / 30); + return Math.ceil(+this.count / PAGINATION_SIZE); }, getItems() { const total = +this.last; const page = +this.pagenum; const items = []; - if (page > 1) items.push({ title: '<< First', where: 1 }); + if (page > 1) items.push({ title: FIRST, where: 1 }); if (page > 1) { - items.push({ title: 'Prev', where: page - 1 }); + items.push({ title: PREV, where: page - 1 }); } else { - items.push({ title: 'Prev', where: page - 1, disabled: true }); + items.push({ title: PREV, where: page - 1, disabled: true }); } - if (page > 6) items.push({ title: '...', separator: true }); + if (page > 6) items.push({ title: SPREAD, separator: true }); - const start = Math.max(page - 4, 1); - const end = Math.min(page + 4, total); + const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1); + const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total); for (let i = start; i <= end; i++) { const isActive = i === page; items.push({ title: i, active: isActive, where: i }); } - if (total - page > 4) items.push({ title: '...', separator: true }); + if (total - page > PAGINATION_UI_BUTTON_LIMIT) { + items.push({ title: SPREAD, separator: true }); + } if (page === total) { - items.push({ title: 'Next', where: page + 1, disabled: true }); + items.push({ title: NEXT, where: page + 1, disabled: true }); } else if (total - page >= 1) { - items.push({ title: 'Next', where: page + 1 }); + items.push({ title: NEXT, where: page + 1 }); } - if (total - page >= 1) items.push({ title: 'Last >>', where: total }); + if (total - page >= 1) items.push({ title: LAST, where: total }); return items; }, diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 57afce34c2b..1584345098c 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -29,7 +29,7 @@ store: new gl.PipelineStore(), }, components: { - 'vue-pipelines': gl.VuePipeLines, + 'vue-pipelines': gl.VuePipelines, }, template: `
    diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index b86a4c6f81b..09c480457c4 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -2,7 +2,13 @@ /* eslint-disable no-param-reassign, no-bitwise*/ ((gl) => { - gl.VuePipeLines = Vue.extend({ + const SPREAD = '...'; + const PREV = 'Prev'; + const NEXT = 'Next'; + const FIRST = '<< First'; + const LAST = 'Last >>'; + + gl.VuePipelines = Vue.extend({ components: { runningPipeline: gl.VueRunningPipeline, pipelineActions: gl.VuePipelineActions, @@ -41,12 +47,12 @@ methods: { changepage(e, last) { const text = e.target.innerText; - if (text === '...') return; + if (text === SPREAD) return; if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text; - if (text === 'Last >>') this.pagenum = last; - if (text === 'Next') this.pagenum = +this.pagenum + 1; - if (text === 'Prev') this.pagenum = +this.pagenum - 1; - if (text === '<< First') this.pagenum = 1; + if (text === LAST) this.pagenum = last; + if (text === NEXT) this.pagenum = +this.pagenum + 1; + if (text === PREV) this.pagenum = +this.pagenum - 1; + if (text === FIRST) this.pagenum = 1; window.history.pushState({}, null, `?p=${this.pagenum}`); clearInterval(this.intervalId); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index ffe6292782a..ada99b67f26 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,6 +2,9 @@ /* eslint-disable no-param-reassign */ ((gl) => { + const PAGINATION_LIMIT = 31; + const SLICE_LIMIT = 29; + class PipelineUpdater { constructor(pipelines) { this.pipelines = pipelines; @@ -11,8 +14,8 @@ }); }; this.currentPageSlicer = (update) => { - if (update.length <= 30) return update; - return update.slice(0, 29); + if (update.length < PAGINATION_LIMIT) return update; + return update.slice(0, SLICE_LIMIT); }; } -- cgit v1.2.1 From ff4edf37f3d8e7742292db6d5e50ba6f599950ff Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 18 Nov 2016 16:33:41 -0600 Subject: this.count as only param for updatePipelineNums - [ci skip] --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index ada99b67f26..0bf59823c11 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -41,8 +41,11 @@ resetVueResources(); // set Vue.resources to 0 - const updatePipelineNums = (total, running) => { - document.querySelector('.js-totalbuilds-count').innerHTML = total; + const updatePipelineNums = (count) => { + const { all } = count; + // cannot define non camel case, so not using destructuring for running + const running = count.running_or_pending; + document.querySelector('.js-totalbuilds-count').innerHTML = all; document.querySelector('.js-running-count').innerHTML = running; }; @@ -61,7 +64,7 @@ Vue.set(this, 'updatedAt', res.updated_at); Vue.set(this, 'pipelines', res.pipelines); Vue.set(this, 'count', res.count); - updatePipelineNums(this.count.all, this.count.running_or_pending); + updatePipelineNums(this.count); this.pageRequest = false; subtractFromVueResources(); }, () => new Flash( @@ -76,7 +79,7 @@ Vue.set(this, 'updatedAt', res.updated_at); Vue.set(this, 'pipelines', p.updatePipelines(res)); Vue.set(this, 'count', res.count); - updatePipelineNums(this.count.all, this.count.running_or_pending); + updatePipelineNums(this.count); subtractFromVueResources(); }, () => new Flash( 'Something went wrong on our end.' -- cgit v1.2.1 From cb35c5e1c9172a566e88ecc3be13fd35b6c3b8d0 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 22 Nov 2016 13:36:45 -0600 Subject: stashing for now --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 2 ++ .../javascripts/vue_pipelines_index/pipelines.js.es6 | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 1584345098c..2bd8d5d327f 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -1,6 +1,8 @@ /* global Vue, VueResource, gl */ /* eslint-disable no-bitwise, no-plusplus*/ +/*= require vue_common_component/commit */ + //= require vue-resource //= require ./object_assign.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 09c480457c4..fd843844c7c 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -13,7 +13,7 @@ runningPipeline: gl.VueRunningPipeline, pipelineActions: gl.VuePipelineActions, stages: gl.VueStages, - branchCommit: gl.VueBranchCommit, + commit: gl.CommitComponent, pipelineUrl: gl.VuePipelineUrl, pipelineHead: gl.VuePipelineHead, glPagination: gl.VueGlPagination, @@ -59,6 +59,11 @@ this.pageRequest = true; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, + author(pipeline) { + const author = pipeline.commit.author; + if (author) return author; + return ({}); + }, }, template: `
    @@ -72,7 +77,15 @@ - + + -- cgit v1.2.1 From 76ef4f02c36a3ca8f118e57d47f795000fa481f5 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 22 Nov 2016 15:36:21 -0600 Subject: diff updates from API to DOM --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 0bf59823c11..16c4197dd66 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -8,27 +8,20 @@ class PipelineUpdater { constructor(pipelines) { this.pipelines = pipelines; - this.updateClone = (update, newPipe) => { - update.forEach((pipe) => { - if (pipe.id === newPipe.id) pipe = Object.assign({}, pipe, newPipe); - }); - }; - this.currentPageSlicer = (update) => { - if (update.length < PAGINATION_LIMIT) return update; - return update.slice(0, SLICE_LIMIT); - }; } updatePipelines(apiResponse) { const update = this.pipelines.slice(0); - apiResponse.pipelines.forEach((newPipe) => { + apiResponse.pipelines.forEach((newPipe, i) => { if (newPipe.commit) { update.unshift(newPipe); } else { - this.updateClone(update, newPipe); + const newMerge = Object.assign({}, update[i], newPipe); + update[i] = newMerge; } }); - return this.currentPageSlicer(update); + if (update.length < PAGINATION_LIMIT) return update; + return update.slice(0, SLICE_LIMIT); } } -- cgit v1.2.1 From d15a0b68643f09be4f8e61b45c479a200575c245 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 22 Nov 2016 15:37:51 -0600 Subject: slight cleanup [ci skip] --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 16c4197dd66..836a6be9a40 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -36,7 +36,6 @@ const updatePipelineNums = (count) => { const { all } = count; - // cannot define non camel case, so not using destructuring for running const running = count.running_or_pending; document.querySelector('.js-totalbuilds-count').innerHTML = all; document.querySelector('.js-running-count').innerHTML = running; -- cgit v1.2.1 From ce2750e095ededa37087e2ba10f75ae7eb465584 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 23 Nov 2016 10:52:21 -0600 Subject: refactor - rename - simple behavior for time_ago --- .../vue_pipelines_index/pipelines.js.es6 | 2 +- .../javascripts/vue_pipelines_index/store.js.es6 | 25 +++++++++++----------- .../vue_pipelines_index/time_ago.js.es6 | 17 +++++++++++---- 3 files changed, 27 insertions(+), 17 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index fd843844c7c..1c8e98f3865 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -78,7 +78,7 @@ { if (newPipe.commit) { - update.unshift(newPipe); + diffData.unshift(newPipe); } else { - const newMerge = Object.assign({}, update[i], newPipe); - update[i] = newMerge; + const newMerge = Object.assign({}, diffData[i], newPipe); + diffData[i] = newMerge; } }); - if (update.length < PAGINATION_LIMIT) return update; - return update.slice(0, SLICE_LIMIT); + if (diffData.length < PAGINATION_LIMIT) return diffData; + return diffData.slice(0, SLICE_LIMIT); } } @@ -36,6 +36,7 @@ const updatePipelineNums = (count) => { const { all } = count; + // cannot define non camel case, so not using destructuring for running const running = count.running_or_pending; document.querySelector('.js-totalbuilds-count').innerHTML = all; document.querySelector('.js-running-count').innerHTML = running; @@ -67,9 +68,9 @@ this.$http.get(`${url}?page=${pageNum}&updated_at=${this.updatedAt}`) .then((response) => { const res = JSON.parse(response.body); - const p = new PipelineUpdater(this.pipelines); + const p = new RealtimePaginationUpdater(this.pipelines); Vue.set(this, 'updatedAt', res.updated_at); - Vue.set(this, 'pipelines', p.updatePipelines(res)); + Vue.set(this, 'pipelines', p.updatePageDiff(res)); Vue.set(this, 'count', res.count); updatePipelineNums(this.count); subtractFromVueResources(); diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 8eb25efe344..1d0da41ebbd 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -5,6 +5,11 @@ props: [ 'pipeline', ], + computed: { + localTimeFinished() { + return gl.utils.formatDate(this.pipeline.details.finished_at); + }, + }, methods: { formatSection(section) { if (`${section}`.split('').length <= 1) return `0${section}`; @@ -58,13 +63,17 @@ }; }, duration() { - if (this.timeStopped()) return this.finishdate(); - return this.runningdate(); + // if (this.timeStopped()) return this.finishdate(); + // return this.runningdate(); + const { duration } = this.pipeline.details; + if (duration === 0) return '00:00:00'; + if (duration !== null) return duration; + return false; }, }, template: ` -

    +

    {{timeStopped().words}} -- cgit v1.2.1 From 8a2be66b04c1bd6368425d75239ebf0611a07f0f Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 23 Nov 2016 10:54:52 -0600 Subject: clean up on time_ago [ci skip] --- .../vue_pipelines_index/time_ago.js.es6 | 35 ---------------------- 1 file changed, 35 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 1d0da41ebbd..496065dbedc 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -11,39 +11,6 @@ }, }, methods: { - formatSection(section) { - if (`${section}`.split('').length <= 1) return `0${section}`; - return `${section}`; - }, - hours(date) { - return this.formatSection(date.getHours()); - }, - minutes(date) { - return this.formatSection(date.getMinutes()); - }, - seconds(date) { - return this.formatSection(date.getSeconds()); - }, - finishdate() { - const date = new Date( - new Date( - this.pipeline.details.finished_at - ).getTime() - new Date( - this.pipeline.created_at - ).getTime() - ); - return ( - `${this.hours(date)}:${this.minutes(date)}:${this.seconds(date)}` - ); - }, - runningdate() { - const date = new Date( - new Date().getTime() - new Date(this.pipeline.created_at).getTime() - ); - return ( - `${this.hours(date)}:${this.minutes(date)}:${this.seconds(date)}` - ); - }, timeStopped() { const options = { weekday: 'long', @@ -63,8 +30,6 @@ }; }, duration() { - // if (this.timeStopped()) return this.finishdate(); - // return this.runningdate(); const { duration } = this.pipeline.details; if (duration === 0) return '00:00:00'; if (duration !== null) return duration; -- cgit v1.2.1 From 8856d5a869939f8c5fdba827eb1c02d68bd6b162 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 29 Nov 2016 09:43:08 -0600 Subject: turn off diff updates - wrap commit comp in td --- .../vue_pipelines_index/pipelines.js.es6 | 22 ++++++++++++---------- .../javascripts/vue_pipelines_index/store.js.es6 | 20 ++++++++++---------- 2 files changed, 22 insertions(+), 20 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 1c8e98f3865..006e38505e2 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -55,7 +55,7 @@ if (text === FIRST) this.pagenum = 1; window.history.pushState({}, null, `?p=${this.pagenum}`); - clearInterval(this.intervalId); + // clearInterval(this.intervalId); this.pageRequest = true; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, @@ -77,15 +77,17 @@
    - - + + + + diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index c5eca3c1289..a46bdc47491 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -81,17 +81,17 @@ resourceChecker(); goFetch(); - this.intervalId = setInterval(() => { - if (this.updatedAt) { - resourceChecker(); - if (Vue.activeResources > 1) return; - goUpdate(); - } - }, 3000); + // this.intervalId = setInterval(() => { + // if (this.updatedAt) { + // resourceChecker(); + // if (Vue.activeResources > 1) return; + // goUpdate(); + // } + // }, 3000); - window.onbeforeunload = function removePipelineInterval() { - clearInterval(this.intervalId); - }; + // window.onbeforeunload = function removePipelineInterval() { + // clearInterval(this.intervalId); + // }; } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 1f50b3fed927bca38335bcd77b9ea69e82a0d2c1 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 29 Nov 2016 19:19:03 -0600 Subject: render valid user props for pipeline user --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index 94c51ad77fa..e11f68bbd36 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -11,7 +11,8 @@ ], computed: { user() { - if (!this.pipeline.user === null) return true; + // debugger + if (this.pipeline.user) return true; return false; }, }, @@ -23,14 +24,14 @@
    by Date: Tue, 29 Nov 2016 19:19:22 -0600 Subject: rid off debugger comment [ci skip] --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index e11f68bbd36..d9602b4209d 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -11,7 +11,6 @@ ], computed: { user() { - // debugger if (this.pipeline.user) return true; return false; }, -- cgit v1.2.1 From 649d1eb23073543ceed995124c1cb67aabb8bfc2 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 29 Nov 2016 20:44:00 -0600 Subject: new line for skipped - use logic gate for REALTIME true or false --- .../vue_pipelines_index/pipelines.js.es6 | 3 ++- .../javascripts/vue_pipelines_index/store.js.es6 | 23 ++++++++++++---------- .../vue_pipelines_status/skipped.js.es6 | 2 +- 3 files changed, 16 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 006e38505e2..477d59ad2c3 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -2,6 +2,7 @@ /* eslint-disable no-param-reassign, no-bitwise*/ ((gl) => { + const REALTIME = false; const SPREAD = '...'; const PREV = 'Prev'; const NEXT = 'Next'; @@ -55,7 +56,7 @@ if (text === FIRST) this.pagenum = 1; window.history.pushState({}, null, `?p=${this.pagenum}`); - // clearInterval(this.intervalId); + if (REALTIME) clearInterval(this.intervalId); this.pageRequest = true; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index a46bdc47491..3ec627d24d0 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,6 +2,7 @@ /* eslint-disable no-param-reassign */ ((gl) => { + const REALTIME = false; const PAGINATION_LIMIT = 31; const SLICE_LIMIT = 29; @@ -81,17 +82,19 @@ resourceChecker(); goFetch(); - // this.intervalId = setInterval(() => { - // if (this.updatedAt) { - // resourceChecker(); - // if (Vue.activeResources > 1) return; - // goUpdate(); - // } - // }, 3000); + if (REALTIME) { + this.intervalId = setInterval(() => { + if (this.updatedAt) { + resourceChecker(); + if (Vue.activeResources > 1) return; + goUpdate(); + } + }, 3000); - // window.onbeforeunload = function removePipelineInterval() { - // clearInterval(this.intervalId); - // }; + window.onbeforeunload = function removePipelineInterval() { + clearInterval(this.intervalId); + }; + } } }; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 b/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 index 92d53c4a87e..da904010607 100644 --- a/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 @@ -20,4 +20,4 @@ `, }); -})(window.gl || (window.gl = {})); \ No newline at end of file +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From d11a298cd5ff9888f15e14efe2313f1445051618 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 30 Nov 2016 02:23:51 -0600 Subject: on focus - blur - and page closed -- intervals are taken care of for time ago and realtime --- .../vue_pipelines_index/pipelines.js.es6 | 10 +++++- .../javascripts/vue_pipelines_index/store.js.es6 | 35 ++++++++++++++----- .../vue_pipelines_index/time_ago.js.es6 | 40 +++++++++++++++++----- 3 files changed, 67 insertions(+), 18 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 477d59ad2c3..b4cdc5080a6 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -24,6 +24,7 @@ data() { return { pipelines: [], + allTimeIntervals: [], intervalId: '', updatedAt: '', pagenum: 1, @@ -65,6 +66,9 @@ if (author) return author; return ({}); }, + addTimeInterval(id, that) { + this.allTimeIntervals.push({ id: id, component: that }); + }, }, template: `

    @@ -90,7 +94,11 @@ - + + diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 3ec627d24d0..359eab3f6c8 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,7 +2,7 @@ /* eslint-disable no-param-reassign */ ((gl) => { - const REALTIME = false; + const REALTIME = true; const PAGINATION_LIMIT = 31; const SLICE_LIMIT = 29; @@ -33,11 +33,10 @@ const addToVueResources = () => { Vue.activeResources += 1; }; const subtractFromVueResources = () => { Vue.activeResources -= 1; }; - resetVueResources(); // set Vue.resources to 0 + resetVueResources(); const updatePipelineNums = (count) => { const { all } = count; - // cannot define non camel case, so not using destructuring for running const running = count.running_or_pending; document.querySelector('.js-totalbuilds-count').innerHTML = all; document.querySelector('.js-running-count').innerHTML = running; @@ -82,7 +81,7 @@ resourceChecker(); goFetch(); - if (REALTIME) { + const poller = () => { this.intervalId = setInterval(() => { if (this.updatedAt) { resourceChecker(); @@ -90,11 +89,31 @@ goUpdate(); } }, 3000); + }; + + if (REALTIME) poller(); + + const removePipelineInterval = () => { + this.allTimeIntervals.forEach(e => clearInterval(e.id)); + if (REALTIME) clearInterval(this.intervalId); + }; + + const startIntervalLoops = () => { + this.allTimeIntervals.forEach(e => e.component.startInterval()); + if (REALTIME) poller(); + }; - window.onbeforeunload = function removePipelineInterval() { - clearInterval(this.intervalId); - }; - } + window.onbeforeunload = function onClose() { + removePipelineInterval(); + }; + + window.onblur = function remove() { + removePipelineInterval(); + }; + + window.onfocus = function start() { + startIntervalLoops(); + }; } }; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 496065dbedc..505b1ee3490 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -1,17 +1,35 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign */ ((gl) => { + const REALTIME = false; + gl.VueTimeAgo = Vue.extend({ + data() { + return { + timeInterval: '', + currentTime: new Date(), + }; + }, props: [ 'pipeline', + 'addTimeInterval', ], + created() { + if (!REALTIME) { + this.timeInterval = setInterval(() => { + this.currentTime = new Date(); + }, 1000); + + this.addTimeInterval(this.timeInterval, this); + } + }, computed: { localTimeFinished() { return gl.utils.formatDate(this.pipeline.details.finished_at); }, - }, - methods: { timeStopped() { + const changeTime = this.currentTime; + const options = { weekday: 'long', year: 'numeric', @@ -23,18 +41,22 @@ const finished = this.pipeline.details.finished_at; - if (!finished) return false; - - return { - words: gl.utils.getTimeago().format(finished), - }; + if (!finished && changeTime) return false; + return ({ words: gl.utils.getTimeago().format(finished) }); }, + }, + methods: { duration() { const { duration } = this.pipeline.details; if (duration === 0) return '00:00:00'; if (duration !== null) return duration; return false; }, + startInterval() { + this.timeInterval = setInterval(() => { + this.currentTime = new Date(); + }, 1000); + }, }, template: ` @@ -51,7 +73,7 @@ {{duration()}}

    -

    +

    -- cgit v1.2.1 From 874a7e8d20dfead42ae957ea8746b20a1446dcea Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 30 Nov 2016 02:27:05 -0600 Subject: turned off REALTIME - time ago blur and focus still good --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 359eab3f6c8..6d023a45b21 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,7 +2,7 @@ /* eslint-disable no-param-reassign */ ((gl) => { - const REALTIME = true; + const REALTIME = false; const PAGINATION_LIMIT = 31; const SLICE_LIMIT = 29; -- cgit v1.2.1 From fd9adc78824500928465d82c691fdd76e290672d Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 30 Nov 2016 02:30:03 -0600 Subject: eslint calm [ci skip] --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index b4cdc5080a6..6ef335ab398 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -67,7 +67,7 @@ return ({}); }, addTimeInterval(id, that) { - this.allTimeIntervals.push({ id: id, component: that }); + this.allTimeIntervals.push({ id, component: that }); }, }, template: ` -- cgit v1.2.1 From 81ae6c7d0a38bb66289c5d83239255ce5cdfcea5 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 30 Nov 2016 09:29:31 -0700 Subject: fire timeago interval no matter what --- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 505b1ee3490..c078e9459f0 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -1,8 +1,6 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign */ ((gl) => { - const REALTIME = false; - gl.VueTimeAgo = Vue.extend({ data() { return { @@ -15,13 +13,11 @@ 'addTimeInterval', ], created() { - if (!REALTIME) { - this.timeInterval = setInterval(() => { - this.currentTime = new Date(); - }, 1000); + this.timeInterval = setInterval(() => { + this.currentTime = new Date(); + }, 1000); - this.addTimeInterval(this.timeInterval, this); - } + this.addTimeInterval(this.timeInterval, this); }, computed: { localTimeFinished() { -- cgit v1.2.1 From 6eb3728490cbf33ea3e401653a5da0ab290c6f52 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 30 Nov 2016 09:30:06 -0700 Subject: format - [ci skip] --- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 4 ---- 1 file changed, 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index c078e9459f0..de6eec9bc5b 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -25,18 +25,14 @@ }, timeStopped() { const changeTime = this.currentTime; - const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric', }; - options.timeZoneName = 'short'; - const finished = this.pipeline.details.finished_at; - if (!finished && changeTime) return false; return ({ words: gl.utils.getTimeago().format(finished) }); }, -- cgit v1.2.1 From 3acee982037b1328df29dc867c83b83746f33e44 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 1 Dec 2016 15:02:26 -0700 Subject: update styling for loading icon --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 4 ++-- app/assets/stylesheets/pages/pipelines.scss | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 6ef335ab398..61af9799ca4 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -72,7 +72,7 @@ }, template: `
    -
    +
    @@ -104,7 +104,7 @@
    -
    +
    Date: Thu, 1 Dec 2016 16:07:30 -0700 Subject: get commit component to render needed info - work on SVG loading next --- .../vue_pipelines_index/pipelines.js.es6 | 16 +++++-- .../javascripts/vue_pipelines_index/store.js.es6 | 54 +--------------------- 2 files changed, 13 insertions(+), 57 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 61af9799ca4..e02c7dc528e 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -62,9 +62,17 @@ this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, author(pipeline) { - const author = pipeline.commit.author; + const { commit } = pipeline; + const author = commit.author; if (author) return author; - return ({}); + + const nonUser = { + avatar_url: commit.author_gravatar_url, + web_url: `mailto:${commit.author_email}`, + username: commit.author_name, + }; + + return nonUser; }, addTimeInterval(id, that) { this.allTimeIntervals.push({ id, component: that }); @@ -85,7 +93,7 @@
    { - const REALTIME = false; - const PAGINATION_LIMIT = 31; - const SLICE_LIMIT = 29; - - class RealtimePaginationUpdater { - constructor(pageData) { - this.pageData = pageData; - } - - updatePageDiff(apiResponse) { - const diffData = this.pageData.slice(0); - apiResponse.pipelines.forEach((newPipe, i) => { - if (newPipe.commit) { - diffData.unshift(newPipe); - } else { - const newMerge = Object.assign({}, diffData[i], newPipe); - diffData[i] = newMerge; - } - }); - if (diffData.length < PAGINATION_LIMIT) return diffData; - return diffData.slice(0, SLICE_LIMIT); - } - } - gl.PipelineStore = class { fetchDataLoop(Vue, pageNum, url) { const setVueResources = () => { Vue.activeResources = 1; }; @@ -61,46 +37,18 @@ this.pageRequest = false; subtractFromVueResources(); }, () => new Flash( - 'Something went wrong on our end.' - )); - - const goUpdate = () => - this.$http.get(`${url}?page=${pageNum}&updated_at=${this.updatedAt}`) - .then((response) => { - const res = JSON.parse(response.body); - const p = new RealtimePaginationUpdater(this.pipelines); - Vue.set(this, 'updatedAt', res.updated_at); - Vue.set(this, 'pipelines', p.updatePageDiff(res)); - Vue.set(this, 'count', res.count); - updatePipelineNums(this.count); - subtractFromVueResources(); - }, () => new Flash( - 'Something went wrong on our end.' + 'Something went wrong on our end.', )); resourceChecker(); goFetch(); - const poller = () => { - this.intervalId = setInterval(() => { - if (this.updatedAt) { - resourceChecker(); - if (Vue.activeResources > 1) return; - goUpdate(); - } - }, 3000); - }; - - if (REALTIME) poller(); - const removePipelineInterval = () => { this.allTimeIntervals.forEach(e => clearInterval(e.id)); - if (REALTIME) clearInterval(this.intervalId); }; const startIntervalLoops = () => { this.allTimeIntervals.forEach(e => e.component.startInterval()); - if (REALTIME) poller(); }; window.onbeforeunload = function onClose() { -- cgit v1.2.1 From 1e7f91f2d611b80e7537a56aefc3e31452eaf273 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 1 Dec 2016 16:23:47 -0700 Subject: remove 30% width for commit column --- app/assets/stylesheets/pages/pipelines.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 3b8d2268437..0002c57cb13 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -33,8 +33,6 @@ } .branch-commit { - width: 30%; - .branch-name { max-width: 195px; } -- cgit v1.2.1 From c55ba05228c719bf1e05818fb91200b3d60da990 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 1 Dec 2016 18:08:34 -0700 Subject: add svg to pipeline index haml - prep for commit comp change - [ci skip] --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index e02c7dc528e..2e126434ea5 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -74,6 +74,15 @@ return nonUser; }, + ref(pipeline) { + const { ref } = pipeline; + const commitRef = { + name: ref.name, + tag: ref['tag?'], + ref_url: ref.url, + }; + return commitRef; + }, addTimeInterval(id, that) { this.allTimeIntervals.push({ id, component: that }); }, @@ -92,10 +101,10 @@ -- cgit v1.2.1 From a96499cf3cc8189e9f4e7f450b175b5a0ab001af Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 2 Dec 2016 10:18:23 -0700 Subject: reduce heavy references --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 4 ++-- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 2e126434ea5..9c27cb60615 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -83,8 +83,8 @@ }; return commitRef; }, - addTimeInterval(id, that) { - this.allTimeIntervals.push({ id, component: that }); + addTimeInterval(id, start) { + this.allTimeIntervals.push({ id, start }); }, }, template: ` diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 2dc1fd571f1..5f07617a602 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -48,7 +48,7 @@ }; const startIntervalLoops = () => { - this.allTimeIntervals.forEach(e => e.component.startInterval()); + this.allTimeIntervals.forEach(e => e.start()); }; window.onbeforeunload = function onClose() { diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index de6eec9bc5b..8aae777e9f1 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -17,7 +17,7 @@ this.currentTime = new Date(); }, 1000); - this.addTimeInterval(this.timeInterval, this); + this.addTimeInterval(this.timeInterval, this.startInterval); }, computed: { localTimeFinished() { -- cgit v1.2.1 From 18b559c9be5cf903569f01ae878ed71415b8a1a8 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 2 Dec 2016 11:42:26 -0700 Subject: deal with preventing DDOS --- .../javascripts/vue_pipelines_index/store.js.es6 | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 5f07617a602..ca537a9c20d 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -43,7 +43,7 @@ resourceChecker(); goFetch(); - const removePipelineInterval = () => { + const removePipelineIntervals = () => { this.allTimeIntervals.forEach(e => clearInterval(e.id)); }; @@ -51,17 +51,18 @@ this.allTimeIntervals.forEach(e => e.start()); }; - window.onbeforeunload = function onClose() { - removePipelineInterval(); + const removeAll = () => { + removePipelineIntervals(); + window.removeEventListener('beforeunload', () => {}); + window.removeEventListener('focus', () => {}); + window.removeEventListener('blur', () => {}); + document.removeEventListener('page:fetch', () => {}); }; - window.onblur = function remove() { - removePipelineInterval(); - }; - - window.onfocus = function start() { - startIntervalLoops(); - }; + window.addEventListener('beforeunload', removePipelineIntervals); + window.addEventListener('focus', startIntervalLoops); + window.addEventListener('blur', removePipelineIntervals); + document.addEventListener('page:fetch', removeAll); } }; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 004a9c6bccb840b97616d25c0ff24a8de62ff496 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 2 Dec 2016 11:52:20 -0700 Subject: change to new prop for commit component - [ci skip] --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 9c27cb60615..656ac0a25f1 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -101,10 +101,10 @@ -- cgit v1.2.1 From d6061b739b7f27d9b7ee9f6ff1e7a635c7bac0b3 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 2 Dec 2016 15:05:01 -0700 Subject: much simpler time logic - clean up - [ci skip] --- .../vue_pipelines_index/pipelines.js.es6 | 6 ++-- .../javascripts/vue_pipelines_index/store.js.es6 | 33 ++++++++++++++-------- .../vue_pipelines_index/time_ago.js.es6 | 15 ++-------- 3 files changed, 26 insertions(+), 28 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 656ac0a25f1..bba9a82e6ec 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -2,7 +2,6 @@ /* eslint-disable no-param-reassign, no-bitwise*/ ((gl) => { - const REALTIME = false; const SPREAD = '...'; const PREV = 'Prev'; const NEXT = 'Next'; @@ -24,7 +23,7 @@ data() { return { pipelines: [], - allTimeIntervals: [], + timeLoopInterval: '', intervalId: '', updatedAt: '', pagenum: 1, @@ -57,7 +56,7 @@ if (text === FIRST) this.pagenum = 1; window.history.pushState({}, null, `?p=${this.pagenum}`); - if (REALTIME) clearInterval(this.intervalId); + clearInterval(this.timeLoopInterval); this.pageRequest = true; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); }, @@ -113,7 +112,6 @@ diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index ca537a9c20d..1a473c51521 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -1,5 +1,5 @@ /* global gl, Flash */ -/* eslint-disable no-param-reassign */ +/* eslint-disable no-param-reassign, no-underscore-dangle */ ((gl) => { gl.PipelineStore = class { @@ -43,25 +43,36 @@ resourceChecker(); goFetch(); - const removePipelineIntervals = () => { - this.allTimeIntervals.forEach(e => clearInterval(e.id)); + const startTimeLoops = () => { + this.timeLoopInterval = setInterval(() => { + console.log('TIME LOOP'); + this.$children + .filter(e => e.$options._componentTag === 'time-ago') + .forEach(e => e.changeTime()); + }, 1000); + }; + + startTimeLoops(); + + const removeTimeIntervals = () => { + clearInterval(this.timeLoopInterval); }; const startIntervalLoops = () => { - this.allTimeIntervals.forEach(e => e.start()); + startTimeLoops(); }; const removeAll = () => { - removePipelineIntervals(); - window.removeEventListener('beforeunload', () => {}); - window.removeEventListener('focus', () => {}); - window.removeEventListener('blur', () => {}); - document.removeEventListener('page:fetch', () => {}); + removeTimeIntervals(); + window.removeEventListener('beforeunload', removeTimeIntervals); + window.removeEventListener('focus', startIntervalLoops); + window.removeEventListener('blur', removeTimeIntervals); + document.removeEventListener('page:fetch', removeTimeIntervals); }; - window.addEventListener('beforeunload', removePipelineIntervals); + window.addEventListener('beforeunload', removeTimeIntervals); window.addEventListener('focus', startIntervalLoops); - window.addEventListener('blur', removePipelineIntervals); + window.addEventListener('blur', removeTimeIntervals); document.addEventListener('page:fetch', removeAll); } }; diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 8aae777e9f1..33a1744fa82 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -4,21 +4,12 @@ gl.VueTimeAgo = Vue.extend({ data() { return { - timeInterval: '', currentTime: new Date(), }; }, props: [ 'pipeline', - 'addTimeInterval', ], - created() { - this.timeInterval = setInterval(() => { - this.currentTime = new Date(); - }, 1000); - - this.addTimeInterval(this.timeInterval, this.startInterval); - }, computed: { localTimeFinished() { return gl.utils.formatDate(this.pipeline.details.finished_at); @@ -44,10 +35,8 @@ if (duration !== null) return duration; return false; }, - startInterval() { - this.timeInterval = setInterval(() => { - this.currentTime = new Date(); - }, 1000); + changeTime() { + this.currentTime = new Date(); }, }, template: ` -- cgit v1.2.1 From cd111ffabd36c44ec2fd9c52d5c35e7cdc936c67 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 2 Dec 2016 15:10:31 -0700 Subject: anon callbacks since intervals removed in function prior - [ci skip] --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 1a473c51521..79bf56b5f69 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -45,7 +45,6 @@ const startTimeLoops = () => { this.timeLoopInterval = setInterval(() => { - console.log('TIME LOOP'); this.$children .filter(e => e.$options._componentTag === 'time-ago') .forEach(e => e.changeTime()); @@ -64,10 +63,10 @@ const removeAll = () => { removeTimeIntervals(); - window.removeEventListener('beforeunload', removeTimeIntervals); - window.removeEventListener('focus', startIntervalLoops); - window.removeEventListener('blur', removeTimeIntervals); - document.removeEventListener('page:fetch', removeTimeIntervals); + window.removeEventListener('beforeunload', () => {}); + window.removeEventListener('focus', () => {}); + window.removeEventListener('blur', () => {}); + document.removeEventListener('page:fetch', () => {}); }; window.addEventListener('beforeunload', removeTimeIntervals); -- cgit v1.2.1 From 312c504f618513a87d817cad74c059506fac7a49 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 5 Dec 2016 13:17:23 -0700 Subject: can render all tabs for pipelines - remove uneeded properties - [ci skip] --- .../javascripts/vue_pipelines_index/index.js.es6 | 46 +++++++++++----------- .../vue_pipelines_index/pipelines.js.es6 | 30 +++++++++++--- .../javascripts/vue_pipelines_index/store.js.es6 | 5 +-- 3 files changed, 50 insertions(+), 31 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 2bd8d5d327f..1e4ee8875fb 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -17,30 +17,32 @@ //= require ./pipelines.js.es6 (() => { - const url = window.location.href; - if (~url.indexOf('scope') && !~url.indexOf('scope=pipelines')) return null; - const project = document.querySelector('.pipelines'); + const entry = document.querySelector('.vue-pipelines-index'); Vue.use(VueResource); - return new Vue({ - el: '.vue-pipelines-index', - data: { - scope: project.dataset.url, - store: new gl.PipelineStore(), - }, - components: { - 'vue-pipelines': gl.VuePipelines, - }, - template: ` -
    - - -
    - `, - }); + if (entry) { + return new Vue({ + el: entry, + data: { + scope: project.dataset.url, + store: new gl.PipelineStore(), + }, + components: { + 'vue-pipelines': gl.VuePipelines, + }, + template: ` +
    + + +
    + `, + }); + } + + return null; })(); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index bba9a82e6ec..1fd3a2a4d99 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -8,6 +8,16 @@ const FIRST = '<< First'; const LAST = 'Last >>'; + const getParameterByName = (name) => { + const url = window.location.href; + name = name.replace(/[[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); + const results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + }; + gl.VuePipelines = Vue.extend({ components: { runningPipeline: gl.VueRunningPipeline, @@ -25,8 +35,8 @@ pipelines: [], timeLoopInterval: '', intervalId: '', - updatedAt: '', pagenum: 1, + apiScope: 'all', count: { all: 0, running_or_pending: 0, @@ -39,11 +49,19 @@ 'store', ], created() { - const url = window.location.toString(); - if (~url.indexOf('?') && !~url.indexOf('scope=pipelines')) { - this.pagenum = url.split('?')[1].split('=')[1]; - } - this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); + const pagenum = getParameterByName('p'); + const scope = getParameterByName('scope'); + + if (pagenum) this.pagenum = pagenum; + if (scope) this.apiScope = scope; + + this.store.fetchDataLoop.call( + this, + Vue, + this.pagenum, + this.scope, + this.apiScope, + ); }, methods: { changepage(e, last) { diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 79bf56b5f69..93e4a640012 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -3,7 +3,7 @@ ((gl) => { gl.PipelineStore = class { - fetchDataLoop(Vue, pageNum, url) { + fetchDataLoop(Vue, pageNum, url, apiScope) { const setVueResources = () => { Vue.activeResources = 1; }; const resetVueResources = () => { Vue.activeResources = 0; }; const addToVueResources = () => { Vue.activeResources += 1; }; @@ -27,10 +27,9 @@ }; const goFetch = () => - this.$http.get(`${url}?page=${pageNum}`) + this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`) .then((response) => { const res = JSON.parse(response.body); - Vue.set(this, 'updatedAt', res.updated_at); Vue.set(this, 'pipelines', res.pipelines); Vue.set(this, 'count', res.count); updatePipelineNums(this.count); -- cgit v1.2.1 From a0055435438e956b09bb92b6bbf618fbf005e46c Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 5 Dec 2016 15:52:02 -0700 Subject: tried css only approach didn't work for now - adding all icons to stages --- app/assets/javascripts/vue_icons/index.js.es6 | 55 ++++------------------ .../javascripts/vue_pipelines_index/stage.js.es6 | 4 ++ 2 files changed, 13 insertions(+), 46 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_icons/index.js.es6 b/app/assets/javascripts/vue_icons/index.js.es6 index 84a19348862..6ddf8592cbe 100644 --- a/app/assets/javascripts/vue_icons/index.js.es6 +++ b/app/assets/javascripts/vue_icons/index.js.es6 @@ -5,86 +5,49 @@ ((gl) => { gl.VueRunningIcon = Vue.extend({ template: ` - - - - - - + `, }); gl.VuePendingIcon = Vue.extend({ template: ` - - - - - - + `, }); gl.VueSuccessIcon = Vue.extend({ template: ` - - - - - - + `, }); gl.VueFailedIcon = Vue.extend({ template: ` - - - - - - + `, }); gl.VueCreatedIcon = Vue.extend({ template: ` - - - - + `, }); gl.VueCanceledIcon = Vue.extend({ template: ` - - - - - - + `, }); gl.VueSkippedIcon = Vue.extend({ template: ` - - - - - + `, }); - gl.VueUnstableIcon = Vue.extend({ + gl.VueWarningIcon = Vue.extend({ template: ` - - - - - - `, }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index e5f9178a796..38b993d4b51 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -10,6 +10,8 @@ 'success-icon': gl.VueSuccessIcon, 'created-icon': gl.VueCreatedIcon, 'canceled-icon': gl.VueCanceledIcon, + 'warning-icon': gl.VueWarningIcon, + 'skipped-icon': gl.VueSkippedIcon, }, props: ['stage'], computed: { @@ -32,6 +34,8 @@ + + `, }); -- cgit v1.2.1 From cc198c1f94520e756ac08ddb4c8bef6a75962cda Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 5 Dec 2016 16:01:49 -0700 Subject: change unstable to warning [ci skip] --- .../vue_pipelines_status/unstable.js.es6 | 23 ---------------------- .../vue_pipelines_status/warning.js.es6 | 23 ++++++++++++++++++++++ 2 files changed, 23 insertions(+), 23 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelines_status/unstable.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_status/warning.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_status/unstable.js.es6 b/app/assets/javascripts/vue_pipelines_status/unstable.js.es6 deleted file mode 100644 index 27fd29b9d80..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/unstable.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueUnstableScope = Vue.extend({ - components: { - 'vue-unstable-icon': gl.VueUnstableIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  unstable - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/warning.js.es6 b/app/assets/javascripts/vue_pipelines_status/warning.js.es6 new file mode 100644 index 00000000000..1a8b70d82f1 --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_status/warning.js.es6 @@ -0,0 +1,23 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueWarningScope = Vue.extend({ + components: { + 'vue-warning-icon': gl.VueWarningIcon, + }, + props: [ + 'pipeline', + ], + template: ` + + + + +  warning + + + + `, + }); +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From bdd6b841b0369fcadbcd375905c37476415fa100 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 5 Dec 2016 16:20:34 -0700 Subject: require correct file [ci skip] --- app/assets/javascripts/vue_pipelines_status/index.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_status/index.js.es6 b/app/assets/javascripts/vue_pipelines_status/index.js.es6 index 712ac2644e5..c48b4adb661 100644 --- a/app/assets/javascripts/vue_pipelines_status/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_status/index.js.es6 @@ -3,5 +3,5 @@ //= require ./running.js.es6 //= require ./canceled.js.es6 //= require ./status.js.es6 -//= require ./unstable.js.es6 +//= require ./warning.js.es6 //= require ./skipped.js.es6 -- cgit v1.2.1 From 62b3b28b0b1522ff57e76b1a68fb2c77e0930abe Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 6 Dec 2016 09:03:45 -0700 Subject: remove all files related to Vue SVG rendering - use dynamic svg loading --- app/assets/javascripts/vue_icons/index.js.es6 | 53 ---------------------- .../javascripts/vue_pipelines_index/index.js.es6 | 1 + .../javascripts/vue_pipelines_index/stage.js.es6 | 25 +++------- .../javascripts/vue_pipelines_index/status.js.es6 | 34 ++++++++++++++ .../vue_pipelines_status/canceled.js.es6 | 23 ---------- .../vue_pipelines_status/created.js.es6 | 23 ---------- .../javascripts/vue_pipelines_status/failed.js.es6 | 23 ---------- .../javascripts/vue_pipelines_status/index.js.es6 | 7 --- .../vue_pipelines_status/pending.js.es6 | 23 ---------- .../vue_pipelines_status/running.js.es6 | 23 ---------- .../vue_pipelines_status/skipped.js.es6 | 23 ---------- .../javascripts/vue_pipelines_status/status.js.es6 | 52 --------------------- .../vue_pipelines_status/warning.js.es6 | 23 ---------- 13 files changed, 42 insertions(+), 291 deletions(-) delete mode 100644 app/assets/javascripts/vue_icons/index.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/status.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/canceled.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/created.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/failed.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/index.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/pending.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/running.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/skipped.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/status.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_status/warning.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_icons/index.js.es6 b/app/assets/javascripts/vue_icons/index.js.es6 deleted file mode 100644 index 6ddf8592cbe..00000000000 --- a/app/assets/javascripts/vue_icons/index.js.es6 +++ /dev/null @@ -1,53 +0,0 @@ -//= require vue -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VuePendingIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VueSuccessIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VueFailedIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VueCreatedIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VueCanceledIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VueSkippedIcon = Vue.extend({ - template: ` - - `, - }); - - gl.VueWarningIcon = Vue.extend({ - template: ` - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 1e4ee8875fb..c454d8672b3 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -6,6 +6,7 @@ //= require vue-resource //= require ./object_assign.js.es6 +//= require ./status.js.es6 //= require ./store.js.es6 //= require ./pipeline_url.js.es6 //= require ./pipeline_head.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 38b993d4b51..d8e3f1c3dcd 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -3,16 +3,6 @@ ((gl) => { gl.VueStage = Vue.extend({ - components: { - 'running-icon': gl.VueRunningIcon, - 'pending-icon': gl.VuePendingIcon, - 'failed-icon': gl.VueFailedIcon, - 'success-icon': gl.VueSuccessIcon, - 'created-icon': gl.VueCreatedIcon, - 'canceled-icon': gl.VueCanceledIcon, - 'warning-icon': gl.VueWarningIcon, - 'skipped-icon': gl.VueSkippedIcon, - }, props: ['stage'], computed: { buildStatus() { @@ -21,21 +11,20 @@ tooltip() { return `has-tooltip ci-status-icon-${this.stage.status}`; }, + svg() { + return document + .querySelector( + `.${this.stage.status}-icon-svg.hidden`, + ).innerHTML; + }, }, template: ` - - - - - - - - `, }); diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 new file mode 100644 index 00000000000..bbdc357035f --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -0,0 +1,34 @@ +/* global Vue, gl */ +/* eslint-disable no-param-reassign */ + +((gl) => { + gl.VueStatusScope = Vue.extend({ + props: [ + 'pipeline', + ], + computed: { + cssClasses() { + const cssObject = {}; + cssObject['ci-status'] = true; + cssObject[`ci-${this.pipeline.details.status}`] = true; + return cssObject; + }, + svg() { + return document + .querySelector( + `.${this.pipeline.details.status}-icon-svg.hidden`, + ).innerHTML; + }, + }, + template: ` + + + + +  {{pipeline.details.status}} + + + + `, + }); +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 b/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 deleted file mode 100644 index 20ca8ad5ebb..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/canceled.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueCanceledScope = Vue.extend({ - components: { - 'vue-canceled-icon': gl.VueCanceledIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  canceled - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/created.js.es6 b/app/assets/javascripts/vue_pipelines_status/created.js.es6 deleted file mode 100644 index b74566b7341..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/created.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueCreatedScope = Vue.extend({ - components: { - 'vue-created-icon': gl.VueCreatedIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  failed - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/failed.js.es6 b/app/assets/javascripts/vue_pipelines_status/failed.js.es6 deleted file mode 100644 index 0988e2c04ab..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/failed.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueFailedScope = Vue.extend({ - components: { - 'vue-failed-icon': gl.VueFailedIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  failed - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/index.js.es6 b/app/assets/javascripts/vue_pipelines_status/index.js.es6 deleted file mode 100644 index c48b4adb661..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/index.js.es6 +++ /dev/null @@ -1,7 +0,0 @@ -//= require ./pending.js.es6 -//= require ./failed.js.es6 -//= require ./running.js.es6 -//= require ./canceled.js.es6 -//= require ./status.js.es6 -//= require ./warning.js.es6 -//= require ./skipped.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_status/pending.js.es6 b/app/assets/javascripts/vue_pipelines_status/pending.js.es6 deleted file mode 100644 index 579c6f71a2e..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/pending.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePendingScope = Vue.extend({ - components: { - 'vue-pending-icon': gl.VuePendingIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  pending - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/running.js.es6 b/app/assets/javascripts/vue_pipelines_status/running.js.es6 deleted file mode 100644 index 57274422b15..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/running.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueRunningScope = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  running - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 b/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 deleted file mode 100644 index da904010607..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/skipped.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueSkippedScope = Vue.extend({ - components: { - 'vue-skipped-icon': gl.VueSkippedIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  skipped - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/status.js.es6 b/app/assets/javascripts/vue_pipelines_status/status.js.es6 deleted file mode 100644 index dfef19e21da..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/status.js.es6 +++ /dev/null @@ -1,52 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueStatusScope = Vue.extend({ - components: { - 'vue-running-scope': gl.VueRunningScope, - 'vue-pending-scope': gl.VuePendingScope, - 'vue-failed-scope': gl.VueFailedScope, - 'vue-created-scope': gl.VueCreatedScope, - 'vue-canceled-scope': gl.VueCanceledScope, - 'vue-unstable-scope': gl.VueUnstableScope, - }, - props: [ - 'pipeline', - ], - template: ` - - - - - - - - - - - - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_status/warning.js.es6 b/app/assets/javascripts/vue_pipelines_status/warning.js.es6 deleted file mode 100644 index 1a8b70d82f1..00000000000 --- a/app/assets/javascripts/vue_pipelines_status/warning.js.es6 +++ /dev/null @@ -1,23 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueWarningScope = Vue.extend({ - components: { - 'vue-warning-icon': gl.VueWarningIcon, - }, - props: [ - 'pipeline', - ], - template: ` - - - - -  warning - - - - `, - }); -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From e9e498fdc75e257bf97ba6e02c9196fe662d49e1 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 6 Dec 2016 13:08:37 -0700 Subject: no need for running icon comp --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index d9602b4209d..99ecdf3fed0 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -3,9 +3,6 @@ ((gl) => { gl.VuePipelineUrl = Vue.extend({ - components: { - 'vue-running-icon': gl.VueRunningIcon, - }, props: [ 'pipeline', ], @@ -56,7 +53,7 @@ yaml invalid stuck -- cgit v1.2.1 From 840ee74ef65eba0d9704b6a8ed4535b38c8d2675 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 6 Dec 2016 22:33:27 -0700 Subject: remove unused components and polyfill - use interceptor for vue resource --- .../vue_pipelines_index/branch_commit.js.es6 | 64 ---------------------- .../javascripts/vue_pipelines_index/index.js.es6 | 3 +- .../vue_pipelines_index/interceptor.js.es6 | 8 +++ .../vue_pipelines_index/object_assign.js.es6 | 30 ---------- .../javascripts/vue_pipelines_index/store.js.es6 | 17 ------ 5 files changed, 9 insertions(+), 113 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 create mode 100644 app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 delete mode 100644 app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 b/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 deleted file mode 100644 index 6bebbd221fe..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6 +++ /dev/null @@ -1,64 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VueBranchCommit = Vue.extend({ - props: ['pipeline'], - computed: { - mailto() { - return `mailto:${this.pipeline.commit.author_email}`; - }, - alt() { - return `${this.pipeline.commit.author_name}'s avatar`; - }, - avatarUrl() { - const author = this.pipeline.commit.author; - if (author) return author.avatar_url; - return this.pipeline.commit.author_gravatar_url; - }, - }, - template: ` - -
    - -
    - - {{pipeline.ref.name}} - -
    - - - -
    - - {{pipeline.commit.short_id}} - -

    - - - - - - {{pipeline.commit.title}} - -

    - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index c454d8672b3..25f5c796a60 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -5,7 +5,7 @@ //= require vue-resource -//= require ./object_assign.js.es6 +//= require ./interceptor.js.es6 //= require ./status.js.es6 //= require ./store.js.es6 //= require ./pipeline_url.js.es6 @@ -13,7 +13,6 @@ //= require ./stage.js.es6 //= require ./stages.js.es6 //= require ./pipeline_actions.js.es6 -//= require ./branch_commit.js.es6 //= require ./time_ago.js.es6 //= require ./pipelines.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 b/app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 new file mode 100644 index 00000000000..80f137ca12e --- /dev/null +++ b/app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 @@ -0,0 +1,8 @@ +/* eslint-disable */ +Vue.http.interceptors.push((request, next) => { + Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1; + + next(function (response) { + Vue.activeResources--; + }); +}); diff --git a/app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 b/app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 deleted file mode 100644 index 05a5a7da1c3..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/object_assign.js.es6 +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable */ - -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ -(() => { - if (typeof Object.assign != 'function') { - (function () { - Object.assign = function (target) { - 'use strict'; - // We must check against these specific cases. - if (target === undefined || target === null) { - throw new TypeError('Cannot convert undefined or null to object'); - } - - var output = Object(target); - for (var index = 1; index < arguments.length; index++) { - var source = arguments[index]; - if (source !== undefined && source !== null) { - for (var nextKey in source) { - if (source.hasOwnProperty(nextKey)) { - output[nextKey] = source[nextKey]; - } - } - } - } - return output; - }; - })(); - } -})(); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 93e4a640012..49b77454314 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -4,13 +4,6 @@ ((gl) => { gl.PipelineStore = class { fetchDataLoop(Vue, pageNum, url, apiScope) { - const setVueResources = () => { Vue.activeResources = 1; }; - const resetVueResources = () => { Vue.activeResources = 0; }; - const addToVueResources = () => { Vue.activeResources += 1; }; - const subtractFromVueResources = () => { Vue.activeResources -= 1; }; - - resetVueResources(); - const updatePipelineNums = (count) => { const { all } = count; const running = count.running_or_pending; @@ -18,14 +11,6 @@ document.querySelector('.js-running-count').innerHTML = running; }; - const resourceChecker = () => { - if (Vue.activeResources === 0) { - setVueResources(); - } else { - addToVueResources(); - } - }; - const goFetch = () => this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`) .then((response) => { @@ -34,12 +19,10 @@ Vue.set(this, 'count', res.count); updatePipelineNums(this.count); this.pageRequest = false; - subtractFromVueResources(); }, () => new Flash( 'Something went wrong on our end.', )); - resourceChecker(); goFetch(); const startTimeLoops = () => { -- cgit v1.2.1 From e86c5570fbfd1d5276eb67b16303599fc747a7a0 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 7 Dec 2016 09:51:51 -0700 Subject: fix status for svg's on status column --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index bbdc357035f..ed65841e6a7 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -10,13 +10,13 @@ cssClasses() { const cssObject = {}; cssObject['ci-status'] = true; - cssObject[`ci-${this.pipeline.details.status}`] = true; + cssObject[`ci-${this.pipeline.details.status.text}`] = true; return cssObject; }, svg() { return document .querySelector( - `.${this.pipeline.details.status}-icon-svg.hidden`, + `.${this.pipeline.details.status.text}-icon-svg.hidden`, ).innerHTML; }, }, @@ -25,7 +25,7 @@ -  {{pipeline.details.status}} +  {{pipeline.details.status.text}} -- cgit v1.2.1 From c9b6392452f586eafc08605b71f6c696a5ca12d7 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 7 Dec 2016 10:05:39 -0700 Subject: conform to status object for svg icon names --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index d8e3f1c3dcd..b313317b0bb 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -14,7 +14,7 @@ svg() { return document .querySelector( - `.${this.stage.status}-icon-svg.hidden`, + `.icon_status_${this.stage.status}`, ).innerHTML; }, }, diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index ed65841e6a7..2f362d0c69e 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -15,14 +15,12 @@ }, svg() { return document - .querySelector( - `.${this.pipeline.details.status.text}-icon-svg.hidden`, - ).innerHTML; + .querySelector(`.${this.pipeline.details.status.icon}`).innerHTML; }, }, template: ` - +  {{pipeline.details.status.text}} -- cgit v1.2.1 From 64b66c9a8327b9309f6bad6402a36a795f957fd1 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 7 Dec 2016 13:35:26 -0700 Subject: use API values for pagination --- app/assets/javascripts/vue_pagination/index.js.es6 | 31 +++++++++++----------- .../vue_pipelines_index/pipelines.js.es6 | 14 +++++----- .../javascripts/vue_pipelines_index/store.js.es6 | 15 +++++++++++ 3 files changed, 39 insertions(+), 21 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 4f83671e83d..961f7101fb1 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -2,7 +2,6 @@ /* eslint-disable no-param-reassign, no-plusplus */ ((gl) => { - const PAGINATION_SIZE = 30; const PAGINATION_UI_BUTTON_LIMIT = 4; const SPREAD = '...'; const PREV = 'Prev'; @@ -13,24 +12,26 @@ gl.VueGlPagination = Vue.extend({ props: [ 'changepage', - 'count', - 'pagenum', + 'pageInfo', ], computed: { - last() { - return Math.ceil(+this.count / PAGINATION_SIZE); + prev() { + return this.pageInfo.previousPage; + }, + next() { + return this.pageInfo.nextPage; }, getItems() { - const total = +this.last; - const page = +this.pagenum; + const total = this.pageInfo.totalPages; + const page = this.pageInfo.page; const items = []; - if (page > 1) items.push({ title: FIRST, where: 1 }); + if (page > 1) items.push({ title: FIRST }); if (page > 1) { - items.push({ title: PREV, where: page - 1 }); + items.push({ title: PREV }); } else { - items.push({ title: PREV, where: page - 1, disabled: true }); + items.push({ title: PREV, disabled: true }); } if (page > 6) items.push({ title: SPREAD, separator: true }); @@ -40,7 +41,7 @@ for (let i = start; i <= end; i++) { const isActive = i === page; - items.push({ title: i, active: isActive, where: i }); + items.push({ title: i, active: isActive }); } if (total - page > PAGINATION_UI_BUTTON_LIMIT) { @@ -48,12 +49,12 @@ } if (page === total) { - items.push({ title: NEXT, where: page + 1, disabled: true }); + items.push({ title: NEXT, disabled: true }); } else if (total - page >= 1) { - items.push({ title: NEXT, where: page + 1 }); + items.push({ title: NEXT }); } - if (total - page >= 1) items.push({ title: LAST, where: total }); + if (total - page >= 1) items.push({ title: LAST }); return items; }, @@ -69,7 +70,7 @@ }' > {{item.title}} diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 1fd3a2a4d99..3f35c07b628 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -35,8 +35,8 @@ pipelines: [], timeLoopInterval: '', intervalId: '', - pagenum: 1, apiScope: 'all', + pageInfo: {}, count: { all: 0, running_or_pending: 0, @@ -64,13 +64,14 @@ ); }, methods: { - changepage(e, last) { + changepage(e) { const text = e.target.innerText; + const { totalPages, nextPage, previousPage } = this.pageInfo; if (text === SPREAD) return; if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text; - if (text === LAST) this.pagenum = last; - if (text === NEXT) this.pagenum = +this.pagenum + 1; - if (text === PREV) this.pagenum = +this.pagenum - 1; + if (text === LAST) this.pagenum = totalPages; + if (text === NEXT) this.pagenum = nextPage; + if (text === PREV) this.pagenum = previousPage; if (text === FIRST) this.pagenum = 1; window.history.pushState({}, null, `?p=${this.pagenum}`); @@ -141,10 +142,11 @@
    diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 49b77454314..7d8316d6d20 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,6 +2,17 @@ /* eslint-disable no-param-reassign, no-underscore-dangle */ ((gl) => { + const pageValues = (headers) => { + const values = {}; + values.perPage = +headers['X-Per-Page']; + values.page = +headers['X-Page']; + values.total = +headers['X-Total']; + values.totalPages = +headers['X-Total-Pages']; + values.nextPage = +headers['X-Next-Page']; + values.previousPage = +headers['X-Prev-Page']; + return values; + }; + gl.PipelineStore = class { fetchDataLoop(Vue, pageNum, url, apiScope) { const updatePipelineNums = (count) => { @@ -14,9 +25,13 @@ const goFetch = () => this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`) .then((response) => { + const pageInfo = pageValues(response.headers); + Vue.set(this, 'pageInfo', pageInfo); + const res = JSON.parse(response.body); Vue.set(this, 'pipelines', res.pipelines); Vue.set(this, 'count', res.count); + updatePipelineNums(this.count); this.pageRequest = false; }, () => new Flash( -- cgit v1.2.1 From 813be933969956acd1ce401dce90a4c552a6f9d3 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 7 Dec 2016 15:20:30 -0700 Subject: default to page 1 if url is clean --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 3f35c07b628..9f7e71dbee9 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -37,6 +37,7 @@ intervalId: '', apiScope: 'all', pageInfo: {}, + pagenum: 1, count: { all: 0, running_or_pending: 0, -- cgit v1.2.1 From 20f74fe7ca6388a2dcc72231e84ed2945d6c4444 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 8 Dec 2016 10:03:53 -0700 Subject: make Vue render with null commit object - handle scope and page in different tabs --- .../vue_pipelines_index/pipelines.js.es6 | 38 ++++++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 9f7e71dbee9..090ceb67593 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -66,6 +66,8 @@ }, methods: { changepage(e) { + const scope = getParameterByName('scope'); + if (scope) this.apiScope = scope; const text = e.target.innerText; const { totalPages, nextPage, previousPage } = this.pageInfo; if (text === SPREAD) return; @@ -74,14 +76,21 @@ if (text === NEXT) this.pagenum = nextPage; if (text === PREV) this.pagenum = previousPage; if (text === FIRST) this.pagenum = 1; - - window.history.pushState({}, null, `?p=${this.pagenum}`); + window.history.pushState({}, null, `?scope=${this.apiScope}&p=${this.pagenum}`); clearInterval(this.timeLoopInterval); this.pageRequest = true; - this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope); + this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); }, author(pipeline) { const { commit } = pipeline; + if (!commit) { + return ({ + avatar_url: '', + web_url: '', + username: '', + }); + } + const author = commit.author; if (author) return author; @@ -105,6 +114,21 @@ addTimeInterval(id, start) { this.allTimeIntervals.push({ id, start }); }, + commitTitle(pipeline) { + const { commit } = pipeline; + if (commit) return commit.title; + return ''; + }, + commitSha(pipeline) { + const { commit } = pipeline; + if (commit) return commit.short_id; + return ''; + }, + commitUrl(pipeline) { + const { commit } = pipeline; + if (commit) return commit.commit_url; + return ''; + }, }, template: `
    @@ -122,10 +146,10 @@ @@ -143,7 +167,7 @@
    Date: Thu, 8 Dec 2016 11:05:20 -0700 Subject: bunch of blocked tests now passing - moving on --- .../vue_pipelines_index/pipelines.js.es6 | 70 +++++----------------- 1 file changed, 15 insertions(+), 55 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 090ceb67593..2c18b6cc7e5 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -38,31 +38,17 @@ apiScope: 'all', pageInfo: {}, pagenum: 1, - count: { - all: 0, - running_or_pending: 0, - }, + count: { all: 0, running_or_pending: 0 }, pageRequest: false, }; }, - props: [ - 'scope', - 'store', - ], + props: ['scope', 'store'], created() { const pagenum = getParameterByName('p'); const scope = getParameterByName('scope'); - if (pagenum) this.pagenum = pagenum; if (scope) this.apiScope = scope; - - this.store.fetchDataLoop.call( - this, - Vue, - this.pagenum, - this.scope, - this.apiScope, - ); + this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); }, methods: { changepage(e) { @@ -82,51 +68,28 @@ this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); }, author(pipeline) { - const { commit } = pipeline; - if (!commit) { - return ({ - avatar_url: '', - web_url: '', - username: '', - }); - } - - const author = commit.author; - if (author) return author; - - const nonUser = { - avatar_url: commit.author_gravatar_url, - web_url: `mailto:${commit.author_email}`, - username: commit.author_name, - }; - - return nonUser; + if (!pipeline.commit) return ({ avatar_url: '', web_url: '', username: '' }); + if (pipeline.commit.author) return pipeline.commit.author; + return ({ + avatar_url: pipeline.commit.author_gravatar_url, + web_url: `mailto:${pipeline.commit.author_email}`, + username: pipeline.commit.author_name, + }); }, ref(pipeline) { const { ref } = pipeline; - const commitRef = { - name: ref.name, - tag: ref['tag?'], - ref_url: ref.url, - }; - return commitRef; - }, - addTimeInterval(id, start) { - this.allTimeIntervals.push({ id, start }); + return ({ name: ref.name, tag: ref['tag?'], ref_url: ref.url }); }, commitTitle(pipeline) { - const { commit } = pipeline; - if (commit) return commit.title; + if (pipeline.commit) return pipeline.commit.title; return ''; }, commitSha(pipeline) { - const { commit } = pipeline; - if (commit) return commit.short_id; + if (pipeline.commit) return pipeline.commit.short_id; return ''; }, commitUrl(pipeline) { - const { commit } = pipeline; - if (commit) return commit.commit_url; + if (pipeline.commit) return pipeline.commit.commit_url; return ''; }, }, @@ -154,10 +117,7 @@ - - + -- cgit v1.2.1 From aa74a704ca43334fa521ff99696513012ebee66c Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 8 Dec 2016 11:22:05 -0700 Subject: first manual build test passing --- app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index e99e65d50b8..fe1db7aae29 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -20,8 +20,8 @@ v-if='pipeline.details.manual_actions.length > 0' class="dropdown-toggle btn btn-default" data-toggle="dropdown" - type="button" title="Manual build" + alt="Manual Build" > Date: Thu, 8 Dec 2016 11:35:39 -0700 Subject: tests don't see Manual build link --- app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index fe1db7aae29..1c7fa994900 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -23,7 +23,7 @@ title="Manual build" alt="Manual Build" > - + - + Date: Thu, 8 Dec 2016 16:18:24 -0700 Subject: add passed scope to adhere to dynamic api response --- app/assets/stylesheets/pages/status.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 5084b466722..c77995b8fb6 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -47,6 +47,20 @@ } } + &.ci-passed, + &.ci-passed_with_warnings { + color: $gl-success; + border-color: $gl-success; + + &:not(span):hover { + background-color: rgba( $gl-success, .07); + } + + svg { + fill: $gl-success; + } + } + &.ci-info { color: $gl-info; border-color: $gl-info; -- cgit v1.2.1 From bff8e5bad99ccf515133a82576ca38165de0624c Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 8 Dec 2016 17:37:00 -0700 Subject: add change page logic to pagination component - add first test for pagination --- app/assets/javascripts/vue_pagination/index.js.es6 | 32 +++++++++++++++++++++- .../vue_pipelines_index/pipelines.js.es6 | 24 +++------------- 2 files changed, 35 insertions(+), 21 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 961f7101fb1..ed2357b5d9e 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -9,11 +9,41 @@ const FIRST = '<< First'; const LAST = 'Last >>'; + const getParameterByName = (name) => { + const url = window.location.href; + name = name.replace(/[[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); + const results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + }; + gl.VueGlPagination = Vue.extend({ props: [ - 'changepage', + 'change', 'pageInfo', ], + methods: { + changepage(e) { + let pagenum = this.pageInfo.page; + let apiScope = getParameterByName('scope'); + + if (!apiScope) apiScope = 'all'; + + const text = e.target.innerText; + const { totalPages, nextPage, previousPage } = this.pageInfo; + + if (text === SPREAD) return; + if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) pagenum = +text; + if (text === LAST) pagenum = totalPages; + if (text === NEXT) pagenum = nextPage; + if (text === PREV) pagenum = previousPage; + if (text === FIRST) pagenum = 1; + + this.change(pagenum, apiScope); + }, + }, computed: { prev() { return this.pageInfo.previousPage; diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 2c18b6cc7e5..ac889bb2d9f 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -2,12 +2,6 @@ /* eslint-disable no-param-reassign, no-bitwise*/ ((gl) => { - const SPREAD = '...'; - const PREV = 'Prev'; - const NEXT = 'Next'; - const FIRST = '<< First'; - const LAST = 'Last >>'; - const getParameterByName = (name) => { const url = window.location.href; name = name.replace(/[[\]]/g, '\\$&'); @@ -51,21 +45,11 @@ this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); }, methods: { - changepage(e) { - const scope = getParameterByName('scope'); - if (scope) this.apiScope = scope; - const text = e.target.innerText; - const { totalPages, nextPage, previousPage } = this.pageInfo; - if (text === SPREAD) return; - if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text; - if (text === LAST) this.pagenum = totalPages; - if (text === NEXT) this.pagenum = nextPage; - if (text === PREV) this.pagenum = previousPage; - if (text === FIRST) this.pagenum = 1; - window.history.pushState({}, null, `?scope=${this.apiScope}&p=${this.pagenum}`); + change(pagenum, apiScope) { + window.history.pushState({}, null, `?scope=${apiScope}&p=${pagenum}`); clearInterval(this.timeLoopInterval); this.pageRequest = true; - this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); + this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope); }, author(pipeline) { if (!pipeline.commit) return ({ avatar_url: '', web_url: '', username: '' }); @@ -129,7 +113,7 @@ -- cgit v1.2.1 From 2ecb65b8c4a3fc277925938e691621e34c449664 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 8 Dec 2016 17:41:59 -0700 Subject: extract param helper to pagination dir --- app/assets/javascripts/vue_pagination/index.js.es6 | 14 +++----------- app/assets/javascripts/vue_pagination/param_helper.js.es6 | 13 +++++++++++++ .../javascripts/vue_pipelines_index/pipelines.js.es6 | 14 ++------------ 3 files changed, 18 insertions(+), 23 deletions(-) create mode 100644 app/assets/javascripts/vue_pagination/param_helper.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index ed2357b5d9e..f0f0b54dd2b 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -1,6 +1,8 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign, no-plusplus */ +//= require ./param_helper.js.es6 + ((gl) => { const PAGINATION_UI_BUTTON_LIMIT = 4; const SPREAD = '...'; @@ -9,16 +11,6 @@ const FIRST = '<< First'; const LAST = 'Last >>'; - const getParameterByName = (name) => { - const url = window.location.href; - name = name.replace(/[[\]]/g, '\\$&'); - const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); - const results = regex.exec(url); - if (!results) return null; - if (!results[2]) return ''; - return decodeURIComponent(results[2].replace(/\+/g, ' ')); - }; - gl.VueGlPagination = Vue.extend({ props: [ 'change', @@ -27,7 +19,7 @@ methods: { changepage(e) { let pagenum = this.pageInfo.page; - let apiScope = getParameterByName('scope'); + let apiScope = gl.getParameterByName('scope'); if (!apiScope) apiScope = 'all'; diff --git a/app/assets/javascripts/vue_pagination/param_helper.js.es6 b/app/assets/javascripts/vue_pagination/param_helper.js.es6 new file mode 100644 index 00000000000..4c684f96e9e --- /dev/null +++ b/app/assets/javascripts/vue_pagination/param_helper.js.es6 @@ -0,0 +1,13 @@ +/* eslint-disable no-param-reassign */ + +((w) => { + w.getParameterByName = (name) => { + const url = window.location.href; + name = name.replace(/[[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); + const results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + }; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index ac889bb2d9f..2fdcaf3e16c 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -2,16 +2,6 @@ /* eslint-disable no-param-reassign, no-bitwise*/ ((gl) => { - const getParameterByName = (name) => { - const url = window.location.href; - name = name.replace(/[[\]]/g, '\\$&'); - const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); - const results = regex.exec(url); - if (!results) return null; - if (!results[2]) return ''; - return decodeURIComponent(results[2].replace(/\+/g, ' ')); - }; - gl.VuePipelines = Vue.extend({ components: { runningPipeline: gl.VueRunningPipeline, @@ -38,8 +28,8 @@ }, props: ['scope', 'store'], created() { - const pagenum = getParameterByName('p'); - const scope = getParameterByName('scope'); + const pagenum = gl.getParameterByName('p'); + const scope = gl.getParameterByName('scope'); if (pagenum) this.pagenum = pagenum; if (scope) this.apiScope = scope; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); -- cgit v1.2.1 From 63c3ba7ae084919e237d444c942f26093ac51da0 Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Tue, 22 Nov 2016 02:09:56 +0000 Subject: Created shared/visibility_select and merged with feature permissions ui Fixed up nested padding and added dynamic text js Added padding and tests --- app/assets/javascripts/dispatcher.js.es6 | 1 + app/assets/javascripts/visibility_select.js.es6 | 29 +++++++++++++++++++++++++ app/assets/stylesheets/pages/projects.scss | 12 ++++++++++ 3 files changed, 42 insertions(+) create mode 100644 app/assets/javascripts/visibility_select.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 413117c2226..237a7dab5e9 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -262,6 +262,7 @@ case 'edit': shortcut_handler = new ShortcutsNavigation(); new ProjectNew(); + new gl.VisibilitySelect(); break; case 'new': new ProjectNew(); diff --git a/app/assets/javascripts/visibility_select.js.es6 b/app/assets/javascripts/visibility_select.js.es6 new file mode 100644 index 00000000000..a2f8a2395c1 --- /dev/null +++ b/app/assets/javascripts/visibility_select.js.es6 @@ -0,0 +1,29 @@ +(() => { + const global = window.gl || (window.gl = {}); + + const VISIBILITY_DESCRIPTIONS = { + 0: 'Project access must be granted explicitly to each user.', + 10: 'Project access must be granted explicitly to each user.', + 20: 'The project can be cloned without any authentication.', + }; + + class VisibilitySelect { + constructor() { + this.visibilitySelect = document.querySelector('.js-visibility-select'); + this.helpBlock = this.visibilitySelect.querySelector('.help-block'); + this.select = this.visibilitySelect.querySelector('select'); + if (this.select) { + this.visibilityChanged(); + this.select.addEventListener('change', this.visibilityChanged.bind(this)); + } else { + this.helpBlock.textContent = this.visibilitySelect.querySelector('.js-locked').dataset.helpBlock; + } + } + + visibilityChanged() { + this.helpBlock.innerText = VISIBILITY_DESCRIPTIONS[this.select.value]; + } + } + + global.VisibilitySelect = VisibilitySelect; +})(); diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 72b6685d940..dcb327a67c6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -15,10 +15,22 @@ .new_project, .edit-project { + .visibility-select-container { + padding-left: 26px; + + @media(max-width: $screen-md-min) { + padding-left: 15px; + } + } + fieldset { &.features { + .header { + padding-top: $gl-vert-padding; + } + .label-light { margin-bottom: 0; } -- cgit v1.2.1 From 26b0fe8d2e16adf4106859ed578dd2352cde412b Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 22 Nov 2016 07:51:49 -0700 Subject: Align permissions options --- app/assets/javascripts/visibility_select.js.es6 | 2 +- app/assets/stylesheets/pages/projects.scss | 36 +++++++++++-------------- 2 files changed, 16 insertions(+), 22 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/visibility_select.js.es6 b/app/assets/javascripts/visibility_select.js.es6 index a2f8a2395c1..e846e7ead77 100644 --- a/app/assets/javascripts/visibility_select.js.es6 +++ b/app/assets/javascripts/visibility_select.js.es6 @@ -3,7 +3,7 @@ const VISIBILITY_DESCRIPTIONS = { 0: 'Project access must be granted explicitly to each user.', - 10: 'Project access must be granted explicitly to each user.', + 10: 'This project can be cloned by any logged in user.', 20: 'The project can be cloned without any authentication.', }; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index dcb327a67c6..74b058ac94a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -15,29 +15,17 @@ .new_project, .edit-project { - .visibility-select-container { - padding-left: 26px; - - @media(max-width: $screen-md-min) { - padding-left: 15px; + .sharing-and-permissions { + .header { + padding-top: $gl-vert-padding; } - } - - fieldset { - - &.features { - .header { - padding-top: $gl-vert-padding; - } - - .label-light { - margin-bottom: 0; - } + .label-light { + margin-bottom: 0; + } - .help-block { - margin-top: 0; - } + .help-block { + margin-top: 0; } .form-group { @@ -876,10 +864,16 @@ pre.light-well { } } -.project-feature-nested { +.project-feature { @media (min-width: $screen-sm-min) { padding-left: 45px; } + + &.nested { + @media (min-width: $screen-sm-min) { + padding-left: 90px; + } + } } .project-repo-select { -- cgit v1.2.1 From 2c9bb135057f4fea43aa0be5b94354f288d5070f Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Tue, 22 Nov 2016 17:16:30 +0000 Subject: Fixed tests Grab permissions description from backend Review changes Added unit tests --- app/assets/javascripts/dispatcher.js.es6 | 1 - app/assets/javascripts/project_new.js | 10 ++++++++ app/assets/javascripts/visibility_select.js.es6 | 32 ++++++++++++------------- app/assets/stylesheets/pages/projects.scss | 2 ++ 4 files changed, 27 insertions(+), 18 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 237a7dab5e9..413117c2226 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -262,7 +262,6 @@ case 'edit': shortcut_handler = new ShortcutsNavigation(); new ProjectNew(); - new gl.VisibilitySelect(); break; case 'new': new ProjectNew(); diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js index 7fc611d0dad..86d57d97eae 100644 --- a/app/assets/javascripts/project_new.js +++ b/app/assets/javascripts/project_new.js @@ -14,11 +14,21 @@ return $('.save-project-loader').show(); }; })(this)); + + this.initVisibilitySelect(); + this.toggleSettings(); this.toggleSettingsOnclick(); this.toggleRepoVisibility(); } + ProjectNew.prototype.initVisibilitySelect = function() { + const visibilityContainer = document.querySelector('.js-visibility-select'); + if (!visibilityContainer) return; + const visibilitySelect = new gl.VisibilitySelect(visibilityContainer); + visibilitySelect.init(); + }; + ProjectNew.prototype.toggleSettings = function() { var self = this; diff --git a/app/assets/javascripts/visibility_select.js.es6 b/app/assets/javascripts/visibility_select.js.es6 index e846e7ead77..f712d7ba930 100644 --- a/app/assets/javascripts/visibility_select.js.es6 +++ b/app/assets/javascripts/visibility_select.js.es6 @@ -1,29 +1,27 @@ (() => { - const global = window.gl || (window.gl = {}); - - const VISIBILITY_DESCRIPTIONS = { - 0: 'Project access must be granted explicitly to each user.', - 10: 'This project can be cloned by any logged in user.', - 20: 'The project can be cloned without any authentication.', - }; + const gl = window.gl || (window.gl = {}); class VisibilitySelect { - constructor() { - this.visibilitySelect = document.querySelector('.js-visibility-select'); - this.helpBlock = this.visibilitySelect.querySelector('.help-block'); - this.select = this.visibilitySelect.querySelector('select'); + constructor(container) { + if (!container) throw new Error('VisibilitySelect requires a container element as argument 1'); + this.container = container; + this.helpBlock = this.container.querySelector('.help-block'); + this.select = this.container.querySelector('select'); + } + + init() { if (this.select) { - this.visibilityChanged(); - this.select.addEventListener('change', this.visibilityChanged.bind(this)); + this.updateHelpText(); + this.select.addEventListener('change', this.updateHelpText.bind(this)); } else { - this.helpBlock.textContent = this.visibilitySelect.querySelector('.js-locked').dataset.helpBlock; + this.helpBlock.textContent = this.container.querySelector('.js-locked').dataset.helpBlock; } } - visibilityChanged() { - this.helpBlock.innerText = VISIBILITY_DESCRIPTIONS[this.select.value]; + updateHelpText() { + this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description; } } - global.VisibilitySelect = VisibilitySelect; + gl.VisibilitySelect = VisibilitySelect; })(); diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 74b058ac94a..726e5c115b8 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -865,6 +865,8 @@ pre.light-well { } .project-feature { + padding-top: 10px; + @media (min-width: $screen-sm-min) { padding-left: 45px; } -- cgit v1.2.1 From 07c6c8e0a1438f745f9f420b24a66a05a76c4272 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 12 Dec 2016 11:59:22 -0700 Subject: stages render correctly and use new status object --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 9 +++------ app/assets/stylesheets/pages/icons.scss | 8 ++++++++ 2 files changed, 11 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index b313317b0bb..3761977d5db 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -6,16 +6,13 @@ props: ['stage'], computed: { buildStatus() { - return `Build: ${this.stage.status}`; + return `Build: ${this.stage.status.label}`; }, tooltip() { - return `has-tooltip ci-status-icon-${this.stage.status}`; + return `has-tooltip ci-status-icon-${this.stage.status.label}`; }, svg() { - return document - .querySelector( - `.icon_status_${this.stage.status}`, - ).innerHTML; + return document.querySelector(`.${this.stage.status.icon}`).innerHTML; }, }, template: ` diff --git a/app/assets/stylesheets/pages/icons.scss b/app/assets/stylesheets/pages/icons.scss index 226bd2ead31..8210208cbf6 100644 --- a/app/assets/stylesheets/pages/icons.scss +++ b/app/assets/stylesheets/pages/icons.scss @@ -6,6 +6,14 @@ } } +.ci-status-icon-passed { + color: $gl-success; + + svg { + fill: $gl-success; + } +} + .ci-status-icon-failed { color: $gl-danger; -- cgit v1.2.1 From 562df3a3fb6d41c83180b3b3c519920c9e156de5 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 12 Dec 2016 12:11:28 -0700 Subject: pass svg as prop to commit component --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 3 +++ app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 9 +++++---- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 25f5c796a60..ced3e8f2602 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -19,6 +19,7 @@ (() => { const project = document.querySelector('.pipelines'); const entry = document.querySelector('.vue-pipelines-index'); + const svgs = document.querySelector('.pipeline-svgs'); Vue.use(VueResource); @@ -28,6 +29,7 @@ data: { scope: project.dataset.url, store: new gl.PipelineStore(), + svgs: svgs.dataset, }, components: { 'vue-pipelines': gl.VuePipelines, @@ -37,6 +39,7 @@
    diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 2fdcaf3e16c..37fe6c29c5a 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -26,7 +26,7 @@ pageRequest: false, }; }, - props: ['scope', 'store'], + props: ['scope', 'store', 'svgs'], created() { const pagenum = gl.getParameterByName('p'); const scope = gl.getParameterByName('scope'); @@ -81,12 +81,13 @@ -- cgit v1.2.1 From 13798c003eb7c2f2f6ccc1ec5a8728b1ed1a130e Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 13 Dec 2016 09:54:18 -0700 Subject: dynamic API consumption for SVGs --- .../javascripts/vue_pipelines_index/pipelines.js.es6 | 17 +++++++++++++++-- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 4 ++-- .../javascripts/vue_pipelines_index/stages.js.es6 | 4 ++-- 3 files changed, 19 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 37fe6c29c5a..a2b12554494 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -66,6 +66,9 @@ if (pipeline.commit) return pipeline.commit.commit_url; return ''; }, + match(string) { + return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase()); + }, }, template: `
    @@ -77,7 +80,12 @@ - + + - + + diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 3761977d5db..7821ed62bd5 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -3,7 +3,7 @@ ((gl) => { gl.VueStage = Vue.extend({ - props: ['stage'], + props: ['stage', 'svgs', 'match'], computed: { buildStatus() { return `Build: ${this.stage.status.label}`; @@ -12,7 +12,7 @@ return `has-tooltip ci-status-icon-${this.stage.status.label}`; }, svg() { - return document.querySelector(`.${this.stage.status.icon}`).innerHTML; + return this.svgs[this.match(this.stage.status.icon)]; }, }, template: ` diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 index f91c44174de..d7dda9294cd 100644 --- a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 @@ -6,14 +6,14 @@ components: { 'vue-stage': gl.VueStage, }, - props: ['pipeline'], + props: ['pipeline', 'svgs', 'match'], template: `
    - +
    `, -- cgit v1.2.1 From 1f99283519bd9a009e38464e5029d460fe1e290d Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 13 Dec 2016 10:27:34 -0700 Subject: status dynamic --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 2f362d0c69e..fd145f5e066 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -4,7 +4,7 @@ ((gl) => { gl.VueStatusScope = Vue.extend({ props: [ - 'pipeline', + 'pipeline', 'svgs', 'match', ], computed: { cssClasses() { @@ -14,8 +14,7 @@ return cssObject; }, svg() { - return document - .querySelector(`.${this.pipeline.details.status.icon}`).innerHTML; + return this.svgs[this.match(this.pipeline.details.status.icon)]; }, }, template: ` -- cgit v1.2.1 From 7d2ca647df50f66eba40654b0d52fd8a9aa0d30d Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 13 Dec 2016 10:31:09 -0700 Subject: stage icon link --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 7821ed62bd5..9a2aa5af2b4 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -12,6 +12,7 @@ return `has-tooltip ci-status-icon-${this.stage.status.label}`; }, svg() { + // debugger return this.svgs[this.match(this.stage.status.icon)]; }, }, @@ -19,7 +20,7 @@     -- cgit v1.2.1 From f9db61fa7c596816367345de948fc6c92a1eabbe Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 13 Dec 2016 10:38:51 -0700 Subject: add more tests for pagination --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 9a2aa5af2b4..7fcf575b17f 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -12,7 +12,6 @@ return `has-tooltip ci-status-icon-${this.stage.status.label}`; }, svg() { - // debugger return this.svgs[this.match(this.stage.status.icon)]; }, }, -- cgit v1.2.1 From 01c8499a791a9179a0ae875ad26a1fa125e7fe4c Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 13 Dec 2016 22:37:16 +0000 Subject: Fix broken rspec tests --- app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 1c7fa994900..24640ba5fb8 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -18,7 +18,7 @@
    -- cgit v1.2.1 From 438199a50db495fedfd857d844f65947cd8ec6d2 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 09:27:57 -0700 Subject: camel case changepage and make span an a tag --- app/assets/javascripts/vue_pagination/index.js.es6 | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index f0f0b54dd2b..b1de0faade8 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -17,7 +17,7 @@ 'pageInfo', ], methods: { - changepage(e) { + changePage(e) { let pagenum = this.pageInfo.page; let apiScope = gl.getParameterByName('scope'); @@ -91,11 +91,11 @@ disabled: item.disabled }' > - {{item.title}} - +
    -- cgit v1.2.1 From 192d003ad1e33c09eab24fdf145c733a23ba94aa Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 09:30:44 -0700 Subject: add comment about complex regex in pagination --- app/assets/javascripts/vue_pagination/index.js.es6 | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index b1de0faade8..db9b81065cc 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -27,6 +27,8 @@ const { totalPages, nextPage, previousPage } = this.pageInfo; if (text === SPREAD) return; + // the regex here is to read if the string coming in will become a valid string + // had issues with parsing using `+` because `typeof NaN === 'number'` if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) pagenum = +text; if (text === LAST) pagenum = totalPages; if (text === NEXT) pagenum = nextPage; -- cgit v1.2.1 From 0dcd30b4a8ea9a10f2db6506c91bcf005a697186 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 09:33:46 -0700 Subject: fix comment formatting --- app/assets/javascripts/vue_pagination/index.js.es6 | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index db9b81065cc..872c2b11a11 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -27,8 +27,10 @@ const { totalPages, nextPage, previousPage } = this.pageInfo; if (text === SPREAD) return; - // the regex here is to read if the string coming in will become a valid string - // had issues with parsing using `+` because `typeof NaN === 'number'` + /** + the regex here is to read if the string coming in will become a valid number + had issues with parsing using `+` because `typeof NaN === 'number'` + */ if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) pagenum = +text; if (text === LAST) pagenum = totalPages; if (text === NEXT) pagenum = nextPage; -- cgit v1.2.1 From 0380fdb4206fb0c589a40adda1e1c72520e35394 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 09:40:40 -0700 Subject: cache timeAgo object --- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 33a1744fa82..be3cd41594c 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -11,6 +11,9 @@ 'pipeline', ], computed: { + timeAgo() { + return gl.utils.getTimeago(); + }, localTimeFinished() { return gl.utils.formatDate(this.pipeline.details.finished_at); }, @@ -25,7 +28,7 @@ options.timeZoneName = 'short'; const finished = this.pipeline.details.finished_at; if (!finished && changeTime) return false; - return ({ words: gl.utils.getTimeago().format(finished) }); + return ({ words: this.timeAgo.format(finished) }); }, }, methods: { -- cgit v1.2.1 From 696864eacd88f771839b24a0ceb34cbd346048d1 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 10:00:30 -0700 Subject: remove need for complex regex in pagination - add else if --- app/assets/javascripts/vue_pagination/index.js.es6 | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 872c2b11a11..54c7ae9b510 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -26,16 +26,23 @@ const text = e.target.innerText; const { totalPages, nextPage, previousPage } = this.pageInfo; - if (text === SPREAD) return; /** the regex here is to read if the string coming in will become a valid number had issues with parsing using `+` because `typeof NaN === 'number'` */ - if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) pagenum = +text; - if (text === LAST) pagenum = totalPages; - if (text === NEXT) pagenum = nextPage; - if (text === PREV) pagenum = previousPage; - if (text === FIRST) pagenum = 1; + if (text === SPREAD) { + return; + } else if (text === LAST) { + pagenum = totalPages; + } else if (text === NEXT) { + pagenum = nextPage; + } else if (text === PREV) { + pagenum = previousPage; + } else if (text === FIRST) { + pagenum = 1; + } else { + pagenum = +text; + } this.change(pagenum, apiScope); }, -- cgit v1.2.1 From 5151b15c71d9d9805b060f4f47c00c4f72516296 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 10:04:26 -0700 Subject: comments on turbolinks event handling --- app/assets/javascripts/vue_pagination/index.js.es6 | 4 ---- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 54c7ae9b510..25d1af664b3 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -26,10 +26,6 @@ const text = e.target.innerText; const { totalPages, nextPage, previousPage } = this.pageInfo; - /** - the regex here is to read if the string coming in will become a valid number - had issues with parsing using `+` because `typeof NaN === 'number'` - */ if (text === SPREAD) { return; } else if (text === LAST) { diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 7d8316d6d20..619fd094996 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -63,12 +63,16 @@ window.removeEventListener('beforeunload', () => {}); window.removeEventListener('focus', () => {}); window.removeEventListener('blur', () => {}); + + // turbolinks event handler document.removeEventListener('page:fetch', () => {}); }; window.addEventListener('beforeunload', removeTimeIntervals); window.addEventListener('focus', startIntervalLoops); window.addEventListener('blur', removeTimeIntervals); + + // turbolinks event handler document.addEventListener('page:fetch', removeAll); } }; -- cgit v1.2.1 From 3f21b9573313445b18df999b554e002bc05635c2 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 10:12:39 -0700 Subject: change to 'Latest pipeline for this branch' --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index 99ecdf3fed0..bf24392b82f 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -40,7 +40,7 @@ v-if='pipeline.flags.latest === true' class="label label-success has-tooltip" title="" - data-original-title="Latest build for this branch" + data-original-title="Latest pipeline for this branch" > latest -- cgit v1.2.1 From 2dfb7e882626f41d3a1b5b4c2e30038079c7a1bc Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 10:21:45 -0700 Subject: pageNum is now camelCased --- app/assets/javascripts/vue_pagination/index.js.es6 | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 25d1af664b3..712fa8442bc 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -18,7 +18,7 @@ ], methods: { changePage(e) { - let pagenum = this.pageInfo.page; + let pageNum = this.pageInfo.page; let apiScope = gl.getParameterByName('scope'); if (!apiScope) apiScope = 'all'; @@ -29,18 +29,18 @@ if (text === SPREAD) { return; } else if (text === LAST) { - pagenum = totalPages; + pageNum = totalPages; } else if (text === NEXT) { - pagenum = nextPage; + pageNum = nextPage; } else if (text === PREV) { - pagenum = previousPage; + pageNum = previousPage; } else if (text === FIRST) { - pagenum = 1; + pageNum = 1; } else { - pagenum = +text; + pageNum = +text; } - this.change(pagenum, apiScope); + this.change(pageNum, apiScope); }, }, computed: { -- cgit v1.2.1 From 40f433125e5747deb434e17669127cde250a6585 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 10:28:17 -0700 Subject: strict props for easier re-use --- app/assets/javascripts/vue_pagination/index.js.es6 | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 712fa8442bc..54407c5ceef 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -12,10 +12,16 @@ const LAST = 'Last >>'; gl.VueGlPagination = Vue.extend({ - props: [ - 'change', - 'pageInfo', - ], + props: { + change: { + type: Function, + required: true, + }, + pageInfo: { + type: Object, + required: true, + }, + }, methods: { changePage(e) { let pageNum = this.pageInfo.page; -- cgit v1.2.1 From 9eed507dafbfdd09fcd51b970d633ba0fd764d78 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 10:32:44 -0700 Subject: add examples of what the props need to be --- app/assets/javascripts/vue_pagination/index.js.es6 | 35 ++++++++++++++++++++++ 1 file changed, 35 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 54407c5ceef..3889e6d6d28 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -13,10 +13,45 @@ gl.VueGlPagination = Vue.extend({ props: { + + /** + This function will take the information given by the pagination component + And make a new API call from the parent + + Here is an example `change` method: + + change(pagenum, apiScope) { + window.history.pushState({}, null, `?scope=${apiScope}&p=${pagenum}`); + clearInterval(this.timeLoopInterval); + this.pageRequest = true; + this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope); + }, + */ + change: { type: Function, required: true, }, + + /** + pageInfo will come from the headers of the API call + in the `.then` clause of the VueResource API call + there should be a function that contructs the pageInfo for this component + + This is an example: + + const pageInfo = (headers) => { + const values = {}; + values.perPage = +headers['X-Per-Page']; + values.page = +headers['X-Page']; + values.total = +headers['X-Total']; + values.totalPages = +headers['X-Total-Pages']; + values.nextPage = +headers['X-Next-Page']; + values.previousPage = +headers['X-Prev-Page']; + return values; + }; + */ + pageInfo: { type: Object, required: true, -- cgit v1.2.1 From 27a4aef5848d36b38c861c952a098f85562a31df Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 15 Dec 2016 14:46:35 -0700 Subject: use boards interceptor --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 3 ++- app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 | 8 -------- 2 files changed, 2 insertions(+), 9 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index ced3e8f2602..8f3e211aac8 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -5,7 +5,8 @@ //= require vue-resource -//= require ./interceptor.js.es6 +/*= require boards/vue_resource_interceptor */ + //= require ./status.js.es6 //= require ./store.js.es6 //= require ./pipeline_url.js.es6 diff --git a/app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 b/app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 deleted file mode 100644 index 80f137ca12e..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/interceptor.js.es6 +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable */ -Vue.http.interceptors.push((request, next) => { - Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1; - - next(function (response) { - Vue.activeResources--; - }); -}); -- cgit v1.2.1 From db43813aa0118852d7529b9ec856d6cca19540ad Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 15:37:18 -0700 Subject: add CONST and one line a tag in pagination - add request to false in store handler --- app/assets/javascripts/vue_pagination/index.js.es6 | 9 +++------ app/assets/javascripts/vue_pipelines_index/index.js.es6 | 14 ++++++-------- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 7 ++++--- 3 files changed, 13 insertions(+), 17 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 3889e6d6d28..6aeb6d3b37b 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -5,6 +5,7 @@ ((gl) => { const PAGINATION_UI_BUTTON_LIMIT = 4; + const UI_LIMIT = 6; const SPREAD = '...'; const PREV = 'Prev'; const NEXT = 'Next'; @@ -104,7 +105,7 @@ items.push({ title: PREV, disabled: true }); } - if (page > 6) items.push({ title: SPREAD, separator: true }); + if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true }); const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1); const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total); @@ -139,11 +140,7 @@ disabled: item.disabled }' > - - {{item.title}} - + {{item.title}}
    diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 8f3e211aac8..bad24ce41d0 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -36,14 +36,12 @@ 'vue-pipelines': gl.VuePipelines, }, template: ` -
    - - -
    + + `, }); } diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 619fd094996..46c27b1c38a 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -34,9 +34,10 @@ updatePipelineNums(this.count); this.pageRequest = false; - }, () => new Flash( - 'Something went wrong on our end.', - )); + }, () => { + this.pageRequest = false; + return new Flash('Something went wrong on our end.'); + }); goFetch(); -- cgit v1.2.1 From b08f92928058b395d2d6666b13ccb113bd78efbf Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 15:42:05 -0700 Subject: interval event handlers - keep page:fetch listener null --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 46c27b1c38a..3cd31dbffe7 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -60,10 +60,9 @@ }; const removeAll = () => { - removeTimeIntervals(); - window.removeEventListener('beforeunload', () => {}); - window.removeEventListener('focus', () => {}); - window.removeEventListener('blur', () => {}); + window.removeEventListener('beforeunload', removeTimeIntervals); + window.removeEventListener('focus', startIntervalLoops); + window.removeEventListener('blur', removeTimeIntervals); // turbolinks event handler document.removeEventListener('page:fetch', () => {}); -- cgit v1.2.1 From 1e237c9f906460ee13155ee63f91f42bb8f93d3a Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 15:46:15 -0700 Subject: computed for actions and artifacts --- .../javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 24640ba5fb8..491403c8b59 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -6,6 +6,14 @@ props: [ 'pipeline', ], + computed: { + actions() { + return this.pipeline.details.manual_actions.length > 0; + }, + artifacts() { + return this.pipeline.details.artifacts.length > 0; + }, + }, methods: { download(name) { return `Download ${name} artifacts`; @@ -17,7 +25,7 @@
    Date: Fri, 16 Dec 2016 15:48:24 -0700 Subject: fix v-ifs in pipeline_url --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index bf24392b82f..87e516d2f14 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -37,7 +37,7 @@ API stuck -- cgit v1.2.1 From 0b207930e0196d025e893ab2228682c38f364903 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 15:50:28 -0700 Subject: refactor pageValues --- .../javascripts/vue_pipelines_index/store.js.es6 | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 3cd31dbffe7..04fde27af58 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -2,16 +2,14 @@ /* eslint-disable no-param-reassign, no-underscore-dangle */ ((gl) => { - const pageValues = (headers) => { - const values = {}; - values.perPage = +headers['X-Per-Page']; - values.page = +headers['X-Page']; - values.total = +headers['X-Total']; - values.totalPages = +headers['X-Total-Pages']; - values.nextPage = +headers['X-Next-Page']; - values.previousPage = +headers['X-Prev-Page']; - return values; - }; + const pageValues = headers => ({ + perPage: +headers['X-Per-Page'], + page: +headers['X-Page'], + total: +headers['X-Total'], + totalPages: +headers['X-Total-Pages'], + nextPage: +headers['X-Next-Page'], + previousPage: +headers['X-Prev-Page'], + }); gl.PipelineStore = class { fetchDataLoop(Vue, pageNum, url, apiScope) { -- cgit v1.2.1 From 4c620d6b136d3b294e0935a8d13ba102761393e1 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 15:50:56 -0700 Subject: change example function in pagination component --- app/assets/javascripts/vue_pagination/index.js.es6 | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 6aeb6d3b37b..7df15f9d4af 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -41,16 +41,14 @@ This is an example: - const pageInfo = (headers) => { - const values = {}; - values.perPage = +headers['X-Per-Page']; - values.page = +headers['X-Page']; - values.total = +headers['X-Total']; - values.totalPages = +headers['X-Total-Pages']; - values.nextPage = +headers['X-Next-Page']; - values.previousPage = +headers['X-Prev-Page']; - return values; - }; + const pageInfo = headers => ({ + perPage: +headers['X-Per-Page'], + page: +headers['X-Page'], + total: +headers['X-Total'], + totalPages: +headers['X-Total-Pages'], + nextPage: +headers['X-Next-Page'], + previousPage: +headers['X-Prev-Page'], + }); */ pageInfo: { -- cgit v1.2.1 From 715461a9bc74ad732872577e506ff00703fd108c Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 15:59:13 -0700 Subject: pipline user for pipeline_url refactor --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index 87e516d2f14..96baef32a9f 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -8,8 +8,7 @@ ], computed: { user() { - if (this.pipeline.user) return true; - return false; + return !!this.pipeline.user; }, }, template: ` -- cgit v1.2.1 From e8b55c51d87e06825f2ea27e2ce32f810ff2fb20 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 16:03:01 -0700 Subject: refactor commitSha - commitUrl - commitTitle in pipelines.js.es6 --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index a2b12554494..4a907eec681 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -55,16 +55,13 @@ return ({ name: ref.name, tag: ref['tag?'], ref_url: ref.url }); }, commitTitle(pipeline) { - if (pipeline.commit) return pipeline.commit.title; - return ''; + return pipeline.commit ? pipeline.commit.title : ''; }, commitSha(pipeline) { - if (pipeline.commit) return pipeline.commit.short_id; - return ''; + return pipeline.commit ? pipeline.commit.short_id : ''; }, commitUrl(pipeline) { - if (pipeline.commit) return pipeline.commit.commit_url; - return ''; + return pipeline.commit ? pipeline.commit.commit_url : ''; }, match(string) { return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase()); -- cgit v1.2.1 From e98cdf4b2070c27da76cfa4ba3d5e2022ff08b19 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 16:12:52 -0700 Subject: all svgs from index haml --- .../vue_pipelines_index/pipeline_actions.js.es6 | 20 +++----------------- .../javascripts/vue_pipelines_index/pipelines.js.es6 | 4 ++-- .../javascripts/vue_pipelines_index/time_ago.js.es6 | 15 ++------------- 3 files changed, 7 insertions(+), 32 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 491403c8b59..b568d3a75a2 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -3,9 +3,7 @@ ((gl) => { gl.VuePipelineActions = Vue.extend({ - props: [ - 'pipeline', - ], + props: ['pipeline', 'svgs'], computed: { actions() { return this.pipeline.details.manual_actions.length > 0; @@ -31,13 +29,7 @@ title="Manual build" alt="Manual Build" > - - - - +
      @@ -48,13 +40,7 @@ :href='action.url' title="Manual build" > - - - - + {{action.name}} diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 4a907eec681..b82d8f1a0db 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -102,8 +102,8 @@ :match='match' > - - + + diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index be3cd41594c..7559fd55803 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -7,9 +7,7 @@ currentTime: new Date(), }; }, - props: [ - 'pipeline', - ], + props: ['pipeline', 'svgs'], computed: { timeAgo() { return gl.utils.getTimeago(); @@ -45,16 +43,7 @@ template: `

      - - - - - + {{duration()}}

      -- cgit v1.2.1 From 0dc5a21c9a7b78845c4e2ad1297a8a77c3dfb3e3 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 16 Dec 2016 16:38:03 -0700 Subject: refactor styling for icon success-passing --- app/assets/stylesheets/framework/icons.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 8210208cbf6..e0790107608 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -1,11 +1,4 @@ -.ci-status-icon-success { - color: $gl-success; - - svg { - fill: $gl-success; - } -} - +.ci-status-icon-success, .ci-status-icon-passed { color: $gl-success; -- cgit v1.2.1 From fecebc7991283e5f9aff89119bb2e4dcde9deeab Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 14 Dec 2016 13:47:16 +0000 Subject: Fixed new line being included in bold/italic in GFM form Closes #25456 --- app/assets/javascripts/lib/utils/text_utility.js | 25 +++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index ac44b81ee22..cf286dc30ee 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -44,9 +44,18 @@ } }; gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) { - var insertText, inserted, selectedSplit, startChar; + var insertText, inserted, selectedSplit, startChar, removedLastNewLine; + removedLastNewLine = false; + + // Remove the last newline + if (textArea.selectionEnd - textArea.selectionStart > selected.replace(/\n$/, '').length) { + removedLastNewLine = true; + selected = selected.replace(/\n$/, ''); + } + selectedSplit = selected.split('\n'); startChar = !wrap && textArea.selectionStart > 0 ? '\n' : ''; + if (selectedSplit.length > 1 && (!wrap || (blockTag != null))) { if (blockTag != null) { insertText = this.blockTagText(text, textArea, blockTag, selected); @@ -62,6 +71,11 @@ } else { insertText = "" + startChar + tag + selected + (wrap ? tag : ' '); } + + if (removedLastNewLine) { + insertText += '\n'; + } + if (document.queryCommandSupported('insertText')) { inserted = document.execCommand('insertText', false, insertText); } @@ -74,9 +88,9 @@ document.execCommand("ms-endUndoUnit"); } catch (error) {} } - return this.moveCursor(textArea, tag, wrap); + return this.moveCursor(textArea, tag, wrap, removedLastNewLine); }; - gl.text.moveCursor = function(textArea, tag, wrapped) { + gl.text.moveCursor = function(textArea, tag, wrapped, removedLastNewLine) { var pos; if (!textArea.setSelectionRange) { return; @@ -87,6 +101,11 @@ } else { pos = textArea.selectionStart; } + + if (removedLastNewLine) { + pos -= 1; + } + return textArea.setSelectionRange(pos, pos); } }; -- cgit v1.2.1 From 9f47d317c547eb49c59e01f9c5a887b9ffb7f500 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Wed, 21 Dec 2016 12:25:54 +0100 Subject: Fix parentheses in pipelines.scss after a merge --- app/assets/stylesheets/pages/pipelines.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index d57f32516ac..bfcdb1f2028 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -37,6 +37,7 @@ .branch-name { max-width: 195px; } + } .pipeline-date, .pipeline-status { @@ -118,7 +119,6 @@ } .branch-commit { - .branch-name { font-weight: bold; max-width: 120px; -- cgit v1.2.1 From a713a29aadd2908c0ad7079f5b24033736a96d9c Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 19 Dec 2016 15:26:10 +0000 Subject: Fixed first newline not working --- app/assets/javascripts/lib/utils/text_utility.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index cf286dc30ee..5066e3282d7 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -44,8 +44,15 @@ } }; gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) { - var insertText, inserted, selectedSplit, startChar, removedLastNewLine; + var insertText, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine; removedLastNewLine = false; + removedFirstNewLine = false; + + // Remove the first newline + if (selected.indexOf('\n') === 0) { + removedFirstNewLine = true; + selected = selected.replace(/\n+/, ''); + } // Remove the last newline if (textArea.selectionEnd - textArea.selectionStart > selected.replace(/\n$/, '').length) { @@ -72,6 +79,10 @@ insertText = "" + startChar + tag + selected + (wrap ? tag : ' '); } + if (removedFirstNewLine) { + insertText = '\n' + insertText; + } + if (removedLastNewLine) { insertText += '\n'; } -- cgit v1.2.1 From 28d32033629d6262013a84d74f781280b1988a7a Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 21 Dec 2016 17:23:31 -0700 Subject: change retry and canel '_url' to '_path' --- .../javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index b568d3a75a2..65aa3ff07d2 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -71,22 +71,22 @@

    -- cgit v1.2.1 From 6a7af99a42a13d87cd4c8c2ea757464d2b0f9ce4 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 21 Dec 2016 17:30:27 -0700 Subject: changed label to group for css --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 7fcf575b17f..d214092f412 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -9,7 +9,7 @@ return `Build: ${this.stage.status.label}`; }, tooltip() { - return `has-tooltip ci-status-icon-${this.stage.status.label}`; + return `has-tooltip ci-status-icon-${this.stage.status.group}`; }, svg() { return this.svgs[this.match(this.stage.status.icon)]; diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index fd145f5e066..55efb8ebae4 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -10,7 +10,7 @@ cssClasses() { const cssObject = {}; cssObject['ci-status'] = true; - cssObject[`ci-${this.pipeline.details.status.text}`] = true; + cssObject[`ci-${this.pipeline.details.status.group}`] = true; return cssObject; }, svg() { -- cgit v1.2.1 From 2d1218991c1cd5b7b56e15ccc8d7c47d4b8e6cd0 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 21 Dec 2016 18:06:23 -0700 Subject: use path instead of url for commit ref and pipeline url --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index 96baef32a9f..92c343e33da 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -13,7 +13,7 @@ }, template: ` - + #{{pipeline.id}} by diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index b82d8f1a0db..a16c1e5bef9 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -52,7 +52,7 @@ }, ref(pipeline) { const { ref } = pipeline; - return ({ name: ref.name, tag: ref['tag?'], ref_url: ref.url }); + return ({ name: ref.name, tag: ref.tag, ref_url: ref.path }); }, commitTitle(pipeline) { return pipeline.commit ? pipeline.commit.title : ''; @@ -61,7 +61,7 @@ return pipeline.commit ? pipeline.commit.short_id : ''; }, commitUrl(pipeline) { - return pipeline.commit ? pipeline.commit.commit_url : ''; + return pipeline.commit ? pipeline.commit.commit_path : ''; }, match(string) { return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase()); -- cgit v1.2.1 From c0e5e69f9dc778bfe60e8362b72866413672c06f Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 23 Dec 2016 16:23:19 -0700 Subject: fix manual build tests --- app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 65aa3ff07d2..f658cfd077c 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -37,7 +37,7 @@ @@ -60,7 +60,7 @@
  • {{download(artifact.name)}} -- cgit v1.2.1 From 115536fbfa9904cef459bb735d29f20756887ebe Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 23 Dec 2016 16:28:37 -0700 Subject: use flags for retry and cancel logic --- app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index f658cfd077c..ad5cb30cc42 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -71,7 +71,7 @@
    • Date: Fri, 23 Dec 2016 16:54:03 -0700 Subject: get rid of nested spans in status component --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 55efb8ebae4..f8decb17ca8 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -19,11 +19,8 @@ }, template: ` - - - -  {{pipeline.details.status.text}} - + + `, -- cgit v1.2.1 From e56254d38ab4a3c3deeacadbc2388b76d932805d Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 24 Dec 2016 14:04:17 -0700 Subject: remove use of span for svg and status text --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index f8decb17ca8..edb24ced080 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -18,9 +18,12 @@ }, }, template: ` - - - + + `, -- cgit v1.2.1 From 725ba04e0376c8909e75448f4407eca0fba6c807 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 26 Dec 2016 14:24:15 -0700 Subject: wip --- .../javascripts/vue_pipelines_index/stage.js.es6 | 56 +++++++++++++++++++--- 1 file changed, 49 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index d214092f412..42d237cb2cc 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -3,6 +3,12 @@ ((gl) => { gl.VueStage = Vue.extend({ + data() { + return { + request: false, + builds: '
      ', + }; + }, props: ['stage', 'svgs', 'match'], computed: { buildStatus() { @@ -14,15 +20,51 @@ svg() { return this.svgs[this.match(this.stage.status.icon)]; }, + spanClass() { + return `ci-status-icon ci-status-icon-${this.stage.status.group}`; + }, }, template: ` - - +
      +
      + +
      +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      `, }); })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 9b5bbf0a343d7730f08b61112d73579025f2208b Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 26 Dec 2016 14:34:03 -0700 Subject: add api call - get mock url next --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 42d237cb2cc..d5f7194979b 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -1,4 +1,4 @@ -/* global Vue, gl */ +/* global Vue, Flash, gl */ /* eslint-disable no-param-reassign */ ((gl) => { @@ -23,6 +23,17 @@ spanClass() { return `ci-status-icon ci-status-icon-${this.stage.status.group}`; }, + methods: { + fetchBuilds() { + this.$http.get(this.stage.status.endpoint) + .then((response) => { + Vue.set(this, 'builds', response.html); + Vue.set(this, 'response', true); + }, () => new Flash( + 'Something went wrong on our end.', + )); + }, + }, }, template: `
      -- cgit v1.2.1 From 8a7f58d21337b8858ae8e3e57f052eed1026687f Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 26 Dec 2016 14:59:48 -0700 Subject: mini-graph shows up from API call - need to fix state bugs --- .../javascripts/vue_pipelines_index/stage.js.es6 | 36 ++++++++++++++-------- 1 file changed, 24 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index d5f7194979b..944f84f7880 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -10,7 +10,28 @@ }; }, props: ['stage', 'svgs', 'match'], + methods: { + fetchBuilds() { + this.$http.get(this.endpoint) + .then((response) => { + this.builds = JSON.parse(response.body).html; + this.request = true; + }, () => new Flash( + 'Something went wrong on our end.', + )); + }, + clearState() { + this.response = false; + this.builds = '
        '; + }, + }, computed: { + endpoint() { + return '/gitlab-org/gitlab-shell/pipelines/121/stage?stage=deploy'; + }, + stageTitle() { + return 'deploy: running'; + }, buildStatus() { return `Build: ${this.stage.status.label}`; }, @@ -23,26 +44,17 @@ spanClass() { return `ci-status-icon ci-status-icon-${this.stage.status.group}`; }, - methods: { - fetchBuilds() { - this.$http.get(this.stage.status.endpoint) - .then((response) => { - Vue.set(this, 'builds', response.html); - Vue.set(this, 'response', true); - }, () => new Flash( - 'Something went wrong on our end.', - )); - }, - }, }, template: `
        -- cgit v1.2.1 From c9fad91d042453530bdb886f6df5ed3b7a2b7f8f Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 26 Dec 2016 15:29:03 -0700 Subject: remove v-if to let spinner show --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 5fcfae2375c..fe8e94ac7a7 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -84,7 +84,6 @@
        -- cgit v1.2.1 From e077cebe5003ff93671a147aad8266e5b0dbd04d Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 26 Dec 2016 16:09:27 -0700 Subject: add borderless svgs --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index fe8e94ac7a7..b7da52ad01b 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -16,9 +16,7 @@ this.$http.get(this.endpoint) .then((response) => { this.request = true; - setTimeout(() => { - this.builds = JSON.parse(response.body).html; - }, 100); + this.builds = JSON.parse(response.body).html; }, () => new Flash( 'Something went wrong on our end.', )); @@ -30,8 +28,7 @@ }, computed: { buildsOrSpinner() { - if (this.request) return this.builds; - return this.spinner; + return this.request ? this.builds : this.spinner; }, dropdownClass() { if (this.request) return 'js-builds-dropdown-container'; @@ -50,7 +47,9 @@ return `has-tooltip ci-status-icon-${this.stage.status.group}`; }, svg() { - return this.svgs[this.match(this.stage.status.icon)]; + const icon = this.stage.status.icon; + icon.replace('icon', 'stageIcon'); + return this.svgs[this.match(icon)]; }, spanClass() { return `ci-status-icon ci-status-icon-${this.stage.status.group}`; @@ -58,10 +57,10 @@ }, template: `
        +
        +
        @@ -90,6 +90,7 @@
        +
        `, }); -- cgit v1.2.1 From 6a110c00b52b0e312f06249c5fd597f39ababe87 Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 27 Dec 2016 11:15:19 -0700 Subject: hook up new API key values to stage dropdown mini graph in vue --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index b7da52ad01b..026fba80ca2 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -13,7 +13,7 @@ props: ['stage', 'svgs', 'match'], methods: { fetchBuilds() { - this.$http.get(this.endpoint) + this.$http.get(this.stage.dropdown_path) .then((response) => { this.request = true; this.builds = JSON.parse(response.body).html; @@ -34,12 +34,6 @@ if (this.request) return 'js-builds-dropdown-container'; return 'js-builds-dropdown-loading builds-dropdown-loading'; }, - endpoint() { - return '/gitlab-org/gitlab-shell/pipelines/121/stage?stage=deploy'; - }, - stageTitle() { - return 'deploy: running'; - }, buildStatus() { return `Build: ${this.stage.status.label}`; }, @@ -63,7 +57,7 @@ @click='fetchBuilds' class="has-tooltip builds-dropdown js-builds-dropdown-button" data-placement="top" - :title='stageTitle' + :title='stage.title' data-toggle="dropdown" type="button" > -- cgit v1.2.1 From 5e558af7a0cb77f58271b02039966ecf6c8df84c Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 27 Dec 2016 11:42:55 -0700 Subject: remove mini-graph js from dispatcher for pipelines:index --- app/assets/javascripts/dispatcher.js.es6 | 5 ----- 1 file changed, 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index a118003617d..6a84f52d8df 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -173,11 +173,6 @@ new TreeView(); } break; - case 'projects:pipelines:index': - // new gl.MiniPipelineGraph({ - // container: '.js-pipeline-table', - // }); - break; case 'projects:pipelines:builds': case 'projects:pipelines:show': const { controllerAction } = document.querySelector('.js-pipeline-container').dataset; -- cgit v1.2.1 From 75bddd01d0b611fcd45e8a9789e7f8e650e5850b Mon Sep 17 00:00:00 2001 From: Regis Date: Tue, 27 Dec 2016 12:24:11 -0700 Subject: avoid making multiple calls on blur on collapse click events --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 026fba80ca2..920ae5dac9a 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -13,7 +13,13 @@ props: ['stage', 'svgs', 'match'], methods: { fetchBuilds() { - this.$http.get(this.stage.dropdown_path) + if (this.request) { + this.request = false; + this.builds = ''; + return null; + } + + return this.$http.get(this.stage.dropdown_path) .then((response) => { this.request = true; this.builds = JSON.parse(response.body).html; @@ -55,6 +61,7 @@
        + + + + -
        -
        -
        -
        -
        +
        +
        +
        +
        diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 index d7dda9294cd..a3b2700adfa 100644 --- a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 @@ -10,7 +10,7 @@ template: `
        -- cgit v1.2.1 From 7ad170d850ea67bf39da818a3d5e6654484b1432 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 28 Dec 2016 13:40:30 -0700 Subject: fix spacing on both sides for stages - svgs next --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index a12b1a71a2d..45f6cfea240 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -63,14 +63,15 @@ data-toggle="dropdown" type="button" > - - - - - + + + + + + -- cgit v1.2.1 From 3c9ac6c36704029a36e73e569e5a019b697e562a Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 28 Dec 2016 13:55:48 -0700 Subject: fix svgs for stages --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 45f6cfea240..23e70197432 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -44,8 +44,8 @@ }, svg() { const icon = this.stage.status.icon; - icon.replace('icon', 'stageIcon'); - return this.svgs[this.match(icon)]; + const stageIcon = icon.replace(/icon/i, 'stage_icon'); + return this.svgs[this.match(stageIcon)]; }, spanClass() { return `ci-status-icon ci-status-icon-${this.stage.status.group}`; -- cgit v1.2.1 From c40ab1686dd74bec4c6144cc1c3a03ed1ac35e0e Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 28 Dec 2016 14:26:06 -0700 Subject: add commit-link class to status column tds --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index edb24ced080..217df5e2f16 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -18,7 +18,7 @@ }, }, template: ` - + Date: Wed, 28 Dec 2016 14:32:15 -0700 Subject: use stylesheet from master --- app/assets/stylesheets/pages/pipelines.scss | 1422 +++++++++++++-------------- 1 file changed, 708 insertions(+), 714 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 619f79ee3c5..d9ae3b4a95f 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,614 +1,651 @@ -.pipelines { - .realtime-loading { - font-size: 40px; - text-align: center; - } - - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .commit-title { - margin: 0; - } - - .controls { - white-space: nowrap; - } - - .btn { - margin: 4px; - } - - .table.ci-table { - min-width: 1200px; - table-layout: fixed; - - .pipeline-id { - color: $black; + .pipelines { + .realtime-loading { + font-size: 40px; + text-align: center; } - .branch-commit { - .branch-name { - max-width: 195px; - } + .stage { + max-width: 90px; + width: 90px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .pipeline-date, - .pipeline-status { - width: 10%; + .commit-title { + margin: 0; } - .pipeline-info, - .pipeline-commit, - .pipeline-actions, - .pipeline-stages { - width: 20%; + .controls { + white-space: nowrap; } - } -} -@media (max-width: $screen-md-max) { - .content-list { - &.pipelines, - &.builds-content-list { - width: 100%; - overflow: auto; + .btn { + margin: 4px; } - } -} -.content-list.pipelines .table-holder { - min-height: 300px; -} + .table.ci-table { + min-width: 1200px; + table-layout: fixed; -.pipeline-holder { - width: 100%; - overflow: auto; -} - -.table.ci-table { - min-width: 900px; - - &.pipeline { - min-width: 650px; - } + .pipeline-id { + color: $black; + } - &.builds-page { + .pipeline-date, + .pipeline-status { + width: 10%; + } - tr { - height: 71px; + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; + } } } - tr { - th { - padding: 16px 8px; - border: none; - } - - td { - padding: 10px 8px; - } - - .commit-link { - padding: 9px 8px 10px; + @media (max-width: $screen-md-max) { + .content-list { + &.pipelines, + &.builds-content-list { + width: 100%; + overflow: auto; + } } } - tbody { - border-top-width: 1px; + .content-list.pipelines .table-holder { + min-height: 300px; } - .build.retried { - background-color: $gray-lightest; + .pipeline-holder { + width: 100%; + overflow: auto; } - .commit-link { - a { - &:focus { - text-decoration: none; - } - } + .table.ci-table { + min-width: 900px; - a:hover { - text-decoration: none; + &.pipeline { + min-width: 650px; } - } - .avatar { - margin-left: 0; - float: none; - } + &.builds-page { - .branch-commit { - .branch-name { - font-weight: bold; - max-width: 120px; - overflow: hidden; - display: inline-block; - white-space: nowrap; - vertical-align: top; - text-overflow: ellipsis; + tr { + height: 71px; + } } - svg { - height: 14px; - width: 14px; - vertical-align: middle; - fill: $gl-gray-light; - } + tr { + th { + padding: 16px 8px; + border: none; + } - .fa { - font-size: 12px; - color: $gl-text-color; - } + td { + padding: 10px 8px; + } - .commit-id { - color: $gl-link-color; + .commit-link { + padding: 9px 8px 10px; + } } - .commit-title { - margin-top: 4px; - max-width: 225px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + tbody { + border-top-width: 1px; } - .label { - margin-right: 4px; + .build.retried { + background-color: $gray-lightest; } - .label-container { - font-size: 0; + .commit-link { + a { + &:focus { + text-decoration: none; + } + } - .label { - margin-top: 5px; + a:hover { + text-decoration: none; } } - } - .icon-container { - display: inline-block; - width: 10px; - - &.commit-icon { - width: 15px; - text-align: center; + .avatar { + margin-left: 0; + float: none; } - } - .stage-cell { - font-size: 0; + .branch-commit { - svg { - height: 18px; - width: 18px; - position: relative; - z-index: 2; - vertical-align: middle; - overflow: visible; - } + .branch-name { + font-weight: bold; + max-width: 120px; + overflow: hidden; + display: inline-block; + white-space: nowrap; + vertical-align: top; + text-overflow: ellipsis; + } - .stage-container { - display: inline-block; - position: relative; - margin-right: 6px; + svg { + height: 14px; + width: 14px; + vertical-align: middle; + fill: $gl-gray-light; + } + + .fa { + font-size: 12px; + color: $gl-text-color; + } + + .commit-id { + color: $gl-link-color; + } - .tooltip { + .commit-title { + margin-top: 4px; + max-width: 225px; + overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; } - &:not(:last-child) { - &::after { - content: ''; - width: 8px; - position: absolute; - right: -7px; - top: 10px; - border-bottom: 2px solid $border-color; + .label { + margin-right: 4px; + } + + .label-container { + font-size: 0; + + .label { + margin-top: 5px; } } } - } - .duration, - .finished-at { - color: $gl-gray-light; - margin: 4px 0; + .icon-container { + display: inline-block; + width: 10px; - .fa { - font-size: 12px; - margin-right: 4px; + &.commit-icon { + width: 15px; + text-align: center; + } } - svg { - width: 12px; - height: 12px; - vertical-align: middle; - margin-right: 4px; - } - } + .stage-cell { + font-size: 0; - .pipeline-actions { - min-width: 140px; + svg { + height: 18px; + width: 18px; + position: relative; + z-index: 2; + vertical-align: middle; + overflow: visible; + } - .btn { - margin: 0; - color: $gl-gray-light; - } + .stage-container { + display: inline-block; + position: relative; + margin-right: 6px; - .cancel-retry-btns { - vertical-align: middle; + .tooltip { + white-space: nowrap; + } - .btn:not(:first-child) { - margin-left: 8px; + &:not(:last-child) { + &::after { + content: ''; + width: 8px; + position: absolute; + right: -7px; + top: 10px; + border-bottom: 2px solid $border-color; + } + } } } - .dropdown-toggle, - .dropdown-menu { + .duration, + .finished-at { color: $gl-gray-light; + margin: 4px 0; .fa { - color: $gl-gray-light; - font-size: 14px; + font-size: 12px; + margin-right: 4px; } - svg, - .fa { - margin-right: 0; + svg { + width: 12px; + height: 12px; + vertical-align: middle; + margin-right: 4px; } } - .btn-remove { - color: $white-light; - } + .pipeline-actions { + min-width: 140px; - .btn-group { - &.open { - .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } + .btn { + margin: 0; + color: $gl-gray-light; } - .btn { - .icon-play { - height: 13px; - width: 12px; + .cancel-retry-btns { + vertical-align: middle; + + .btn:not(:first-child) { + margin-left: 8px; } } - } - } - .build-link { + .dropdown-toggle, + .dropdown-menu { + color: $gl-gray-light; - a { - color: $gl-dark-link-color; - } - } + .fa { + color: $gl-gray-light; + font-size: 14px; + } - .btn-group.open .dropdown-toggle { - box-shadow: none; - } -} + svg, + .fa { + margin-right: 0; + } + } -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} + .btn-remove { + color: $white-light; + } -// Pipeline visualization -.pipeline-actions { - border-bottom: none; -} + .btn-group { + &.open { + .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } + } -.tab-pane { - &.pipelines { - .ci-table { - min-width: 900px; + .btn { + .icon-play { + height: 13px; + width: 12px; + } + } + } } - .content-list.pipelines { - overflow: auto; - } + .build-link { - .stage { - max-width: 100px; - width: 100px; + a { + color: $gl-dark-link-color; + } } - .pipeline-actions { - min-width: initial; + .btn-group.open .dropdown-toggle { + box-shadow: none; } } - &.builds { - .ci-table { - tr { - height: 71px; - } + .admin-builds-table { + .ci-table td:last-child { + min-width: 120px; } } -} - -// Pipeline graph -.pipeline-graph { - width: 100%; - background-color: $gray-light; - padding: $gl-padding; - overflow: auto; - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - ul { - padding: 0; - } - a { - text-decoration: none; - color: $gl-text-color-light; + // Pipeline visualization + .pipeline-actions { + border-bottom: none; } - svg { - vertical-align: middle; - margin-right: 3px; - } + .tab-pane { + &.pipelines { + .ci-table { + min-width: 900px; + } - .stage-column { - display: inline-block; - vertical-align: top; + .content-list.pipelines { + overflow: auto; + } - &:not(:last-child) { - margin-right: 44px; - } + .stage { + max-width: 100px; + width: 100px; + } - &.left-margin { - &:not(:first-child) { - margin-left: 44px; + .pipeline-actions { + min-width: initial; + } + } - .left-connector { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &.builds { + .ci-table { + tr { + height: 71px; } } } + } - &.no-margin { - margin: 0; + // Pipeline graph + .pipeline-graph { + width: 100%; + background-color: $gray-light; + padding: $gl-padding; + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + ul { + padding: 0; } - li { - list-style: none; + a { + text-decoration: none; + color: $gl-text-color-light; } - &:last-child { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child { - &::after { - border: none; - } - } - // Remove right curved connectors from all builds in last stage + svg { + vertical-align: middle; + margin-right: 3px; + } + + .stage-column { + display: inline-block; + vertical-align: top; + + &:not(:last-child) { + margin-right: 44px; + } + + &.left-margin { &:not(:first-child) { - &::after { - border: none; + margin-left: 44px; + + .left-connector { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } } - // Remove opposite curve - .curve { - &::before { - display: none; + } + + &.no-margin { + margin: 0; + } + + li { + list-style: none; + } + + &:last-child { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child { + &::after { + border: none; + } + } + // Remove right curved connectors from all builds in last stage + &:not(:first-child) { + &::after { + border: none; + } + } + // Remove opposite curve + .curve { + &::before { + display: none; + } } } } - } - &:first-child { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child) { - &::before { - border: none; + &:first-child { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child) { + &::before { + border: none; + } } - } - // Remove opposite curve - .curve { - &::after { - display: none; + // Remove opposite curve + .curve { + &::after { + display: none; + } } } } - } - // Curve first child connecting lines in opposite direction - .curve { - display: none; + // Curve first child connecting lines in opposite direction + .curve { + display: none; - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } } - } - - .stage-name { - margin: 0 0 15px 10px; - font-weight: bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - color: $gl-text-color-light; + .stage-name { + margin: 0 0 15px 10px; + font-weight: bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; color: $gl-text-color-light; - &:focus { - outline: none; - } + .dropdown-menu-toggle { + background-color: transparent; + border: none; + padding: 0; + color: $gl-text-color-light; - &:hover { - color: $gl-text-color; + &:focus { + outline: none; + } - .dropdown-counter-badge { + &:hover { color: $gl-text-color; + + .dropdown-counter-badge { + color: $gl-text-color; + } } } - } - > .build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: 30px; - background-color: $white-light; + > .build-content { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: 30px; + background-color: $white-light; - &:hover { - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-border; - color: $gl-text-color; + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-border; + color: $gl-text-color; + } } - } - - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } - .ci-status-icon svg { - height: 20px; - width: 20px; - } - - .arrow { - &::before, - &::after { - content: ''; - display: inline-block; + > .ci-action-icon-container { position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; + right: 5px; + top: 5px; } - &::before { - left: -5px; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; + .ci-status-icon svg { + height: 20px; + width: 20px; } - &::after { - left: -4px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - } - } + .arrow { + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; + } - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; + &::before { + left: -5px; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; + } + + &::after { + left: -4px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: $white-light; + } } - } - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; + } + + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } + + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } + + .curve { + display: block; + } } } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } + .grouped-pipeline-dropdown { + .dropdown-build { + .build-content { + width: 100%; - .curve { - display: block; + &:hover { + background-color: $stage-hover-bg; + color: $gl-text-color; + } + } + + .ci-action-icon-container { + padding: 0; + font-size: 11px; + position: absolute; + top: 1px; + right: 8px; + } } } } + .dropdown-counter-badge { + color: $border-color; + font-weight: 100; + font-size: 15px; + position: absolute; + right: 5px; + top: 8px; + } + .grouped-pipeline-dropdown { + padding: 0; + width: 191px; + min-width: 191px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + a { + display: inline-block; + } + .dropdown-build { .build-content { width: 100%; @@ -623,333 +660,290 @@ padding: 0; font-size: 11px; position: absolute; - top: 1px; - right: 8px; + margin-top: 3px; + right: 7px; } } + + ul { + max-height: 245px; + overflow: auto; + margin: 3px 0; + + li { + margin: 4px 8px 4px 9px; + padding: 0; + line-height: 1.1; + position: relative; + + .ci-action-icon-container:hover { + background-color: transparent; + } + + .ci-status-icon { + position: relative; + top: 2px; + } + } + } + } + + .pipeline-graph .dropdown-build .ci-status-icon svg { + width: 18px; + height: 18px; } -} - -.dropdown-counter-badge { - float: right; - color: $border-color; - font-weight: 100; - font-size: 15px; - margin-right: 2px; -} - - -.grouped-pipeline-dropdown { - padding: 0; - width: 191px; - min-width: 191px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; - - a { + + .ci-status-text { + max-width: 110px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; display: inline-block; + position: relative; + font-weight: 200; } - .dropdown-build { - .build-content { - width: 100%; + // Action Icons + .ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; + } &:hover { - background-color: $stage-hover-bg; color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - margin-top: 3px; - right: 7px; + .ci-play-icon { + padding: 5px 5px 5px 7px; } } - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; + .dropdown-build { + color: $gl-text-color-light; + + .build-content { + padding: 4px 7px 8px; + } - li { - margin: 4px 8px 4px 9px; + .ci-action-icon-container { padding: 0; - line-height: 1.1; + font-size: 11px; + float: right; + margin-top: 3px; + display: inline-block; position: relative; - .ci-action-icon-container:hover { - background-color: transparent; + i { + font-size: 11px; + margin-top: 0; } + } - .ci-status-icon { - position: relative; - top: 2px; + .ci-action-icon-container { + i { + width: 24px; + height: 24px; + + &::before { + top: 1px; + left: 1px; + } } } - } -} - -.pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; -} - -.ci-status-text { - max-width: 110px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; - display: inline-block; - position: relative; - font-weight: 200; -} - -// Action Icons -.ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } - &:hover { - color: $gl-text-color; - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; + .stage { + max-width: 100px; + width: 100px; } - } - .ci-play-icon { - padding: 5px 5px 5px 7px; - } -} - -.dropdown-build { - color: $gl-text-color-light; + .ci-status-icon svg { + height: 18px; + width: 18px; + } - .build-content { - padding: 4px 7px 8px; + .ci-status-text { + max-width: 95px; + } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; - position: relative; + /** + * Builds dropdown in mini pipeline + */ + .mini-pipeline-graph { + .builds-dropdown { + background-color: transparent; + padding: 0; + color: $gl-text-color-light; + border: none; + margin: 0; - i { - font-size: 11px; - margin-top: 0; - } - } + &:focus, + &:hover { + outline: none; + margin-right: -8px; - .ci-action-icon-container { - i { - width: 24px; - height: 24px; + .ci-status-icon { + width: 32px; + padding: 0 8px 0 0; + transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); - &::before { - top: 1px; - left: 1px; + + .dropdown-caret { + visibility: visible; + opacity: 1; + } + } } - } - } - .stage { - max-width: 100px; - width: 100px; - } - - .ci-status-icon svg { - height: 18px; - width: 18px; - } + &:focus, + &:active { + .ci-status-icon-success { + background-color: rgba($gl-success, .1); + } - .ci-status-text { - max-width: 95px; - } -} - -/** - * Builds dropdown in mini pipeline - */ -.mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-light; - border: none; - margin: 0; + .ci-status-icon-failed { + background-color: rgba($gl-danger, .1); + } - &:focus, - &:hover { - outline: none; - margin-right: -8px; + .ci-status-icon-pending, + .ci-status-icon-success_with_warnings { + background-color: rgba($gl-warning, .1); + } - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + .ci-status-icon-running { + background-color: rgba($blue-normal, .1); + } - + .dropdown-caret { - visibility: visible; - opacity: 1; + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); } - } - } - &:focus, - &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); + } } - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); + .mini-pipeline-graph-icon-container { + .dropdown-caret { + font-size: 11px; + position: absolute; + top: 6px; + left: 20px; + margin-right: -6px; + z-index: 2; + visibility: hidden; + opacity: 0; + transition: visibility 0.1s, opacity 0.1s linear; + } } + } - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } + .dropdown-build .build-content { + padding: 3px 7px 7px; + } - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + .builds-dropdown-loading { + margin: 10px auto; + width: 18px; + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); - } + .grouped-pipeline-dropdown { + right: -172px; + top: 23px; + min-height: 50px; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); + a { + color: $gl-text-color-light; } } - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; + .arrow-up { + &::before, + &::after { + content: ''; + display: inline-block; position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 2px; + border-width: 0 5px 6px; } - } - } - - .dropdown-build .build-content { - padding: 3px 7px 7px; - } - - .builds-dropdown-loading { - margin: 10px auto; - width: 18px; - } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } - a { - color: $gl-text-color-light; + &::after { + margin-top: 1px; + border-bottom-color: $white-light; + } } } - .arrow-up { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 2px; - border-width: 0 5px 6px; - } - - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; - } + /** + * Icons in mini pipeline graph + */ + .mini-pipeline-graph-icon-container .ci-status-icon { + display: inline-block; + border: 1px solid; + border-radius: 22px; + margin-right: 1px; + width: 22px; + height: 22px; + position: relative; + z-index: 2; + transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - &::after { - margin-top: 1px; - border-bottom-color: $white-light; + svg { + top: -1px; + left: -1px; } } -} - -/** - * Icons in mini pipeline graph - */ -.mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - - svg { - top: -1px; - left: -1px; - } -} - -.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; -} + .stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { + width: 22px; + height: 22px; + } -.terminal-icon { - margin-left: 3px; -} -.terminal-container { - .content-block { - border-bottom: none; + .terminal-icon { + margin-left: 3px; } - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; + .terminal-container { + .content-block { + border-bottom: none; + } - > div { + #terminal { + margin-top: 10px; min-height: 450px; + box-sizing: border-box; + + > div { + min-height: 450px; + } } } -} -- cgit v1.2.1 From 30e7952a442d16c18dd8430e02cabb2731e75ab6 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 28 Dec 2016 15:44:08 -0700 Subject: scss_lint is now happy --- app/assets/stylesheets/pages/pipelines.scss | 1416 +++++++++++++-------------- 1 file changed, 708 insertions(+), 708 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index d9ae3b4a95f..b1d9421aa43 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,651 +1,608 @@ - .pipelines { - .realtime-loading { - font-size: 40px; - text-align: center; - } +.pipelines { + .realtime-loading { + font-size: 40px; + text-align: center; + } - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .stage { + max-width: 90px; + width: 90px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .commit-title { + margin: 0; + } + + .controls { + white-space: nowrap; + } + + .btn { + margin: 4px; + } + + .table.ci-table { + min-width: 1200px; + table-layout: fixed; + + .pipeline-id { + color: $black; } - .commit-title { - margin: 0; + .pipeline-date, + .pipeline-status { + width: 10%; } - .controls { - white-space: nowrap; + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; } + } +} - .btn { - margin: 4px; +@media (max-width: $screen-md-max) { + .content-list { + &.pipelines, + &.builds-content-list { + width: 100%; + overflow: auto; } + } +} - .table.ci-table { - min-width: 1200px; - table-layout: fixed; +.content-list.pipelines .table-holder { + min-height: 300px; +} - .pipeline-id { - color: $black; - } +.pipeline-holder { + width: 100%; + overflow: auto; +} - .pipeline-date, - .pipeline-status { - width: 10%; - } +.table.ci-table { + min-width: 900px; - .pipeline-info, - .pipeline-commit, - .pipeline-actions, - .pipeline-stages { - width: 20%; - } - } + &.pipeline { + min-width: 650px; } - @media (max-width: $screen-md-max) { - .content-list { - &.pipelines, - &.builds-content-list { - width: 100%; - overflow: auto; - } + &.builds-page { + + tr { + height: 71px; } } - .content-list.pipelines .table-holder { - min-height: 300px; + tr { + th { + padding: 16px 8px; + border: none; + } + + td { + padding: 10px 8px; + } + + .commit-link { + padding: 9px 8px 10px; + } } - .pipeline-holder { - width: 100%; - overflow: auto; + tbody { + border-top-width: 1px; } - .table.ci-table { - min-width: 900px; + .build.retried { + background-color: $gray-lightest; + } - &.pipeline { - min-width: 650px; + .commit-link { + a { + &:focus { + text-decoration: none; + } } - &.builds-page { - - tr { - height: 71px; - } + a:hover { + text-decoration: none; } + } - tr { - th { - padding: 16px 8px; - border: none; - } + .avatar { + margin-left: 0; + float: none; + } - td { - padding: 10px 8px; - } + .branch-commit { - .commit-link { - padding: 9px 8px 10px; - } + .branch-name { + font-weight: bold; + max-width: 120px; + overflow: hidden; + display: inline-block; + white-space: nowrap; + vertical-align: top; + text-overflow: ellipsis; } - tbody { - border-top-width: 1px; + svg { + height: 14px; + width: 14px; + vertical-align: middle; + fill: $gl-gray-light; } - .build.retried { - background-color: $gray-lightest; + .fa { + font-size: 12px; + color: $gl-text-color; } - .commit-link { - a { - &:focus { - text-decoration: none; - } - } + .commit-id { + color: $gl-link-color; + } - a:hover { - text-decoration: none; - } + .commit-title { + margin-top: 4px; + max-width: 225px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - .avatar { - margin-left: 0; - float: none; + .label { + margin-right: 4px; } - .branch-commit { + .label-container { + font-size: 0; - .branch-name { - font-weight: bold; - max-width: 120px; - overflow: hidden; - display: inline-block; - white-space: nowrap; - vertical-align: top; - text-overflow: ellipsis; + .label { + margin-top: 5px; } + } + } - svg { - height: 14px; - width: 14px; - vertical-align: middle; - fill: $gl-gray-light; - } + .icon-container { + display: inline-block; + width: 10px; - .fa { - font-size: 12px; - color: $gl-text-color; - } + &.commit-icon { + width: 15px; + text-align: center; + } + } - .commit-id { - color: $gl-link-color; - } + .stage-cell { + font-size: 0; - .commit-title { - margin-top: 4px; - max-width: 225px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + svg { + height: 18px; + width: 18px; + position: relative; + z-index: 2; + vertical-align: middle; + overflow: visible; + } - .label { - margin-right: 4px; - } + .stage-container { + display: inline-block; + position: relative; + margin-right: 6px; - .label-container { - font-size: 0; + .tooltip { + white-space: nowrap; + } - .label { - margin-top: 5px; + &:not(:last-child) { + &::after { + content: ''; + width: 8px; + position: absolute; + right: -7px; + top: 10px; + border-bottom: 2px solid $border-color; } } } + } - .icon-container { - display: inline-block; - width: 10px; + .duration, + .finished-at { + color: $gl-gray-light; + margin: 4px 0; - &.commit-icon { - width: 15px; - text-align: center; - } + .fa { + font-size: 12px; + margin-right: 4px; } - .stage-cell { - font-size: 0; + svg { + width: 12px; + height: 12px; + vertical-align: middle; + margin-right: 4px; + } + } - svg { - height: 18px; - width: 18px; - position: relative; - z-index: 2; - vertical-align: middle; - overflow: visible; - } + .pipeline-actions { + min-width: 140px; - .stage-container { - display: inline-block; - position: relative; - margin-right: 6px; + .btn { + margin: 0; + color: $gl-gray-light; + } - .tooltip { - white-space: nowrap; - } + .cancel-retry-btns { + vertical-align: middle; - &:not(:last-child) { - &::after { - content: ''; - width: 8px; - position: absolute; - right: -7px; - top: 10px; - border-bottom: 2px solid $border-color; - } - } + .btn:not(:first-child) { + margin-left: 8px; } } - .duration, - .finished-at { + .dropdown-toggle, + .dropdown-menu { color: $gl-gray-light; - margin: 4px 0; .fa { - font-size: 12px; - margin-right: 4px; + color: $gl-gray-light; + font-size: 14px; } - svg { - width: 12px; - height: 12px; - vertical-align: middle; - margin-right: 4px; + svg, + .fa { + margin-right: 0; } } - .pipeline-actions { - min-width: 140px; + .btn-remove { + color: $white-light; + } - .btn { - margin: 0; - color: $gl-gray-light; + .btn-group { + &.open { + .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } } - .cancel-retry-btns { - vertical-align: middle; - - .btn:not(:first-child) { - margin-left: 8px; + .btn { + .icon-play { + height: 13px; + width: 12px; } } + } + } - .dropdown-toggle, - .dropdown-menu { - color: $gl-gray-light; + .build-link { - .fa { - color: $gl-gray-light; - font-size: 14px; - } + a { + color: $gl-dark-link-color; + } + } - svg, - .fa { - margin-right: 0; - } - } + .btn-group.open .dropdown-toggle { + box-shadow: none; + } +} - .btn-remove { - color: $white-light; - } +.admin-builds-table { + .ci-table td:last-child { + min-width: 120px; + } +} - .btn-group { - &.open { - .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } - } +// Pipeline visualization +.pipeline-actions { + border-bottom: none; +} - .btn { - .icon-play { - height: 13px; - width: 12px; - } - } - } +.tab-pane { + &.pipelines { + .ci-table { + min-width: 900px; } - .build-link { + .content-list.pipelines { + overflow: auto; + } - a { - color: $gl-dark-link-color; - } + .stage { + max-width: 100px; + width: 100px; } - .btn-group.open .dropdown-toggle { - box-shadow: none; + .pipeline-actions { + min-width: initial; } } - .admin-builds-table { - .ci-table td:last-child { - min-width: 120px; + &.builds { + .ci-table { + tr { + height: 71px; + } } } +} - // Pipeline visualization - .pipeline-actions { - border-bottom: none; +// Pipeline graph +.pipeline-graph { + width: 100%; + background-color: $gray-light; + padding: $gl-padding; + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + ul { + padding: 0; } - .tab-pane { - &.pipelines { - .ci-table { - min-width: 900px; - } + a { + text-decoration: none; + color: $gl-text-color-light; + } - .content-list.pipelines { - overflow: auto; - } + svg { + vertical-align: middle; + margin-right: 3px; + } - .stage { - max-width: 100px; - width: 100px; - } + .stage-column { + display: inline-block; + vertical-align: top; - .pipeline-actions { - min-width: initial; - } + &:not(:last-child) { + margin-right: 44px; } - &.builds { - .ci-table { - tr { - height: 71px; + &.left-margin { + &:not(:first-child) { + margin-left: 44px; + + .left-connector { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } } } - } - - // Pipeline graph - .pipeline-graph { - width: 100%; - background-color: $gray-light; - padding: $gl-padding; - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - ul { - padding: 0; - } - a { - text-decoration: none; - color: $gl-text-color-light; + &.no-margin { + margin: 0; } - svg { - vertical-align: middle; - margin-right: 3px; + li { + list-style: none; } - .stage-column { - display: inline-block; - vertical-align: top; - - &:not(:last-child) { - margin-right: 44px; - } - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; - - .left-connector { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &:last-child { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child { + &::after { + border: none; } } - } - - &.no-margin { - margin: 0; - } - - li { - list-style: none; - } - - &:last-child { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child { - &::after { - border: none; - } - } - // Remove right curved connectors from all builds in last stage - &:not(:first-child) { - &::after { - border: none; - } + // Remove right curved connectors from all builds in last stage + &:not(:first-child) { + &::after { + border: none; } - // Remove opposite curve - .curve { - &::before { - display: none; - } + } + // Remove opposite curve + .curve { + &::before { + display: none; } } } + } - &:first-child { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child) { - &::before { - border: none; - } + &:first-child { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child) { + &::before { + border: none; } - // Remove opposite curve - .curve { - &::after { - display: none; - } + } + // Remove opposite curve + .curve { + &::after { + display: none; } } } + } - // Curve first child connecting lines in opposite direction - .curve { - display: none; - - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; - } + // Curve first child connecting lines in opposite direction + .curve { + display: none; - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; - } + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; } - } - .stage-name { - margin: 0 0 15px 10px; - font-weight: bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } + } - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - color: $gl-text-color-light; - - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; - color: $gl-text-color-light; + .stage-name { + margin: 0 0 15px 10px; + font-weight: bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - &:focus { - outline: none; - } + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; + color: $gl-text-color-light; - &:hover { - color: $gl-text-color; + .dropdown-menu-toggle { + background-color: transparent; + border: none; + padding: 0; + color: $gl-text-color-light; - .dropdown-counter-badge { - color: $gl-text-color; - } - } + &:focus { + outline: none; } - > .build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: 30px; - background-color: $white-light; + &:hover { + color: $gl-text-color; - &:hover { - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-border; + .dropdown-counter-badge { color: $gl-text-color; } } + } - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } + > .build-content { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: 30px; + background-color: $white-light; - .ci-status-icon svg { - height: 20px; - width: 20px; + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-border; + color: $gl-text-color; } + } - .arrow { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } + > .ci-action-icon-container { + position: absolute; + right: 5px; + top: 5px; + } - &::before { - left: -5px; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; - } + .ci-status-icon svg { + height: 20px; + width: 20px; + } - &::after { - left: -4px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - } + .arrow { + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; } - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &::before { + left: -5px; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; } - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; - } + &::after { + left: -4px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: $white-light; + } + } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; - } + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } + } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; - } + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } - .curve { - display: block; - } + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; } } - .grouped-pipeline-dropdown { - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - top: 1px; - right: 8px; - } + .curve { + display: block; } } } - .dropdown-counter-badge { - color: $border-color; - font-weight: 100; - font-size: 15px; - position: absolute; - right: 5px; - top: 8px; - } - .grouped-pipeline-dropdown { - padding: 0; - width: 191px; - min-width: 191px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; - - a { - display: inline-block; - } - .dropdown-build { .build-content { width: 100%; @@ -660,290 +617,333 @@ padding: 0; font-size: 11px; position: absolute; - margin-top: 3px; - right: 7px; + top: 1px; + right: 8px; } } - - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; - - li { - margin: 4px 8px 4px 9px; - padding: 0; - line-height: 1.1; - position: relative; - - .ci-action-icon-container:hover { - background-color: transparent; - } - - .ci-status-icon { - position: relative; - top: 2px; - } - } - } - } - - .pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; } - - .ci-status-text { - max-width: 110px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; +} + +.dropdown-counter-badge { + color: $border-color; + font-weight: 100; + font-size: 15px; + position: absolute; + right: 5px; + top: 8px; +} + +.grouped-pipeline-dropdown { + padding: 0; + width: 191px; + min-width: 191px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + a { display: inline-block; - position: relative; - font-weight: 200; } - // Action Icons - .ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } + .dropdown-build { + .build-content { + width: 100%; &:hover { - color: $gl-text-color; background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; + color: $gl-text-color; } } - .ci-play-icon { - padding: 5px 5px 5px 7px; + .ci-action-icon-container { + padding: 0; + font-size: 11px; + position: absolute; + margin-top: 3px; + right: 7px; } } - .dropdown-build { - color: $gl-text-color-light; - - .build-content { - padding: 4px 7px 8px; - } + ul { + max-height: 245px; + overflow: auto; + margin: 3px 0; - .ci-action-icon-container { + li { + margin: 4px 8px 4px 9px; padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; + line-height: 1.1; position: relative; - i { - font-size: 11px; - margin-top: 0; + .ci-action-icon-container:hover { + background-color: transparent; } - } - - .ci-action-icon-container { - i { - width: 24px; - height: 24px; - &::before { - top: 1px; - left: 1px; - } + .ci-status-icon { + position: relative; + top: 2px; } } - - .stage { - max-width: 100px; - width: 100px; + } +} + +.pipeline-graph .dropdown-build .ci-status-icon svg { + width: 18px; + height: 18px; +} + +.ci-status-text { + max-width: 110px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; + display: inline-block; + position: relative; + font-weight: 200; +} + +// Action Icons +.ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; } - .ci-status-icon svg { - height: 18px; - width: 18px; + &:hover { + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; } + } - .ci-status-text { - max-width: 95px; - } + .ci-play-icon { + padding: 5px 5px 5px 7px; } +} - /** - * Builds dropdown in mini pipeline - */ - .mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-light; - border: none; - margin: 0; +.dropdown-build { + color: $gl-text-color-light; - &:focus, - &:hover { - outline: none; - margin-right: -8px; + .build-content { + padding: 4px 7px 8px; + } - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + .ci-action-icon-container { + padding: 0; + font-size: 11px; + float: right; + margin-top: 3px; + display: inline-block; + position: relative; - + .dropdown-caret { - visibility: visible; - opacity: 1; - } - } - } + i { + font-size: 11px; + margin-top: 0; + } + } - &:focus, - &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); - } + .ci-action-icon-container { + i { + width: 24px; + height: 24px; - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); - } + &::before { + top: 1px; + left: 1px; + } + } + } - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } + .stage { + max-width: 100px; + width: 100px; + } - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + .ci-status-icon svg { + height: 18px; + width: 18px; + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); - } + .ci-status-text { + max-width: 95px; + } +} + +/** + * Builds dropdown in mini pipeline + */ +.mini-pipeline-graph { + .builds-dropdown { + background-color: transparent; + padding: 0; + color: $gl-text-color-light; + border: none; + margin: 0; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); - } - } + &:focus, + &:hover { + outline: none; + margin-right: -8px; - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; - position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; + .ci-status-icon { + width: 32px; + padding: 0 8px 0 0; + transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + + + .dropdown-caret { + visibility: visible; + opacity: 1; } } } - .dropdown-build .build-content { - padding: 3px 7px 7px; - } + &:focus, + &:active { + .ci-status-icon-success { + background-color: rgba($gl-success, .1); + } - .builds-dropdown-loading { - margin: 10px auto; - width: 18px; - } + .ci-status-icon-failed { + background-color: rgba($gl-danger, .1); + } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + .ci-status-icon-pending, + .ci-status-icon-success_with_warnings { + background-color: rgba($gl-warning, .1); + } - a { - color: $gl-text-color-light; + .ci-status-icon-running { + background-color: rgba($blue-normal, .1); } - } - .arrow-up { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 2px; - border-width: 0 5px 6px; + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); } - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); } + } - &::after { - margin-top: 1px; - border-bottom-color: $white-light; + .mini-pipeline-graph-icon-container { + .dropdown-caret { + font-size: 11px; + position: absolute; + top: 6px; + left: 20px; + margin-right: -6px; + z-index: 2; + visibility: hidden; + opacity: 0; + transition: visibility 0.1s, opacity 0.1s linear; } } } - /** - * Icons in mini pipeline graph - */ - .mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); + .dropdown-build .build-content { + padding: 3px 7px 7px; + } - svg { - top: -1px; - left: -1px; + .builds-dropdown-loading { + margin: 10px auto; + width: 18px; + } + + .grouped-pipeline-dropdown { + right: -172px; + top: 23px; + min-height: 50px; + + a { + color: $gl-text-color-light; } } - .stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; + .arrow-up { + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 2px; + border-width: 0 5px 6px; + } + + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } + + &::after { + margin-top: 1px; + border-bottom-color: $white-light; + } } +} + +/** + * Icons in mini pipeline graph + */ +.mini-pipeline-graph-icon-container .ci-status-icon { + display: inline-block; + border: 1px solid; + border-radius: 22px; + margin-right: 1px; + width: 22px; + height: 22px; + position: relative; + z-index: 2; + transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); + + svg { + top: -1px; + left: -1px; + } +} + +.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { + width: 22px; + height: 22px; +} - .terminal-icon { - margin-left: 3px; +.terminal-icon { + margin-left: 3px; +} + +.terminal-container { + .content-block { + border-bottom: none; } - .terminal-container { - .content-block { - border-bottom: none; - } + #terminal { + margin-top: 10px; + min-height: 450px; + box-sizing: border-box; - #terminal { - margin-top: 10px; + > div { min-height: 450px; - box-sizing: border-box; - - > div { - min-height: 450px; - } } } +} -- cgit v1.2.1 From 49aecb6067cded1fc263a8fb825d939486e83575 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 29 Dec 2016 10:14:11 -0700 Subject: properly remove events and get rid of lingering interval loops --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 04fde27af58..d7ae9255e9a 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -49,28 +49,20 @@ startTimeLoops(); - const removeTimeIntervals = () => { - clearInterval(this.timeLoopInterval); - }; - - const startIntervalLoops = () => { - startTimeLoops(); - }; + const removeTimeIntervals = () => clearInterval(this.timeLoopInterval); + const startIntervalLoops = () => startTimeLoops(); const removeAll = () => { + removeTimeIntervals(); window.removeEventListener('beforeunload', removeTimeIntervals); window.removeEventListener('focus', startIntervalLoops); window.removeEventListener('blur', removeTimeIntervals); - - // turbolinks event handler - document.removeEventListener('page:fetch', () => {}); + document.removeEventListener('page:fetch', removeAll); }; window.addEventListener('beforeunload', removeTimeIntervals); window.addEventListener('focus', startIntervalLoops); window.addEventListener('blur', removeTimeIntervals); - - // turbolinks event handler document.addEventListener('page:fetch', removeAll); } }; -- cgit v1.2.1 From 7be5c2312eacf6028a2d8557ee7ac6e530724a39 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 29 Dec 2016 11:00:38 -0700 Subject: handle details path if no path --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 217df5e2f16..2080db97dac 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -16,12 +16,16 @@ svg() { return this.svgs[this.match(this.pipeline.details.status.icon)]; }, + detailsPath() { + const { status } = this.pipeline.details; + return status.path ? status.path : '#'; + }, }, template: ` -- cgit v1.2.1 From b3e2fe69c1ea16d1be0a8bd8799c9bf46253e698 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 8 Dec 2016 09:53:29 -0600 Subject: Start commits refactor --- app/assets/stylesheets/framework/lists.scss | 6 -- app/assets/stylesheets/pages/commit.scss | 132 ------------------------- app/assets/stylesheets/pages/commits.scss | 145 ++++++++++++++++++++++++++-- 3 files changed, 135 insertions(+), 148 deletions(-) delete mode 100644 app/assets/stylesheets/pages/commit.scss (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 277d4202950..08b88f436c0 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -236,12 +236,6 @@ ul.content-list { .panel > .content-list > li { padding: $gl-padding-top $gl-padding; - - &.commit { - @media (min-width: $screen-sm-min) { - padding-left: 46px + $gl-padding; - } - } } ul.controls { diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss deleted file mode 100644 index bf656d0e28e..00000000000 --- a/app/assets/stylesheets/pages/commit.scss +++ /dev/null @@ -1,132 +0,0 @@ -.commit-title { - display: block; -} - -.commit-author, -.commit-committer { - display: block; - color: $commit-committer-color; - font-weight: normal; - font-style: italic; -} - -.commit-author strong, -.commit-committer strong { - font-weight: bold; - font-style: normal; -} - -.commit-description { - background: none; - border: none; - margin: 0; - padding: 0; - margin-top: 10px; - word-break: normal; - white-space: pre-wrap; -} - -.js-details-expand { - &:hover { - text-decoration: none; - } -} - -.ci-status-link { - svg { - overflow: visible; - } -} - -.commit-box { - border-top: 1px solid $border-color; - padding: $gl-padding 0; - - .commit-title { - margin: 0; - font-size: 23px; - color: $gl-gray-dark; - } - - .commit-description { - margin-top: 15px; - } -} - -.commit-hash-full { - @media (max-width: $screen-sm-max) { - width: 80px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } -} - -.file-stats { - ul { - list-style: none; - margin: 0; - padding: 10px 0; - - li { - padding: 3px 0; - line-height: 20px; - } - } - - .new-file { - a { - color: $gl-text-green; - } - } - - .renamed-file { - a { - color: $gl-text-orange; - } - } - - .deleted-file { - a { - color: $gl-text-red; - } - } - - .edit-file { - a { - color: $gl-text-color; - } - } -} - -/* - * Commit message textarea for web editor and - * custom merge request message - */ -.commit-message-container { - background-color: $body-bg; - position: relative; - font-family: $monospace_font; - $left: 12px; - overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987 - .max-width-marker { - width: 72ch; - color: $commit-max-width-marker-color; - font-family: inherit; - left: $left; - height: 100%; - border-right: 1px solid mix($input-border, $white-light); - position: absolute; - z-index: 1; - } - - > textarea { - background-color: $commit-message-text-area-bg; - font-family: inherit; - padding-left: $left; - position: relative; - z-index: 2; - } -} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index e76e1a73b25..abad300a7d1 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,3 +1,137 @@ +.commit-title { + display: block; +} + +.commit-author, +.commit-committer { + display: block; + color: $commit-committer-color; + font-weight: normal; + font-style: italic; +} + +.commit-author strong, +.commit-committer strong { + font-weight: bold; + font-style: normal; +} + +.commit-description { + background: none; + border: none; + margin: 0; + padding: 0; + margin-top: 10px; + word-break: normal; + white-space: pre-wrap; +} + +.js-details-expand { + &:hover { + text-decoration: none; + } +} + +.ci-status-link { + svg { + overflow: visible; + } +} + +.commit-box { + border-top: 1px solid $border-color; + padding: $gl-padding 0; + + .commit-title { + margin: 0; + font-size: 23px; + color: $gl-gray-dark; + } + + .commit-description { + margin-top: 15px; + } +} + +.commit-hash-full { + @media (max-width: $screen-sm-max) { + width: 80px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: bottom; + } +} + +.file-stats { + ul { + list-style: none; + margin: 0; + padding: 10px 0; + + li { + padding: 3px 0; + line-height: 20px; + } + } + + .new-file { + a { + color: $gl-text-green; + } + } + + .renamed-file { + a { + color: $gl-text-orange; + } + } + + .deleted-file { + a { + color: $gl-text-red; + } + } + + .edit-file { + a { + color: $gl-text-color; + } + } +} + +/* + * Commit message textarea for web editor and + * custom merge request message + */ +.commit-message-container { + background-color: $body-bg; + position: relative; + font-family: $monospace_font; + $left: 12px; + overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987 + .max-width-marker { + width: 72ch; + color: $commit-max-width-marker-color; + font-family: inherit; + left: $left; + height: 100%; + border-right: 1px solid mix($input-border, $white-light); + position: absolute; + z-index: 1; + } + + > textarea { + background-color: $commit-message-text-area-bg; + font-family: inherit; + padding-left: $left; + position: relative; + z-index: 2; + } +} + + .commits-compare-switch { @include btn-default; @include btn-white; @@ -18,7 +152,6 @@ } .commit-row-title { - line-height: 1.35; .notes_count { float: right; @@ -93,21 +226,13 @@ padding-left: 46px; } - &:not(:last-child) { - border-bottom: 1px solid $gray-darker; - } - a, button { color: $gl-dark-link-color; vertical-align: baseline; } - .avatar { - margin-left: -46px; - } - - .item-title { + .commit-content { display: inline-block; @media (min-width: $screen-sm-min) { -- cgit v1.2.1 From f2bf9443ca0a5b55713dab259edd3c20f42e7099 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 9 Dec 2016 08:37:44 -0600 Subject: Add table styling to commits tables --- app/assets/stylesheets/framework/lists.scss | 38 +++++++++++++++++++++++++++++ app/assets/stylesheets/pages/commits.scss | 14 ++--------- 2 files changed, 40 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 08b88f436c0..bffd0e6f0cd 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -234,6 +234,44 @@ ul.content-list { } } +// Table list +.table-list { + display: table; + width: 100%; + + .table-list-row { + display: table-row; + } + + .table-list-cell { + display: table-cell; + vertical-align: top; + padding: 10px 16px; + border-bottom: 1px solid $gray-darker; + + &.avatar-cell { + width: 36px; + padding-right: 0; + + img { + margin-right: 0; + } + } + } + + &.table-wide { + .table-list-cell { + &:last-of-type { + padding-right: 0; + } + + &:first-of-type { + padding-left: 0; + } + } + } +} + .panel > .content-list > li { padding: $gl-padding-top $gl-padding; } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index abad300a7d1..feaa04136a9 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -142,7 +142,6 @@ .commit-header { padding: 5px 10px; background-color: $gray-light; - border-top: 1px solid $gray-darker; border-bottom: 1px solid $gray-darker; font-size: 14px; @@ -187,9 +186,8 @@ .commit-actions { @media (min-width: $screen-sm-min) { - float: right; - margin-left: $gl-padding; - margin-top: 2px; + width: 300px; + text-align: right; font-size: 0; } @@ -232,14 +230,6 @@ vertical-align: baseline; } - .commit-content { - display: inline-block; - - @media (min-width: $screen-sm-min) { - max-width: 70%; - } - } - .commit-row-description { font-size: 14px; border-left: 1px solid $white-normal; -- cgit v1.2.1 From c298cd9c40d0bf3fdc06368ad4376f5b2fbdda3c Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 9 Dec 2016 10:18:19 -0600 Subject: Update file hader styles; remove and relocate more commits css --- app/assets/stylesheets/framework/files.scss | 49 ++++++++ app/assets/stylesheets/framework/variables.scss | 1 - app/assets/stylesheets/notify.scss | 12 -- app/assets/stylesheets/pages/branches.scss | 55 +++++++++ app/assets/stylesheets/pages/commits.scss | 144 +---------------------- app/assets/stylesheets/pages/merge_requests.scss | 4 - app/assets/stylesheets/pages/status.scss | 6 + app/assets/stylesheets/pages/tree.scss | 15 +-- 8 files changed, 117 insertions(+), 169 deletions(-) create mode 100644 app/assets/stylesheets/pages/branches.scss (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 88ed0a4a17e..c51912b4ac4 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -182,3 +182,52 @@ span.idiff { border-bottom-right-radius: 2px; } } + +.file-stats { + ul { + list-style: none; + margin: 0; + padding: 10px 0; + + li { + padding: 3px 0; + line-height: 20px; + } + } + + .new-file { + a { + color: $gl-text-green; + } + } + + .renamed-file { + a { + color: $gl-text-orange; + } + } + + .deleted-file { + a { + color: $gl-text-red; + } + } + + .edit-file { + a { + color: $gl-text-color; + } + } + + a { + text-decoration: none; + + .new-file { + color: $notify-new-file; + } + + .deleted-file { + color: $notify-deleted-file; + } + } +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b0c4a6edf57..dc211fc55a7 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -376,7 +376,6 @@ $callout-success-color: #3c763d; /* * Commit Page */ -$commit-committer-color: #999; $commit-max-width-marker-color: rgba(0, 0, 0, 0.0); $commit-message-text-area-bg: rgba(0, 0, 0, 0.0); diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index ddc382362f7..a81e5eb5ebf 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -18,15 +18,3 @@ p.details { pre.commit-message { white-space: pre-wrap; } - -.file-stats > a { - text-decoration: none; - - > .new-file { - color: $notify-new-file; - } - - > .deleted-file { - color: $notify-deleted-file; - } -} diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss new file mode 100644 index 00000000000..8d671585b7a --- /dev/null +++ b/app/assets/stylesheets/pages/branches.scss @@ -0,0 +1,55 @@ +.divergence-graph { + padding: 12px 12px 0 0; + float: right; + + .graph-side { + position: relative; + width: 80px; + height: 22px; + padding: 5px 0 13px; + float: left; + + .bar { + position: absolute; + height: 4px; + background-color: $divergence-graph-bar-bg; + } + + .bar-behind { + right: 0; + border-radius: 3px 0 0 3px; + } + + .bar-ahead { + left: 0; + border-radius: 0 3px 3px 0; + } + + .count { + padding-top: 6px; + padding-bottom: 0; + font-size: 12px; + color: $gl-title-color; + display: block; + } + + .count-behind { + padding-right: 4px; + text-align: right; + } + + .count-ahead { + padding-left: 4px; + text-align: left; + } + } + + .graph-separator { + position: relative; + width: 1px; + height: 18px; + margin: 5px 0 0; + float: left; + background-color: $divergence-graph-separator-bg; + } +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index feaa04136a9..d890cf3502b 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,25 +1,6 @@ -.commit-title { - display: block; -} - -.commit-author, -.commit-committer { - display: block; - color: $commit-committer-color; - font-weight: normal; - font-style: italic; -} - -.commit-author strong, -.commit-committer strong { - font-weight: bold; - font-style: normal; -} - .commit-description { background: none; border: none; - margin: 0; padding: 0; margin-top: 10px; word-break: normal; @@ -32,19 +13,12 @@ } } -.ci-status-link { - svg { - overflow: visible; - } -} - .commit-box { border-top: 1px solid $border-color; padding: $gl-padding 0; .commit-title { margin: 0; - font-size: 23px; color: $gl-gray-dark; } @@ -64,43 +38,6 @@ } } -.file-stats { - ul { - list-style: none; - margin: 0; - padding: 10px 0; - - li { - padding: 3px 0; - line-height: 20px; - } - } - - .new-file { - a { - color: $gl-text-green; - } - } - - .renamed-file { - a { - color: $gl-text-orange; - } - } - - .deleted-file { - a { - color: $gl-text-red; - } - } - - .edit-file { - a { - color: $gl-text-color; - } - } -} - /* * Commit message textarea for web editor and * custom merge request message @@ -122,7 +59,7 @@ z-index: 1; } - > textarea { + textarea { background-color: $commit-message-text-area-bg; font-family: inherit; padding-left: $left; @@ -133,8 +70,6 @@ .commits-compare-switch { - @include btn-default; - @include btn-white; float: left; margin-right: 9px; } @@ -151,7 +86,6 @@ } .commit-row-title { - .notes_count { float: right; margin-right: 10px; @@ -164,7 +98,6 @@ .commit-row-message { color: $gl-dark-link-color; } - } .text-expander { @@ -217,12 +150,6 @@ .commit, .generic_commit_status { - padding: 10px 0; - position: relative; - - @media (min-width: $screen-sm-min) { - padding-left: 46px; - } a, button { @@ -253,19 +180,6 @@ } } - .commit-row-info { - color: $gl-gray; - line-height: 1.35; - - a { - color: $gl-gray; - } - - .avatar { - margin-right: 8px; - } - } - &.inline-commit { .commit-row-title { font-size: 13px; @@ -301,59 +215,3 @@ color: $gl-gray; } } - -.divergence-graph { - padding: 12px 12px 0 0; - float: right; - - .graph-side { - position: relative; - width: 80px; - height: 22px; - padding: 5px 0 13px; - float: left; - - .bar { - position: absolute; - height: 4px; - background-color: $divergence-graph-bar-bg; - } - - .bar-behind { - right: 0; - border-radius: 3px 0 0 3px; - } - - .bar-ahead { - left: 0; - border-radius: 0 3px 3px 0; - } - - .count { - padding-top: 6px; - padding-bottom: 0; - font-size: 12px; - color: $gl-title-color; - display: block; - } - - .count-behind { - padding-right: 4px; - text-align: right; - } - - .count-ahead { - padding-left: 4px; - text-align: left; - } - } - - .graph-separator { - position: relative; - width: 1px; - height: 18px; - margin: 5px 0 0; - float: left; - background-color: $divergence-graph-separator-bg; - } -} diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 4cb53ab6fce..0e3da7d7163 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -310,10 +310,6 @@ left: 0; top: 2px; } - - .commit-row-info { - line-height: 20px; - } } .btn-clipboard { diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 4acd17360c1..2f6f03e9877 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -135,3 +135,9 @@ left: 5px; } } + +.ci-status-link { + svg { + overflow: visible; + } +} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index cad4e149845..fe4f08e4749 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -134,21 +134,18 @@ .blob-commit-info { list-style: none; - padding: $gl-padding; background: $gray-light; + padding: 6px 0; border: 1px solid $border-color; border-bottom: none; margin: 0; - .commit { - padding-top: 0; - padding-bottom: 0; + .table-list-cell { + border-bottom: none; + } - .commit-row-title { - .commit-row-message { - font-weight: normal; - } - } + .commit-actions { + width: 200px; } } -- cgit v1.2.1 From ce9357e8a7e86cd314ac66965e0bf215986046f3 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 13 Dec 2016 16:16:35 -0600 Subject: Remove double border from compare page --- app/assets/stylesheets/framework/panels.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss index 9d8d08dff88..efe93724013 100644 --- a/app/assets/stylesheets/framework/panels.scss +++ b/app/assets/stylesheets/framework/panels.scss @@ -48,3 +48,11 @@ line-height: inherit; } } + +.panel-default { + .table-list-row:last-child { + .table-list-cell { + border-bottom: 0; + } + } +} -- cgit v1.2.1 From 520e27d1a5d51aec07cdf962291440cb71c0afb9 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 29 Dec 2016 17:27:18 -0700 Subject: add vue_realtime_listener function --- .../javascripts/vue_pipelines_index/status.js.es6 | 2 +- .../javascripts/vue_pipelines_index/store.js.es6 | 19 +++++-------------- .../javascripts/vue_realtime_listener/index.js.es6 | 16 ++++++++++++++++ 3 files changed, 22 insertions(+), 15 deletions(-) create mode 100644 app/assets/javascripts/vue_realtime_listener/index.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 2080db97dac..88fead9c651 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -18,7 +18,7 @@ }, detailsPath() { const { status } = this.pipeline.details; - return status.path ? status.path : '#'; + return status.details_path ? status.details_path : '#'; }, }, template: ` diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index d7ae9255e9a..96d960f93c5 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -1,6 +1,8 @@ /* global gl, Flash */ /* eslint-disable no-param-reassign, no-underscore-dangle */ +/*= require vue_realtime_listener/index.js */ + ((gl) => { const pageValues = headers => ({ perPage: +headers['X-Per-Page'], @@ -49,21 +51,10 @@ startTimeLoops(); - const removeTimeIntervals = () => clearInterval(this.timeLoopInterval); - const startIntervalLoops = () => startTimeLoops(); - - const removeAll = () => { - removeTimeIntervals(); - window.removeEventListener('beforeunload', removeTimeIntervals); - window.removeEventListener('focus', startIntervalLoops); - window.removeEventListener('blur', removeTimeIntervals); - document.removeEventListener('page:fetch', removeAll); - }; + const removeIntervals = () => clearInterval(this.timeLoopInterval); + const startIntervals = () => startTimeLoops(); - window.addEventListener('beforeunload', removeTimeIntervals); - window.addEventListener('focus', startIntervalLoops); - window.addEventListener('blur', removeTimeIntervals); - document.addEventListener('page:fetch', removeAll); + gl.VueRealtimeListener(removeIntervals, startIntervals); } }; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_realtime_listener/index.js.es6 b/app/assets/javascripts/vue_realtime_listener/index.js.es6 new file mode 100644 index 00000000000..72404c6f015 --- /dev/null +++ b/app/assets/javascripts/vue_realtime_listener/index.js.es6 @@ -0,0 +1,16 @@ +(() => { + gl.VueRealtimeListener = (removeIntervals, startIntervals) => { + const removeAll = () => { + removeIntervals(); + window.removeEventListener('beforeunload', removeIntervals); + window.removeEventListener('focus', startIntervals); + window.removeEventListener('blur', removeIntervals); + document.removeEventListener('page:fetch', removeAll); + }; + + window.addEventListener('beforeunload', removeIntervals); + window.addEventListener('focus', startIntervals); + window.addEventListener('blur', removeIntervals); + document.addEventListener('page:fetch', removeAll); + }; +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 87427496b05944576637c1a70c5bfa3b6bfb4522 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 29 Dec 2016 17:43:02 -0700 Subject: even though scoped, specify 'gl' in IIFE argument --- app/assets/javascripts/vue_realtime_listener/index.js.es6 | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_realtime_listener/index.js.es6 b/app/assets/javascripts/vue_realtime_listener/index.js.es6 index 72404c6f015..23cac1466d2 100644 --- a/app/assets/javascripts/vue_realtime_listener/index.js.es6 +++ b/app/assets/javascripts/vue_realtime_listener/index.js.es6 @@ -1,4 +1,6 @@ -(() => { +/* eslint-disable no-param-reassign */ + +((gl) => { gl.VueRealtimeListener = (removeIntervals, startIntervals) => { const removeAll = () => { removeIntervals(); -- cgit v1.2.1 From 8a3cf4a93320485fc95d4d6603d5600db8226ab3 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Fri, 30 Dec 2016 05:07:45 -0500 Subject: Remove bottom border from issuable titles --- app/assets/stylesheets/pages/issuable.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6b4d1f85564..42a3f5baed9 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -5,6 +5,12 @@ } } + .title { + padding: 0; + margin: 0; + border-bottom: none; + } + // Border around images in issue and MR descriptions. .description img:not(.emoji) { border: 1px solid $white-normal; -- cgit v1.2.1 From 8e22dc104fd7e6fe0b6a6d53c07e6143706c9fb0 Mon Sep 17 00:00:00 2001 From: Saad Shahd Date: Fri, 30 Dec 2016 14:49:36 +0200 Subject: Add label to Environments "Date Created" column --- app/assets/javascripts/environments/components/environment.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index facd653fd72..0d453f74ac6 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -216,7 +216,7 @@ Last deployment Build Commit - + Created -- cgit v1.2.1 From ccc85d802f44b0ca1603a10588c7a1edb7fe8bc0 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 28 Dec 2016 16:56:37 +0100 Subject: Fixed regression of note-headline-light where it was always placed on 2 lines, even on wide viewports --- app/assets/stylesheets/pages/notes.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 8f15775ee03..21d72791e81 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -43,7 +43,7 @@ ul.notes { } .system-note-message { - display: inline-block; + display: inline; &::first-letter { text-transform: lowercase; @@ -55,7 +55,7 @@ ul.notes { } p { - display: inline-block; + display: inline; margin: 0; &::first-letter { @@ -353,6 +353,14 @@ ul.notes { font-size: 14px; } +.note-headline-light { + display: inline; + + @media (max-width: $screen-xs-min) { + display: block; + } +} + .note-headline-light, .discussion-headline-light { color: $notes-light-color; -- cgit v1.2.1 From dbe0d0fb5a0ae889b452cd7f2ba1ada7c8e6441d Mon Sep 17 00:00:00 2001 From: Sam Rose Date: Fri, 30 Dec 2016 09:44:21 -0500 Subject: Disable award emoji button but display tooltip --- app/assets/stylesheets/framework/awards.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 9fc9bcebc44..49907417e26 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -97,8 +97,20 @@ padding: 5px 6px; outline: 0; - &:hover, + &.disabled { + cursor: default; + + &:hover, + &:focus, + &:active { + background-color: $white-light; + border-color: $border-color; + box-shadow: none; + } + } + &.active, + &:hover, &:active { background-color: $row-hover; border-color: $row-hover-border; -- cgit v1.2.1 From 5bfce8e99e7197c57ae91feefa78c13a7a50f476 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Thu, 15 Dec 2016 23:14:04 +0600 Subject: fixes mobile views --- app/assets/stylesheets/pages/projects.scss | 31 ++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index b99be02ab0c..4a1bc560292 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -26,7 +26,7 @@ margin-bottom: 5px; } - &> .form-group { + & > .form-group { padding-left: 0; } } @@ -73,7 +73,7 @@ border: 1px solid $border-color; } - &+ .select2 a { + & + .select2 a { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -618,7 +618,6 @@ pre.light-well { margin: 0; } - .activity-filter-block { .controls { padding-bottom: 7px; @@ -811,7 +810,31 @@ pre.light-well { .compare-form-group { .dropdown-menu { - width: 300px; + width: 100%; + + @media (min-width: $screen-sm-min) { + width: 300px; + } + } + + + .compare-ellipsis { + width: 100%; + vertical-align: middle; + text-align: center; + margin-top: -20px; + + @media (min-width: $screen-sm-min) { + margin-top: 0; + width: auto; + } + } + + .inline-input-group { + width: 100%; + + @media (min-width: $screen-sm-min) { + width: 250px; + } } } -- cgit v1.2.1 From 19967472b1191ea425be3217c26946ab3eb76fb6 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Thu, 22 Dec 2016 18:41:54 +0600 Subject: trucates text to prevent overflow and adds tooltip to it --- app/assets/javascripts/compare_autocomplete.js.es6 | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6 index 45c974b2b68..21c7cb4e1fd 100644 --- a/app/assets/javascripts/compare_autocomplete.js.es6 +++ b/app/assets/javascripts/compare_autocomplete.js.es6 @@ -55,6 +55,14 @@ $('.dropdown-toggle-text', $dropdown).text(text); $dropdownContainer.removeClass('open'); }); + + $dropdownContainer.on('click' , '.dropdown-content a', (e) => { + $dropdown.prop('title', e.target.text.replace(/_+?/g,'-')); + if ($dropdown.hasClass('has-tooltip')) { + $dropdown.tooltip('fixTitle'); + } + + }) }); }; -- cgit v1.2.1 From ece31cc72b8da010859554f5c6b722dd90c67372 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Fri, 23 Dec 2016 19:58:19 +0600 Subject: fixes js lint warnings --- app/assets/javascripts/compare_autocomplete.js.es6 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6 index 21c7cb4e1fd..251f2ded347 100644 --- a/app/assets/javascripts/compare_autocomplete.js.es6 +++ b/app/assets/javascripts/compare_autocomplete.js.es6 @@ -56,13 +56,12 @@ $dropdownContainer.removeClass('open'); }); - $dropdownContainer.on('click' , '.dropdown-content a', (e) => { - $dropdown.prop('title', e.target.text.replace(/_+?/g,'-')); + $dropdownContainer.on('click', '.dropdown-content a', (e) => { + $dropdown.prop('title', e.target.text.replace(/_+?/g, '-')); if ($dropdown.hasClass('has-tooltip')) { $dropdown.tooltip('fixTitle'); } - - }) + }); }); }; -- cgit v1.2.1 From f4aab83a36433eddc00db468b86583eacd4636c9 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 2 Jan 2017 15:30:17 +0000 Subject: Increases pipeline graph drowdown width in order to prevent strange position on chrome on ubuntu Adds MR ID to changelog entry --- app/assets/stylesheets/pages/pipelines.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index c370b6247b0..578003f6d36 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -630,8 +630,8 @@ .grouped-pipeline-dropdown { padding: 0; - width: 191px; - min-width: 191px; + width: 195px; + min-width: 195px; left: auto; right: -195px; top: -4px; -- cgit v1.2.1 From afb857d1e72d31b9e93cb7b2443fcf40851f85e0 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 2 Jan 2017 15:53:24 +0000 Subject: Removes CustomEvent polyfill and tests --- .../javascripts/lib/utils/custom_event_polyfill.js.es6 | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6 b/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6 deleted file mode 100644 index 5ae978010c9..00000000000 --- a/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6 +++ /dev/null @@ -1,12 +0,0 @@ -/** - * CustomEvent support for IE - */ -if (typeof window.CustomEvent !== 'function') { - window.CustomEvent = function CustomEvent(e, params) { - const options = params || { bubbles: false, cancelable: false, detail: undefined }; - const evt = document.createEvent('CustomEvent'); - evt.initCustomEvent(e, options.bubbles, options.cancelable, options.detail); - return evt; - }; - window.CustomEvent.prototype = window.Event.prototype; -} -- cgit v1.2.1 From e8b9d0c2250911f125c664c8df3404d33bbf4eab Mon Sep 17 00:00:00 2001 From: giulianovarriale Date: Fri, 11 Nov 2016 10:57:51 -0200 Subject: Pass date as integer params on instantiate new Date in order to avoid time zone inconsistency --- app/assets/javascripts/due_date_select.js.es6 | 11 ++++++++--- app/assets/javascripts/lib/utils/datetime_utility.js | 13 +++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6 index 2b7d57d86c6..f35c024e716 100644 --- a/app/assets/javascripts/due_date_select.js.es6 +++ b/app/assets/javascripts/due_date_select.js.es6 @@ -2,9 +2,10 @@ (function(global) { class DueDateSelect { - constructor({ $dropdown, $loading } = {}) { + constructor({ $dropdown, $loading, $context } = {}) { const $dropdownParent = $dropdown.closest('.dropdown'); const $block = $dropdown.closest('.block'); + this.$context = $context || $('body'); this.$loading = $loading; this.$dropdown = $dropdown; this.$dropdownParent = $dropdownParent; @@ -80,9 +81,12 @@ } parseSelectedDate() { - this.rawSelectedDate = $("input[name='" + this.fieldName + "']").val(); + this.rawSelectedDate = this.$context.find(`input[name='${this.fieldName}']`).val(); + if (this.rawSelectedDate.length) { - let dateObj = new Date(this.rawSelectedDate); + // Avoid time zone inconsistency using the utils.createDateObject + // method, instead of the native Date object. + const dateObj = gl.utils.createDateObject(this.rawSelectedDate); this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj); } else { this.displayedDate = 'No due date'; @@ -176,5 +180,6 @@ } global.DueDateSelectors = DueDateSelectors; + global.DueDateSelect = DueDateSelect; })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index e8e502694d6..7a136a355ec 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -16,6 +16,19 @@ } w.gl.utils.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + // createDateObject must be used instead of using native Date object + // to create a new Date instance using string as param - '2016-11-10' or + // '2016/11/10' in order to avoid time zone inconsistency. + w.gl.utils.createDateObject = function(string) { + var dateSeparator = string.indexOf('-') > -1 ? '-' : '/'; + + var dateArray = string.split(dateSeparator).map(function(dateItem) { + return parseInt(dateItem, 10); + }); + + return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); + } + w.gl.utils.formatDate = function(datetime) { return dateFormat(datetime, 'mmm d, yyyy h:MMtt Z'); }; -- cgit v1.2.1 From 7d988e4483cfe13cccd797850ab6372c74c01d14 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Tue, 13 Dec 2016 15:37:59 -0600 Subject: fix eslint violations --- app/assets/javascripts/lib/utils/datetime_utility.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index 7a136a355ec..76520f67a4d 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -1,4 +1,4 @@ -/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, padded-blocks, max-len */ +/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, prefer-arrow-callback, padded-blocks, max-len */ /* global timeago */ /* global dateFormat */ @@ -26,8 +26,8 @@ return parseInt(dateItem, 10); }); - return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); - } + return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); + }; w.gl.utils.formatDate = function(datetime) { return dateFormat(datetime, 'mmm d, yyyy h:MMtt Z'); -- cgit v1.2.1 From 4d2fbe65cdcecf36c6c27553175b13b8f80abb73 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Mon, 2 Jan 2017 14:35:33 -0600 Subject: remove unnecessary fixtures and tests --- app/assets/javascripts/due_date_select.js.es6 | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6 index f35c024e716..cb92b8c7658 100644 --- a/app/assets/javascripts/due_date_select.js.es6 +++ b/app/assets/javascripts/due_date_select.js.es6 @@ -2,10 +2,9 @@ (function(global) { class DueDateSelect { - constructor({ $dropdown, $loading, $context } = {}) { + constructor({ $dropdown, $loading } = {}) { const $dropdownParent = $dropdown.closest('.dropdown'); const $block = $dropdown.closest('.block'); - this.$context = $context || $('body'); this.$loading = $loading; this.$dropdown = $dropdown; this.$dropdownParent = $dropdownParent; @@ -81,7 +80,7 @@ } parseSelectedDate() { - this.rawSelectedDate = this.$context.find(`input[name='${this.fieldName}']`).val(); + this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val(); if (this.rawSelectedDate.length) { // Avoid time zone inconsistency using the utils.createDateObject @@ -180,6 +179,5 @@ } global.DueDateSelectors = DueDateSelectors; - global.DueDateSelect = DueDateSelect; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From e4883e7efce8ea578b32d89be089476f1fd26134 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Mon, 2 Jan 2017 14:48:58 -0600 Subject: remove unnecessary utility function --- app/assets/javascripts/due_date_select.js.es6 | 5 ++--- app/assets/javascripts/lib/utils/datetime_utility.js | 15 +-------------- 2 files changed, 3 insertions(+), 17 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6 index cb92b8c7658..6ea8adb7c7b 100644 --- a/app/assets/javascripts/due_date_select.js.es6 +++ b/app/assets/javascripts/due_date_select.js.es6 @@ -83,9 +83,8 @@ this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val(); if (this.rawSelectedDate.length) { - // Avoid time zone inconsistency using the utils.createDateObject - // method, instead of the native Date object. - const dateObj = gl.utils.createDateObject(this.rawSelectedDate); + const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10)); + const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj); } else { this.displayedDate = 'No due date'; diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index 76520f67a4d..e8e502694d6 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -1,4 +1,4 @@ -/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, prefer-arrow-callback, padded-blocks, max-len */ +/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, padded-blocks, max-len */ /* global timeago */ /* global dateFormat */ @@ -16,19 +16,6 @@ } w.gl.utils.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; - // createDateObject must be used instead of using native Date object - // to create a new Date instance using string as param - '2016-11-10' or - // '2016/11/10' in order to avoid time zone inconsistency. - w.gl.utils.createDateObject = function(string) { - var dateSeparator = string.indexOf('-') > -1 ? '-' : '/'; - - var dateArray = string.split(dateSeparator).map(function(dateItem) { - return parseInt(dateItem, 10); - }); - - return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); - }; - w.gl.utils.formatDate = function(datetime) { return dateFormat(datetime, 'mmm d, yyyy h:MMtt Z'); }; -- cgit v1.2.1 From cf3c6a015f9ba644f1cec10319b247ef04114189 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Mon, 2 Jan 2017 15:03:16 -0600 Subject: add comment to explain why we are avoiding the dateString constructor option for our Date object --- app/assets/javascripts/due_date_select.js.es6 | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6 index 6ea8adb7c7b..201f9fdc3fe 100644 --- a/app/assets/javascripts/due_date_select.js.es6 +++ b/app/assets/javascripts/due_date_select.js.es6 @@ -83,6 +83,7 @@ this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val(); if (this.rawSelectedDate.length) { + // Construct Date object manually to avoid buggy dateString support within Date constructor const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10)); const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj); -- cgit v1.2.1 From 588219352c99213d099aff72f32d6ad9ec4830d4 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 2 Jan 2017 16:20:10 -0700 Subject: do not make a url if no deatils_path is present - use '.tag' for ref in commit component --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index a16c1e5bef9..65e6aff426b 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -88,7 +88,7 @@ Date: Tue, 3 Jan 2017 13:07:08 +0100 Subject: hover animations for award buttons, buttons, dropdowns, rows in file list, links, navigation tabs, labels --- app/assets/stylesheets/framework/animations.scss | 59 ++++++++++++++++++++++++ app/assets/stylesheets/framework/nav.scss | 2 +- app/assets/stylesheets/framework/variables.scss | 3 ++ app/assets/stylesheets/pages/labels.scss | 8 ++++ 4 files changed, 71 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index f1d36efb3de..d9046696bc3 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -50,3 +50,62 @@ .pulse { @include webkit-prefix(animation-name, pulse); } + +/* +* General hover animations +*/ + + +// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab +// Usage: @include transition(width, height 0.3s ease-in-out); +// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out); +// transition(width 0.2s, height 0.3s ease-in-out); +// +// Pass in any number of transitions +@mixin transition($transitions...) { + $unfoldedTransitions: (); + @each $transition in $transitions { + $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma); + } + + transition: $unfoldedTransitions; +} + +@function unfoldTransition ($transition) { + // Default values + $property: all; + $duration: $general-hover-transition-duration; + $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want + $delay: null; // Browser default is 0, which is what we want + $defaultProperties: ($property, $duration, $easing, $delay); + + // Grab transition properties if they exist + $unfoldedTransition: (); + @for $i from 1 through length($defaultProperties) { + $p: null; + @if $i <= length($transition) { + $p: nth($transition, $i) + } @else { + $p: nth($defaultProperties, $i) + } + $unfoldedTransition: append($unfoldedTransition, $p); + } + + @return $unfoldedTransition; +} + +.btn { + @include transition(background-color, border-color, color, box-shadow); +} + +a { + @include transition(background-color, color, border); +} + +.color-label { + @include transition(box-shadow); +} + +.tree-table td { + @include transition(background-color, border-color); +} diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5abda13a963..257c67139f1 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -101,7 +101,7 @@ &:hover, &:active, &:focus { - border-bottom: none; + border-color: transparent; } } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b0c4a6edf57..05d32137ad2 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -182,6 +182,9 @@ $count-arrow-border: #dce0e5; $save-project-loader-color: #555; $divergence-graph-bar-bg: #ccc; $divergence-graph-separator-bg: #ccc; +$general-hover-transition-duration: 150ms; +$general-hover-transition-curve: linear; + /* * Common component specific colors diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d129eb12a45..01473bd3855 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -106,6 +106,10 @@ .color-label { padding: 3px 7px; border-radius: $label-border-radius; + + &:hover { + box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + } } .dropdown-labels-error { @@ -203,6 +207,10 @@ z-index: 3; border-radius: $label-border-radius; padding: 6px 10px 6px 9px; + + &:hover { + box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + } } .btn { -- cgit v1.2.1 From 5ba1055d23ee4109e75e35352e0193f39bc65b01 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 3 Jan 2017 14:51:19 +0100 Subject: added additional hover animations, fixed up avatars --- app/assets/stylesheets/framework/animations.scss | 22 ++++++++++++++++++++-- app/assets/stylesheets/framework/avatar.scss | 4 ++++ app/assets/stylesheets/framework/header.scss | 4 +++- app/assets/stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/cycle_analytics.scss | 4 ++++ app/assets/stylesheets/pages/issuable.scss | 4 ++++ app/assets/stylesheets/pages/profile.scss | 10 +++++++++- app/assets/stylesheets/pages/search.scss | 14 ++++++++++++++ 8 files changed, 59 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index d9046696bc3..572bb51e24b 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -94,10 +94,23 @@ @return $unfoldedTransition; } -.btn { +.btn, +.side-nav-toggle { @include transition(background-color, border-color, color, box-shadow); } +.dropdown-menu-toggle, +.avatar-circle { + @include transition(border-color); +} + +.note-action-button .link-highlight, +.toolbar-btn, +.dropdown-toggle-caret, +.fa { + @include transition(color); +} + a { @include transition(background-color, color, border); } @@ -106,6 +119,11 @@ a { @include transition(box-shadow); } -.tree-table td { +.tree-table td, +.well-list > li { @include transition(background-color, border-color); } + +.stage-nav-item { + @include transition(background-color, box-shadow); +} diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 48827578d94..905a61aaee9 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -24,6 +24,10 @@ &.s110 { @include avatar-size(110px, 15px); } &.s140 { @include avatar-size(140px, 15px); } &.s160 { @include avatar-size(160px, 20px); } + + &:hover { + border-color: $gl-link-color; + } } .avatar { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 971940773f7..09e7db80914 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -104,6 +104,7 @@ header { &:hover { background-color: $white-normal; + color: $gl-header-nav-hover-color; } } } @@ -180,6 +181,7 @@ header { &:hover { text-decoration: underline; + color: $gl-header-nav-hover-color; } } @@ -198,7 +200,7 @@ header { cursor: pointer; &:hover { - color: darken($color: $gl-text-color, $amount: 30%); + color: $gl-header-nav-hover-color; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 05d32137ad2..9f2f045fb00 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -109,6 +109,7 @@ $gl-grayish-blue: #7f8fa4; $gl-gray: $gl-text-color; $gl-gray-dark: #313236; $gl-header-color: #4c4e54; +$gl-header-nav-hover-color: #434343; /* * Lists diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 9ce261eafef..47286727bc1 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -20,6 +20,10 @@ .fa { color: $cycle-analytics-light-gray; + + &:hover { + color: $gl-text-color; + } } .stage-header { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6b4d1f85564..bc4ac8d2eb4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -277,6 +277,10 @@ &:hover { color: $md-link-color; text-decoration: none; + + .avatar { + border-color: $md-link-color; + } } } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 8b1976bd925..a677e34a615 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -222,6 +222,10 @@ margin-left: 5px; } + .nav-links li { + margin-right: -4px; + } + .profile-header { margin: 0 auto; @@ -253,6 +257,10 @@ } } } + + .nav-links li { + margin-right: -7px; + } } } @@ -271,4 +279,4 @@ table.u2f-registrations { .scopes-list { padding-left: 18px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index cedd4cb2987..e524872ff3a 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -14,6 +14,20 @@ } } +.search form:hover, +.file-finder-input:hover, +.issuable-search-form:hover, +.search-text-input:hover, +textarea:hover, +.form-control:hover { + border-color: lighten($dropdown-input-focus-border, 20%); + box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%); +} + +input[type="checkbox"]:hover { + box-shadow: 0 0 2px 2px rgba(153, 212, 247, 0.4), 0 0 0 1px rgba(153, 212, 247, 0.4); +} + .search { margin-right: 10px; margin-left: 10px; -- cgit v1.2.1 From 37d43fa9095a43f7610428b2912515ef2e635b54 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 3 Jan 2017 15:45:11 +0100 Subject: fix rake scss linting errors --- app/assets/stylesheets/framework/animations.scss | 4 ++-- app/assets/stylesheets/pages/labels.scss | 4 ++-- app/assets/stylesheets/pages/search.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 572bb51e24b..2f7fda5cb21 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -84,9 +84,9 @@ @for $i from 1 through length($defaultProperties) { $p: null; @if $i <= length($transition) { - $p: nth($transition, $i) + $p: nth($transition, $i); } @else { - $p: nth($defaultProperties, $i) + $p: nth($defaultProperties, $i); } $unfoldedTransition: append($unfoldedTransition, $p); } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 01473bd3855..689de841cbd 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -108,7 +108,7 @@ border-radius: $label-border-radius; &:hover { - box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + box-shadow: inset 0 0 0 80px $label-remove-border; } } @@ -209,7 +209,7 @@ padding: 6px 10px 6px 9px; &:hover { - box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + box-shadow: inset 0 0 0 80px $label-remove-border; } } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index e524872ff3a..12bff32bbf3 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -25,7 +25,7 @@ textarea:hover, } input[type="checkbox"]:hover { - box-shadow: 0 0 2px 2px rgba(153, 212, 247, 0.4), 0 0 0 1px rgba(153, 212, 247, 0.4); + box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%); } .search { -- cgit v1.2.1 From 85a329845fa07112fe81aab8c6440490056f4a17 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 3 Jan 2017 15:41:14 +0000 Subject: Added animations to issue boards - Adds animation when opening & closing the sidebar - Adds an animation when dragging boards to a new position - Adds animations to dragging issues around When opening the sidebar it will also animate the scrollLeft property to make moving to the opened issue less blunt. Closes #25630 --- app/assets/javascripts/boards/components/board.js.es6 | 8 ++++++-- .../boards/mixins/sortable_default_options.js.es6 | 1 + app/assets/stylesheets/pages/boards.scss | 15 +++++++++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index d1fb0ec48e0..f985898a3d9 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -50,9 +50,13 @@ const left = boardsList.scrollLeft - this.$el.offsetLeft; if (right - boardsList.scrollLeft > 0) { - boardsList.scrollLeft = right; + $(boardsList).animate({ + scrollLeft: right + }, 200); } else if (left > 0) { - boardsList.scrollLeft = this.$el.offsetLeft; + $(boardsList).animate({ + scrollLeft: this.$el.offsetLeft + }, 200); } } }, diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 index a5e62ed775d..d5859444a32 100644 --- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 +++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 @@ -20,6 +20,7 @@ gl.issueBoards.getBoardSortableDefaultOptions = (obj) => { let defaultSortOptions = { + animation: 200, forceFallback: true, fallbackClass: 'is-dragging', fallbackOnBody: true, diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 76a88d96183..67ffbae2ab9 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -74,6 +74,7 @@ height: 475px; // Needed for PhantomJS height: calc(100vh - 220px); min-height: 475px; + transition: width .2s; &.is-compact { width: calc(100% - 290px); @@ -338,3 +339,17 @@ } } } + +.right-sidebar.right-sidebar-expanded { + &.boards-sidebar-slide-enter-active, + &.boards-sidebar-slide-leave-active { + transition: all .2s; + } + + &.boards-sidebar-slide-enter, + &.boards-sidebar-slide-leave-active { + width: 0; + padding-left: 0; + padding-right: 0; + } +} -- cgit v1.2.1 From 4cd139e948ad0de3516b6534146b51faffeca610 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Thu, 22 Dec 2016 16:38:27 -0600 Subject: Moved the members (project_members)option to a single controller called members This controller is going to contain both the project members and groups options for the settings gear. Generated the route and modified the routing to point to the new members setting path --- app/assets/javascripts/dispatcher.js.es6 | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 1c1b6cd2dad..75e048cd7f8 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -216,6 +216,7 @@ new UsersSelect(); break; case 'projects:project_members:index': + case 'projects:members:show': new gl.MemberExpirationDate(); new gl.Members(); new UsersSelect(); -- cgit v1.2.1 From ad58dec2e1564e9c2d23dd32e5da8b12eeba965d Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Fri, 23 Dec 2016 16:29:00 -0600 Subject: Added groups to members section, added a members finder --- app/assets/javascripts/dispatcher.js.es6 | 7 ++----- app/assets/javascripts/member_expiration_date.js | 10 +++++++--- 2 files changed, 9 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 75e048cd7f8..496fa9903cc 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -215,8 +215,9 @@ new gl.Members(); new UsersSelect(); break; - case 'projects:project_members:index': case 'projects:members:show': + new gl.MemberExpirationDate('.js-access-expiration-date-groups'); + new GroupsSelect(); new gl.MemberExpirationDate(); new gl.Members(); new UsersSelect(); @@ -262,10 +263,6 @@ case 'projects:artifacts:browse': new BuildArtifacts(); break; - case 'projects:group_links:index': - new gl.MemberExpirationDate(); - new GroupsSelect(); - break; case 'search:show': new Search(); break; diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js index 7741cd29793..fded0881343 100644 --- a/app/assets/javascripts/member_expiration_date.js +++ b/app/assets/javascripts/member_expiration_date.js @@ -5,12 +5,16 @@ // `js-clear-input` element, then show that element when there is a value in the // datepicker, and make clicking on that element clear the field. // - gl.MemberExpirationDate = function() { + gl.MemberExpirationDate = function(newSelector) { function toggleClearInput() { $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== ''); } - var inputs = $('.js-access-expiration-date'); + var selector = '.js-access-expiration-date'; + if (typeof newSelector !== 'undefined' && newSelector !== '') { + selector = newSelector; + } + var inputs = $(selector); inputs.datepicker({ dateFormat: 'yy-mm-dd', @@ -24,7 +28,7 @@ inputs.next('.js-clear-input').on('click', function(event) { event.preventDefault(); - var input = $(this).closest('.clearable-input').find('.js-access-expiration-date'); + var input = $(this).closest('.clearable-input').find(selector); input.datepicker('setDate', null) .trigger('change'); toggleClearInput.call(input); -- cgit v1.2.1 From 99c263ad10c5265f59586dbd33f3af6b3a2347f5 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Tue, 27 Dec 2016 11:24:28 -0600 Subject: Updated some tests descriptions to represent the correct settings path Updated the js from the member_expiration_date to es6 --- app/assets/javascripts/member_expiration_date.js | 41 ---------------------- .../javascripts/member_expiration_date.js.es6 | 37 +++++++++++++++++++ 2 files changed, 37 insertions(+), 41 deletions(-) delete mode 100644 app/assets/javascripts/member_expiration_date.js create mode 100644 app/assets/javascripts/member_expiration_date.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js deleted file mode 100644 index fded0881343..00000000000 --- a/app/assets/javascripts/member_expiration_date.js +++ /dev/null @@ -1,41 +0,0 @@ -/* eslint-disable func-names, space-before-function-paren, vars-on-top, no-var, object-shorthand, comma-dangle, max-len */ -(function() { - // Add datepickers to all `js-access-expiration-date` elements. If those elements are - // children of an element with the `clearable-input` class, and have a sibling - // `js-clear-input` element, then show that element when there is a value in the - // datepicker, and make clicking on that element clear the field. - // - gl.MemberExpirationDate = function(newSelector) { - function toggleClearInput() { - $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== ''); - } - - var selector = '.js-access-expiration-date'; - if (typeof newSelector !== 'undefined' && newSelector !== '') { - selector = newSelector; - } - var inputs = $(selector); - - inputs.datepicker({ - dateFormat: 'yy-mm-dd', - minDate: 1, - onSelect: function () { - $(this).trigger('change'); - toggleClearInput.call(this); - } - }); - - inputs.next('.js-clear-input').on('click', function(event) { - event.preventDefault(); - - var input = $(this).closest('.clearable-input').find(selector); - input.datepicker('setDate', null) - .trigger('change'); - toggleClearInput.call(input); - }); - - inputs.on('blur', toggleClearInput); - - inputs.each(toggleClearInput); - }; -}).call(this); diff --git a/app/assets/javascripts/member_expiration_date.js.es6 b/app/assets/javascripts/member_expiration_date.js.es6 new file mode 100644 index 00000000000..e879a70958a --- /dev/null +++ b/app/assets/javascripts/member_expiration_date.js.es6 @@ -0,0 +1,37 @@ +/* eslint-disable func-names, space-before-function-paren, vars-on-top, no-var, object-shorthand, comma-dangle, max-len */ +(() => { + // Add datepickers to all `js-access-expiration-date` elements. If those elements are + // children of an element with the `clearable-input` class, and have a sibling + // `js-clear-input` element, then show that element when there is a value in the + // datepicker, and make clicking on that element clear the field. + // + gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => { + function toggleClearInput() { + $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== ''); + } + + var inputs = $(selector); + + inputs.datepicker({ + dateFormat: 'yy-mm-dd', + minDate: 1, + onSelect: function () { + $(this).trigger('change'); + toggleClearInput.call(this); + } + }); + + inputs.next('.js-clear-input').on('click', (event) => { + event.preventDefault(); + + var input = $(this).closest('.clearable-input').find(selector); + input.datepicker('setDate', null) + .trigger('change'); + toggleClearInput.call(input); + }); + + inputs.on('blur', toggleClearInput); + + inputs.each(toggleClearInput); + }; +}).call(this); -- cgit v1.2.1 From 8f4f04c2386f29ae6817d72b65b50782b20e4a5e Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Tue, 3 Jan 2017 12:55:36 -0600 Subject: Fixed es6 lint errors, and reverted a change to a helper --- app/assets/javascripts/member_expiration_date.js.es6 | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/member_expiration_date.js.es6 b/app/assets/javascripts/member_expiration_date.js.es6 index e879a70958a..c9c548a490e 100644 --- a/app/assets/javascripts/member_expiration_date.js.es6 +++ b/app/assets/javascripts/member_expiration_date.js.es6 @@ -1,30 +1,29 @@ -/* eslint-disable func-names, space-before-function-paren, vars-on-top, no-var, object-shorthand, comma-dangle, max-len */ (() => { // Add datepickers to all `js-access-expiration-date` elements. If those elements are // children of an element with the `clearable-input` class, and have a sibling // `js-clear-input` element, then show that element when there is a value in the // datepicker, and make clicking on that element clear the field. // + window.gl = window.gl || {}; gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => { function toggleClearInput() { $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== ''); } - - var inputs = $(selector); + const inputs = $(selector); inputs.datepicker({ dateFormat: 'yy-mm-dd', minDate: 1, - onSelect: function () { + onSelect: () => { $(this).trigger('change'); toggleClearInput.call(this); - } + }, }); inputs.next('.js-clear-input').on('click', (event) => { event.preventDefault(); - var input = $(this).closest('.clearable-input').find(selector); + const input = $(this).closest('.clearable-input').find(selector); input.datepicker('setDate', null) .trigger('change'); toggleClearInput.call(input); -- cgit v1.2.1 From 7056e9261a182120c6d8239ff7505bc1da97b9f1 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Tue, 3 Jan 2017 16:20:11 -0600 Subject: Added UX improvements --- app/assets/stylesheets/pages/members.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 36ee5d17211..18c65191ea1 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -98,6 +98,10 @@ padding-right: 35px; @media (min-width: $screen-sm-min) { + width: 250px; + } + + @media (min-width: $screen-md-min) { width: 350px; } -- cgit v1.2.1 From 932bcb4d32ee89922b6e7123a9c18489b36cc6e5 Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Mon, 2 Jan 2017 10:25:28 +0000 Subject: Added isAuthenticate to differentiate between ineligible messages --- app/assets/javascripts/u2f/authenticate.js.es6 | 2 +- app/assets/javascripts/u2f/error.js | 16 ++++++++-------- app/assets/javascripts/u2f/register.js | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/u2f/authenticate.js.es6 b/app/assets/javascripts/u2f/authenticate.js.es6 index 2b992109a8c..f22d1f9b300 100644 --- a/app/assets/javascripts/u2f/authenticate.js.es6 +++ b/app/assets/javascripts/u2f/authenticate.js.es6 @@ -57,7 +57,7 @@ return function(response) { var error; if (response.errorCode) { - error = new U2FError(response.errorCode); + error = new U2FError(response.errorCode, 'authenticate'); return _this.renderError(error); } else { return _this.renderAuthenticated(JSON.stringify(response)); diff --git a/app/assets/javascripts/u2f/error.js b/app/assets/javascripts/u2f/error.js index bb9942a3aa0..50340d9174a 100644 --- a/app/assets/javascripts/u2f/error.js +++ b/app/assets/javascripts/u2f/error.js @@ -5,21 +5,21 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; this.U2FError = (function() { - function U2FError(errorCode) { + function U2FError(errorCode, u2fFlowType) { this.errorCode = errorCode; this.message = bind(this.message, this); this.httpsDisabled = window.location.protocol !== 'https:'; + this.u2fFlowType = u2fFlowType; } U2FError.prototype.message = function() { - switch (false) { - case !(this.errorCode === u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled): - return "U2F only works with HTTPS-enabled websites. Contact your administrator for more details."; - case this.errorCode !== u2f.ErrorCodes.DEVICE_INELIGIBLE: - return "This device has already been registered with us."; - default: - return "There was a problem communicating with your device."; + if (this.errorCode === u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled) { + return 'U2F only works with HTTPS-enabled websites. Contact your administrator for more details.'; + } else if (this.errorCode === u2f.ErrorCodes.DEVICE_INELIGIBLE) { + if (this.u2fFlowType === 'authenticate') return 'This device has not been registered with us.'; + if (this.u2fFlowType === 'register') return 'This device has already been registered with us.'; } + return "There was a problem communicating with your device."; }; return U2FError; diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js index 050c9bfc02e..92014afa593 100644 --- a/app/assets/javascripts/u2f/register.js +++ b/app/assets/javascripts/u2f/register.js @@ -39,7 +39,7 @@ return function(response) { var error; if (response.errorCode) { - error = new U2FError(response.errorCode); + error = new U2FError(response.errorCode, 'register'); return _this.renderError(error); } else { return _this.renderRegistered(JSON.stringify(response)); -- cgit v1.2.1 From 63ec4d484f7f1a208159a9ac42f6c264323f7897 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Wed, 4 Jan 2017 13:01:36 +0100 Subject: Show yaml error badge in pipelines page if present --- app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 index 92c343e33da..ae5649f0519 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 @@ -38,7 +38,7 @@ latest @@ -46,8 +46,8 @@ yaml invalid -- cgit v1.2.1 From 07fc7bef10a0422810c60666bed16dca81307a39 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Wed, 4 Jan 2017 13:08:23 +0100 Subject: Revert adding an invalid CI/CD status CSS class --- app/assets/stylesheets/pages/status.scss | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 47be2dd0efb..4acd17360c1 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -46,20 +46,6 @@ } } - &.ci-passed, - &.ci-passed_with_warnings { - color: $gl-success; - border-color: $gl-success; - - &:not(span):hover { - background-color: rgba( $gl-success, .07); - } - - svg { - fill: $gl-success; - } - } - &.ci-info { color: $gl-info; border-color: $gl-info; -- cgit v1.2.1 From 209aa238f526531f6828e64ac6bfa2afb532c0b0 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 4 Jan 2017 11:38:22 -0700 Subject: add margin-bottom to label css for more even spacing --- app/assets/stylesheets/pages/pipelines.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index dc119843b65..8650f973889 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -29,6 +29,10 @@ min-width: 1200px; table-layout: fixed; + .label { + margin-bottom: 3px; + } + .pipeline-id { color: $black; } -- cgit v1.2.1 From c8b81da0c956b94c7ff639713cff7b12f39a3748 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 4 Jan 2017 12:00:51 -0700 Subject: make timeago 10 seconds instead of 1 --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 96d960f93c5..137b08224a7 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -46,7 +46,7 @@ this.$children .filter(e => e.$options._componentTag === 'time-ago') .forEach(e => e.changeTime()); - }, 1000); + }, 10000); }; startTimeLoops(); -- cgit v1.2.1 From 40fb0d9e47c6f022f41ffb6aa6a1c8f80dbdaf0a Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 4 Jan 2017 12:36:42 -0700 Subject: use has_details to decide if link needs to be created or not --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 592963feb4d..2db18aa0bd4 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -18,7 +18,7 @@ }, detailsPath() { const { status } = this.pipeline.details; - return status.details_path ? status.details_path : false; + return status.has_details ? status.details_path : false; }, }, template: ` -- cgit v1.2.1 From ebdea371381649907d9d4ebb58f3d5000fa5d740 Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Wed, 4 Jan 2017 18:35:40 +0000 Subject: Fix remove template --- app/assets/javascripts/templates/issuable_template_selector.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/templates/issuable_template_selector.js.es6 b/app/assets/javascripts/templates/issuable_template_selector.js.es6 index d2b152045b4..bdec948fb63 100644 --- a/app/assets/javascripts/templates/issuable_template_selector.js.es6 +++ b/app/assets/javascripts/templates/issuable_template_selector.js.es6 @@ -23,7 +23,7 @@ }); $('.no-template', this.dropdown.parent()).on('click', () => { - this.currentTemplate = ''; + this.currentTemplate.content = ''; this.setInputValueToTemplateContent(); $('.dropdown-toggle-text', this.dropdown).text('Choose a template'); }); -- cgit v1.2.1 From 86b1dfc7a494b19a20cf677f040d2f9c8a1efad7 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Fri, 30 Dec 2016 12:18:27 -0800 Subject: 25701 standardize text colors --- app/assets/stylesheets/framework/badges.scss | 5 --- app/assets/stylesheets/framework/blocks.scss | 14 ++++----- app/assets/stylesheets/framework/buttons.scss | 6 ++-- app/assets/stylesheets/framework/common.scss | 2 +- app/assets/stylesheets/framework/dropdowns.scss | 14 ++++----- app/assets/stylesheets/framework/forms.scss | 2 +- app/assets/stylesheets/framework/header.scss | 6 ++-- app/assets/stylesheets/framework/icons.scss | 4 +-- app/assets/stylesheets/framework/issue_box.scss | 2 +- app/assets/stylesheets/framework/lists.scss | 4 +-- .../stylesheets/framework/markdown_area.scss | 4 +-- app/assets/stylesheets/framework/mixins.scss | 2 +- app/assets/stylesheets/framework/nav.scss | 4 +-- app/assets/stylesheets/framework/page-header.scss | 4 +-- app/assets/stylesheets/framework/timeline.scss | 4 +-- app/assets/stylesheets/framework/tw_bootstrap.scss | 2 +- .../framework/tw_bootstrap_variables.scss | 9 ++++-- app/assets/stylesheets/framework/typography.scss | 14 ++++----- app/assets/stylesheets/framework/variables.scss | 36 ++++++++-------------- app/assets/stylesheets/framework/wells.scss | 2 +- app/assets/stylesheets/framework/zen.scss | 2 +- app/assets/stylesheets/highlight/white.scss | 2 +- app/assets/stylesheets/pages/boards.scss | 2 +- app/assets/stylesheets/pages/branches.scss | 2 +- app/assets/stylesheets/pages/builds.scss | 4 +-- app/assets/stylesheets/pages/ci_projects.scss | 2 +- app/assets/stylesheets/pages/commits.scss | 16 +++++----- app/assets/stylesheets/pages/cycle_analytics.scss | 18 +++++------ app/assets/stylesheets/pages/detail_page.scss | 8 ++--- app/assets/stylesheets/pages/diff.scss | 6 ++-- app/assets/stylesheets/pages/environments.scss | 10 +++--- app/assets/stylesheets/pages/events.scss | 2 +- app/assets/stylesheets/pages/groups.scss | 2 +- app/assets/stylesheets/pages/issuable.scss | 16 +++++----- app/assets/stylesheets/pages/labels.scss | 2 +- app/assets/stylesheets/pages/merge_requests.scss | 14 ++++----- app/assets/stylesheets/pages/milestone.scss | 2 +- app/assets/stylesheets/pages/note_form.scss | 4 +-- app/assets/stylesheets/pages/notes.scss | 2 +- app/assets/stylesheets/pages/pipelines.scss | 26 ++++++++-------- app/assets/stylesheets/pages/projects.scss | 14 ++++----- app/assets/stylesheets/pages/settings.scss | 2 +- app/assets/stylesheets/pages/status.scss | 16 +++++----- app/assets/stylesheets/pages/todos.scss | 2 +- app/assets/stylesheets/pages/tree.scss | 10 +++--- app/assets/stylesheets/pages/wiki.scss | 4 +-- 46 files changed, 158 insertions(+), 172 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss index e9d7cda0647..47a8f44c709 100644 --- a/app/assets/stylesheets/framework/badges.scss +++ b/app/assets/stylesheets/framework/badges.scss @@ -4,8 +4,3 @@ color: $badge-color; vertical-align: baseline; } - -.badge-dark { - background-color: $badge-bg-dark; - color: $badge-color-dark; -} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index e9aadffc73c..407c800feb7 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -1,13 +1,13 @@ .centered-light-block { text-align: center; - color: $gl-gray; + color: $gl-text-color; margin: 20px; } .nothing-here-block { text-align: center; padding: 20px; - color: $gl-gray; + color: $gl-text-color; font-weight: normal; font-size: 14px; line-height: 36px; @@ -29,7 +29,7 @@ margin-bottom: 0; border-top: 1px solid $white-dark; border-bottom: 1px solid $white-dark; - color: $gl-gray; + color: $gl-text-color; &.oneline-block { line-height: 42px; @@ -135,11 +135,11 @@ } .cover-title { - color: $gl-header-color; + color: $gl-text-color; font-size: 23px; h1 { - color: $gl-gray-dark; + color: $gl-text-color; margin-bottom: 6px; font-size: 23px; } @@ -153,7 +153,7 @@ p { padding: 0 $gl-padding; - color: $gl-text-color-dark; + color: $gl-text-color; } } @@ -211,7 +211,7 @@ display: inline; font-weight: normal; font-size: 24px; - color: $gl-title-color; + color: $gl-text-color; } } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index a11f1cd7735..e04a87a7327 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -88,7 +88,7 @@ } @mixin btn-gray { - @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); + @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color); } @mixin btn-white { @@ -242,7 +242,7 @@ } .btn-transparent { - color: $gl-gray-light; + color: $gl-text-color-secondary; background-color: transparent; border: 0; @@ -338,7 +338,7 @@ margin-left: 10px; i { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 67b5aa37ae7..0ce94a26a7f 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -412,7 +412,7 @@ table { padding: 0 10px; clip: auto; text-decoration: none; - color: $gl-title-color; + color: $gl-text-color; background: $gray-light; z-index: 1; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 889366d6ddf..755eddefa42 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -201,7 +201,7 @@ } .icon-play { - fill: $gl-gray-light; + fill: $gl-text-color-secondary; margin-right: 6px; height: 12px; width: 11px; @@ -209,7 +209,7 @@ } .dropdown-header { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; line-height: 22px; padding: 0 10px; @@ -222,7 +222,7 @@ .unclickable { cursor: not-allowed; padding: 5px 8px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } @@ -592,7 +592,7 @@ } .ui-datepicker-title { - color: $gl-gray; + color: $gl-text-color; font-size: 14px; line-height: 1; font-weight: normal; @@ -614,17 +614,17 @@ .dropdown-menu-inner-title { display: block; - color: $gl-title-color; + color: $gl-text-color; font-weight: 600; } .dropdown-menu-inner-content { display: block; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown-toggle-text { &.is-default { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 8726a69867b..25d6fbe465a 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -153,7 +153,7 @@ label { } .form-control::-webkit-input-placeholder { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .input-group { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 971940773f7..72b3fe2016c 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -45,7 +45,7 @@ header { padding: 0; .nav > li > a { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 18px; padding: 0; margin: ($header-height - 28) / 2 0; @@ -63,7 +63,7 @@ header { &:focus, &:active { background-color: $gray-light; - color: darken($gl-gray-light, 30%); + color: darken($gl-text-color-secondary, 30%); .todos-pending-count { background: darken($todo-alert-blue, 10%); @@ -88,7 +88,7 @@ header { } &.active { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } } diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 8624a25c052..dccf5177e35 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -34,10 +34,10 @@ .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-not-found { - color: $gl-gray; + color: $gl-text-color; svg { - fill: $gl-gray; + fill: $gl-text-color; } } diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 298913108ee..46632f15f35 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -41,6 +41,6 @@ } &.status-box-upcoming { - background: $gl-gray-light; + background: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index bffd0e6f0cd..771dfaec46e 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -128,7 +128,7 @@ ul.content-list { } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .member-group-link { @@ -230,7 +230,7 @@ ul.content-list { } .label-default { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index e30d81d09f0..5bff694658c 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -73,7 +73,7 @@ } .referenced-users { - color: $gl-header-color; + color: $gl-text-color; padding-top: 10px; } @@ -135,7 +135,7 @@ .toolbar-btn { float: left; padding: 0 5px; - color: $gl-gray-light; + color: $gl-text-color-secondary; background: transparent; border: 0; outline: 0; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 4f2ac77f228..1acd06122a3 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -46,7 +46,7 @@ &.light { a { - color: $gl-gray; + color: $gl-text-color; } } } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5abda13a963..a292e7686f9 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -51,7 +51,7 @@ margin-bottom: -1px; font-size: 14px; line-height: 28px; - color: $gl-gray-light; + color: $gl-text-color-secondary; border-bottom: 2px solid transparent; &:hover, @@ -315,7 +315,7 @@ .fa-caret-down { margin-left: 5px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown { diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss index 625bea96aaa..4decee2c525 100644 --- a/app/assets/stylesheets/framework/page-header.scss +++ b/app/assets/stylesheets/framework/page-header.scss @@ -14,7 +14,7 @@ .header-action-buttons { i { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; margin-right: 3px; } @@ -42,7 +42,7 @@ .commit-committer-link, .commit-author-link { - color: $gl-gray; + color: $gl-text-color; font-weight: bold; } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 6078505807e..ff185cd8767 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -7,7 +7,7 @@ .timeline-entry { padding: $gl-padding $gl-btn-padding 11px; border-color: $white-normal; - color: $gl-gray; + color: $gl-text-color; border-bottom: 1px solid $border-white-light; &:target { @@ -32,7 +32,7 @@ .system-note { .note-text { - color: $gl-gray !important; + color: $gl-text-color !important; } } diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss index 28cbae9a449..12d56359d7d 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap.scss @@ -98,7 +98,7 @@ &.label-gray { background-color: $label-gray-bg; - color: $gl-gray; + color: $gl-text-color; text-shadow: none; } diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss index 876adf7f712..0fc89d5976a 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -65,11 +65,11 @@ $legend-color: $text-color; // //## -$pagination-color: $gl-gray; +$pagination-color: $gl-text-color; $pagination-bg: $white-light; $pagination-border: $border-color; -$pagination-hover-color: $gl-gray; +$pagination-hover-color: $gl-text-color; $pagination-hover-bg: $row-hover; $pagination-hover-border: $border-color; @@ -121,6 +121,9 @@ $panel-default-heading-bg: $gray-light; $panel-footer-bg: $gray-light; $panel-inner-border: $border-color; +$badge-bg: $badge-bg; +$badge-color: $badge-color; + //== Wells // //## @@ -154,7 +157,7 @@ $nav-link-padding: 13px $gl-padding; // //## $pre-bg: $gray-light !default; -$pre-color: $gl-gray !default; +$pre-color: $gl-text-color !default; $pre-border-color: $border-color; $table-bg-accent: $gray-light; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index d906d26bba9..bd58a26f429 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -1,5 +1,5 @@ @mixin md-typography { - color: $md-text-color; + color: $gl-text-color; word-wrap: break-word; a { @@ -50,14 +50,14 @@ margin: 16px 0 10px; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; - color: $gl-gray-dark; + color: $gl-text-color; } h2 { font-size: 1.5em; font-weight: 600; margin: 16px 0 10px; - color: $gl-gray-dark; + color: $gl-text-color; } h3 { @@ -100,7 +100,7 @@ } p { - color: $gl-text-color-dark; + color: $gl-text-color; margin: 6px 0 0; } @@ -108,7 +108,7 @@ @extend .table; @extend .table-bordered; margin: 12px 0; - color: $gl-text-color-dark; + color: $gl-text-color; th { background: $label-gray-bg; @@ -230,7 +230,7 @@ h3, h4, h5, h6 { - color: $gl-title-color; + color: $gl-text-color; font-weight: 600; } @@ -292,7 +292,7 @@ h2, h3, h4 { small { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index dc211fc55a7..6595010d221 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -94,29 +94,22 @@ $well-light-text-color: #5b6169; * Text */ $gl-font-size: 14px; -$gl-title-color: #333; -$gl-text-color: #5c5c5c; -$gl-text-color-dark: #5c5d5e; -$gl-text-color-light: #8c8c8c; +$gl-text-color: rgba(0, 0, 0, .85); +$gl-text-color-secondary: rgba(0, 0, 0, .55); +$gl-text-color-disabled: rgba(0, 0, 0, .35); $gl-text-green: #4a2; $gl-text-red: #d12f19; $gl-text-orange: #d90; $gl-link-color: #3777b0; -$gl-diff-text-color: #555; -$gl-dark-link-color: #333; -$gl-gray-light: #8f8f8f; $gl-grayish-blue: #7f8fa4; -$gl-gray: $gl-text-color; -$gl-gray-dark: #313236; -$gl-header-color: #4c4e54; /* * Lists */ $list-font-size: $gl-font-size; -$list-title-color: $gl-title-color; +$list-title-color: $gl-text-color; $list-text-color: $gl-text-color; -$list-text-disabled-color: #888; +$list-text-disabled-color: $gl-text-color-disabled; $list-border-light: #eee; $list-border: rgba(0, 0, 0, 0.05); $list-text-height: 42px; @@ -127,7 +120,6 @@ $list-warning-row-color: #8a6d3b; /* * Markdown */ -$md-text-color: $gl-text-color; $md-link-color: $gl-link-color; $md-area-border: #ddd; @@ -168,9 +160,7 @@ $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-xs-side-margin: 5px; $issue-status-expired: #cea61b; -$issuable-sidebar-color: #999; -$issuable-avatar-hover-border: #999; -$issuable-clipboard-color: #999; +$issuable-sidebar-color: $gl-text-color-secondary; $show-aside-bg: #eee; $show-aside-color: #777; $show-aside-shadow: #ddd; @@ -282,10 +272,8 @@ $btn-active-gray-light: e4e7ed; /* * Badges */ -$badge-bg: #f3f3f3; -$badge-bg-dark: #eee; -$badge-color: #929292; -$badge-color-dark: #8f8f8f; +$badge-bg: #eee; +$badge-color: $gl-text-color-secondary; /* * Award emoji @@ -304,8 +292,8 @@ $location-icon-color: #e7e9ed; /* * Notes */ -$notes-light-color: #8e8e8e; -$notes-role-color: #8e8e8e; +$notes-light-color: $gl-text-color-secondary; +$notes-role-color: $gl-text-color-secondary; $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; @@ -330,7 +318,7 @@ $calendar-user-contrib-text: #959494; $cycle-analytics-box-padding: 30px; $cycle-analytics-box-text-color: #8c8c8c; $cycle-analytics-big-font: 19px; -$cycle-analytics-dark-text: $gl-title-color; +$cycle-analytics-dark-text: $gl-text-color; $cycle-analytics-light-gray: #bfbfbf; $cycle-analytics-dismiss-icon-color: #b2b2b2; @@ -382,7 +370,7 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0.0); /* * Common */ -$common-gray: $gl-gray; +$common-gray: $gl-text-color; $common-gray-light: #bbb; $common-gray-dark: #444; $common-red: $gl-text-red; diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index f9c850ebdc8..32eb750180f 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -1,6 +1,6 @@ .info-well { background: $gray-light; - color: $gl-gray; + color: $gl-text-color; border: 1px solid $border-color; border-radius: $border-radius-default; diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index 84b639fabf5..97ade638db6 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -40,7 +40,7 @@ } .zen-control-full { - color: $gl-gray-light; + color: $gl-text-color-secondary; &:hover { color: $gl-link-color; diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index 54a5664a874..b425c78e0d5 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -3,7 +3,7 @@ /* * White Syntax Colors */ -$white-code-color: #333; +$white-code-color: $gl-text-color; $white-highlight: #fafe3d; $white-pre-hll-bg: #f8eec7; $white-hll-bg: #f8f8f8; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 76a88d96183..c18de7b940a 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -259,7 +259,7 @@ .board-list-count { padding: 10px 0; - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; > .fa { diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index 8d671585b7a..3e2fa8ca88d 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -29,7 +29,7 @@ padding-top: 6px; padding-bottom: 0; font-size: 12px; - color: $gl-title-color; + color: $gl-text-color; display: block; } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f9e8d297c05..fd101d43b5b 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -160,7 +160,7 @@ flex: 1; a { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $gl-link-color; @@ -357,7 +357,7 @@ } .build-light-text { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .build-gutter-toggle { diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss index d1cd1e5d848..90643832390 100644 --- a/app/assets/stylesheets/pages/ci_projects.scss +++ b/app/assets/stylesheets/pages/ci_projects.scss @@ -18,7 +18,7 @@ } td { - color: $gl-gray; + color: $gl-text-color; vertical-align: middle !important; a { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index d890cf3502b..fef8e8eec27 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -19,7 +19,7 @@ .commit-title { margin: 0; - color: $gl-gray-dark; + color: $gl-text-color; } .commit-description { @@ -96,14 +96,14 @@ } .commit-row-message { - color: $gl-dark-link-color; + color: $gl-text-color; } } .text-expander { display: inline-block; background: $gray-light; - color: $gl-gray-light; + color: $gl-text-color-secondary; padding: 0 5px; cursor: pointer; border: 1px solid $border-gray-dark; @@ -153,7 +153,7 @@ a, button { - color: $gl-dark-link-color; + color: $gl-text-color; vertical-align: baseline; } @@ -176,7 +176,7 @@ } a { - color: $gl-dark-link-color; + color: $gl-text-color; } } @@ -193,7 +193,7 @@ } .branch-commit { - color: $gl-gray; + color: $gl-text-color; .commit-icon { text-align: center; @@ -203,7 +203,7 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } } @@ -212,6 +212,6 @@ } .commit-row-message { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 9ce261eafef..6566f27ea2d 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -111,14 +111,14 @@ line-height: 19px; font-size: 14px; font-weight: 600; - color: $gl-title-color; + color: $gl-text-color; } &.text { color: $layout-link-gray; &.value-col { - color: $gl-title-color; + color: $gl-text-color; } } } @@ -260,7 +260,7 @@ .stage-empty, .not-available { - color: $gl-text-color-light; + color: $gl-text-color-secondary; } } } @@ -327,7 +327,7 @@ @include text-overflow(); a { - color: $gl-dark-link-color; + color: $gl-text-color; } } } @@ -355,7 +355,7 @@ .issue-link, .commit-author-link, .issue-author-link { - color: $gl-dark-link-color; + color: $gl-text-color; } // Custom CSS for components @@ -396,11 +396,11 @@ } .item-build-name { - color: $gl-title-color; + color: $gl-text-color; } .pipeline-id { - color: $gl-title-color; + color: $gl-text-color; padding: 0 3px 0 0; } @@ -423,7 +423,7 @@ } .fa { - color: $gl-text-color-light; + color: $gl-text-color-secondary; font-size: $code_font_size; } } @@ -435,7 +435,7 @@ width: 75%; margin: 0 auto; padding-top: 130px; - color: $gl-text-color-light; + color: $gl-text-color-secondary; h4 { color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 9b28df1afc5..46fd19c93f9 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -1,15 +1,15 @@ .detail-page-header { padding: $gl-padding-top 0; border-bottom: 1px solid $border-color; - color: $gl-text-color-dark; + color: $gl-text-color; line-height: 34px; .author { - color: $gl-text-color-dark; + color: $gl-text-color; } .identifier { - color: $gl-text-color-dark; + color: $gl-text-color; } .issue_created_ago, @@ -22,7 +22,7 @@ .title { margin: 0 0 16px; font-size: 2em; - color: $gl-gray-dark; + color: $gl-text-color; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; } diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index f30795fd2c2..96ba7c40634 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -14,7 +14,7 @@ background: $gray-light; border-bottom: 1px solid $border-color; padding: 10px 16px; - color: $gl-diff-text-color; + color: $gl-text-color; z-index: 10; border-radius: 3px 3px 0 0; @@ -50,7 +50,7 @@ overflow: auto; overflow-y: hidden; background: $white-light; - color: $gl-title-color; + color: $gl-text-color; border-radius: 0 0 3px 3px; .unfold { @@ -380,7 +380,7 @@ } cursor: default; - color: $gl-title-color; + color: $gl-text-color; } &.disabled { diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 5517dc5dcbd..778ef01430e 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -72,25 +72,25 @@ .external-url, .dropdown-new { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown-menu { .fa { margin-right: 6px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } .build-link, .branch-name { - color: $gl-dark-link-color; + color: $gl-text-color; } .stop-env-link, .external-url { - color: $gl-gray-light; + color: $gl-text-color-secondary; .stop-env-icon { font-size: 14px; @@ -101,7 +101,7 @@ .build-column { .build-link { - color: $gl-dark-link-color; + color: $gl-text-color; } .avatar { diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 98925c2d0cb..b989d72ce1c 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -21,7 +21,7 @@ } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .avatar { diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 16bff5f1e03..d377526e655 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -13,7 +13,7 @@ .stats { float: right; line-height: $list-text-height; - color: $gl-gray; + color: $gl-text-color; span { margin-right: 15px; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 42a3f5baed9..0a8c037c402 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -103,7 +103,7 @@ } .edit-link { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $md-link-color; @@ -139,7 +139,7 @@ } .btn-clipboard:hover { - color: $gl-gray; + color: $gl-text-color; } } @@ -174,7 +174,7 @@ } .no-value { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .sidebar-collapsed-icon { @@ -242,7 +242,7 @@ color: $issuable-sidebar-color; &:hover { - color: $gl-gray; + color: $gl-text-color; } span { @@ -255,16 +255,16 @@ } .avatar:hover { - border-color: $issuable-avatar-hover-border; + border-color: $issuable-sidebar-color; } .btn-clipboard { border: none; - color: $issuable-clipboard-color; + color: $issuable-sidebar-color; &:hover { background: transparent; - color: $gl-gray; + color: $gl-text-color; } } } @@ -338,7 +338,7 @@ margin-left: 5px; a { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d129eb12a45..78683c7d574 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -117,7 +117,7 @@ .manage-labels-list { .btn-action { - color: $gl-dark-link-color; + color: $gl-text-color; .fa { font-size: 18px; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 98d5967e76a..45ff9f7ff5f 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -4,7 +4,7 @@ */ .mr-state-widget { background: $gray-light; - color: $gl-gray; + color: $gl-text-color; border: 1px solid $border-color; border-radius: 2px; @@ -58,7 +58,7 @@ padding-right: 0; a { - color: $gl-gray; + color: $gl-text-color; } } @@ -70,7 +70,7 @@ .ci_widget { border-bottom: 1px solid $well-inner-border; - color: $gl-gray; + color: $gl-text-color; svg { margin-right: 4px; @@ -94,7 +94,7 @@ } .normal { - color: $gl-text-color-dark; + color: $gl-text-color; } .js-deployment-link { @@ -106,7 +106,7 @@ font-weight: 600; font-size: 16px; margin: 5px 0; - color: $gl-gray-dark; + color: $gl-text-color; &.has-conflicts .fa-exclamation-triangle { color: $gl-warning; @@ -190,7 +190,7 @@ } .label-branch { - color: $gl-gray-dark; + color: $gl-text-color; font-family: $monospace_font; font-weight: bold; overflow: hidden; @@ -363,7 +363,7 @@ th { background-color: $white-light; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index f47ae9c6157..e284b7269ce 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -102,7 +102,7 @@ margin-top: 7px; .issuable-number { - color: $gl-gray-light; + color: $gl-text-color-secondary; margin-right: 5px; } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e54e12be82f..9f1c6a8a264 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -44,7 +44,7 @@ .note-textarea { display: block; padding: 10px 0; - color: $gl-gray; + color: $gl-text-color; font-family: $regular_font; border: 0; @@ -204,7 +204,7 @@ .comment-toolbar { padding-top: $gl-padding-top; - color: $gl-gray-light; + color: $gl-text-color-secondary; border-top: 1px solid $border-color; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 21d72791e81..38c548908f8 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -345,7 +345,7 @@ ul.notes { } .author_link { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 578003f6d36..1e4f242d40d 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -131,7 +131,7 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } .fa { @@ -210,7 +210,7 @@ .duration, .finished-at { - color: $gl-gray-light; + color: $gl-text-color-secondary; margin: 4px 0; .fa { @@ -231,7 +231,7 @@ .btn { margin: 0; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .cancel-retry-btns { @@ -244,10 +244,10 @@ .dropdown-toggle, .dropdown-menu { - color: $gl-gray-light; + color: $gl-text-color-secondary; .fa { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 14px; } @@ -281,7 +281,7 @@ .build-link { a { - color: $gl-dark-link-color; + color: $gl-text-color; } } @@ -344,7 +344,7 @@ a { text-decoration: none; - color: $gl-text-color-light; + color: $gl-text-color-secondary; } svg { @@ -468,13 +468,13 @@ width: 186px; margin-bottom: 10px; white-space: normal; - color: $gl-text-color-light; + color: $gl-text-color-secondary; .dropdown-menu-toggle { background-color: transparent; border: none; padding: 0; - color: $gl-text-color-light; + color: $gl-text-color-secondary; &:focus { outline: none; @@ -730,7 +730,7 @@ } .dropdown-build { - color: $gl-text-color-light; + color: $gl-text-color-secondary; .build-content { padding: 4px 7px 8px; @@ -784,7 +784,7 @@ .builds-dropdown { background-color: transparent; padding: 0; - color: $gl-text-color-light; + color: $gl-text-color-secondary; border: none; margin: 0; @@ -827,7 +827,7 @@ .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); + background-color: rgba($gl-text-color, .1); } .ci-status-icon-created, @@ -866,7 +866,7 @@ min-height: 50px; a { - color: $gl-text-color-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 4a1bc560292..e30d73886e1 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -292,7 +292,7 @@ .option-title { font-weight: normal; display: inline-block; - color: $gl-gray-dark; + color: $gl-text-color; } .option-descr { @@ -331,7 +331,7 @@ a.deploy-project-label { padding: 5px; margin-right: 5px; - color: $gl-gray; + color: $gl-text-color; background-color: $row-hover; &:hover { @@ -372,7 +372,7 @@ a.deploy-project-label { } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .dropdown-menu { @@ -426,7 +426,7 @@ a.deploy-project-label { width: 100%; height: 100%; padding-top: $gl-padding; - color: $gl-gray; + color: $gl-text-color; .caption { min-height: 30px; @@ -552,7 +552,7 @@ pre.light-well { margin: 0 7px 7px; h5 { - color: $gl-text-color-dark; + color: $gl-text-color; } .light-well { @@ -662,7 +662,7 @@ pre.light-well { } .commit-row-message { - color: $gl-gray; + color: $gl-text-color; } .commit_short_id { @@ -750,7 +750,7 @@ pre.light-well { .protected-branches-list { a { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $gl-link-color; diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index ddee2c95247..a28a87ed4f8 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -1,5 +1,5 @@ .settings-list-icon { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: $settings-icon-size; line-height: 42px; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 2f6f03e9877..f19275770be 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -61,15 +61,15 @@ &.ci-canceled, &.ci-disabled { - color: $gl-gray; - border-color: $gl-gray; + color: $gl-text-color; + border-color: $gl-text-color; &:not(span):hover { - background-color: rgba($gl-gray, .07); + background-color: rgba($gl-text-color, .07); } svg { - fill: $gl-gray; + fill: $gl-text-color; } } @@ -101,15 +101,15 @@ &.ci-created, &.ci-skipped { - color: $gl-gray-light; - border-color: $gl-gray-light; + color: $gl-text-color-secondary; + border-color: $gl-text-color-secondary; &:not(span):hover { - background-color: rgba($gl-gray-light, .07); + background-color: rgba($gl-text-color-secondary, .07); } svg { - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 508b30f3947..01675acc62e 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -90,7 +90,7 @@ } p { - color: $gl-text-color-dark; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index fe4f08e4749..4cce1c363eb 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -78,7 +78,7 @@ i, a { - color: $gl-dark-link-color; + color: $gl-text-color; } img { @@ -104,21 +104,21 @@ padding-right: 8px; .commit-author-name { - color: $gl-gray; + color: $gl-text-color; } } .tree-time-ago { min-width: 135px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .tree-commit { max-width: 320px; - color: $gl-gray-light; + color: $gl-text-color-secondary; .tree-commit-link { - color: $gl-gray-light; + color: $gl-text-color-secondary; &:hover { text-decoration: underline; diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index b9f81533150..d5783e14b21 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -15,7 +15,7 @@ } .wiki-last-edit-by { - color: $gl-gray-light; + color: $gl-text-color-secondary; strong { color: $gl-text-color; @@ -24,7 +24,7 @@ .light { font-weight: normal; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .git-access-header { -- cgit v1.2.1 From 232f7fd9757ae25351d43a7ed303e668ebf5a563 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 4 Jan 2017 23:21:18 +0300 Subject: Terminal: Add TextEncoder and TextDecoder in terminal bundle. --- app/assets/javascripts/terminal/terminal_bundle.js.es6 | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/terminal/terminal_bundle.js.es6 b/app/assets/javascripts/terminal/terminal_bundle.js.es6 index ded7ee6e9fe..33d2c1e1a17 100644 --- a/app/assets/javascripts/terminal/terminal_bundle.js.es6 +++ b/app/assets/javascripts/terminal/terminal_bundle.js.es6 @@ -1,3 +1,5 @@ +//= require xterm/encoding-indexes +//= require xterm/encoding //= require xterm/xterm.js //= require xterm/fit.js //= require ./terminal.js -- cgit v1.2.1 From 1100320b0cc4a1cc0f88eaf9f4d4d5c4b6f13c5c Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Fri, 14 Oct 2016 00:11:43 +0300 Subject: Refactor discussion edit widget to have only one at a time. --- app/assets/javascripts/lib/utils/common_utils.js | 12 +++ app/assets/javascripts/notes.js | 106 +++++++++++++++-------- app/assets/stylesheets/pages/notes.scss | 9 ++ 3 files changed, 89 insertions(+), 38 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 0a0e73e0ccc..06f85897f1a 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -129,4 +129,16 @@ })(window); + gl.utils.isElementVisibleInViewport = function(el) { + var rect = el.getBoundingClientRect(); + var height = Math.max(document.documentElement.clientHeight, window.innerHeight); + return !(rect.bottom - 110 < 0 || rect.top - height >= 0); // -110 for sticky GitLab navigation header + } + + gl.utils.animateToElement = function($el) { + return $('body, html').animate({ + scrollTop: $el.offset().top - 110 + }, 200); + } + }).call(this); diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index a8b9a352870..1f30368472d 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -63,7 +63,7 @@ // change note in UI after update $(document).on("ajax:success", "form.edit-note", this.updateNote); // Edit note link - $(document).on("click", ".js-note-edit", this.showEditForm); + $(document).on("click", ".js-note-edit", this.showEditForm.bind(this)); $(document).on("click", ".note-edit-cancel", this.cancelEdit); // Reopen and close actions for Issue/MR combined with note form submit $(document).on("click", ".js-comment-button", this.updateCloseButton); @@ -466,6 +466,9 @@ var $html, $note_li; // Convert returned HTML to a jQuery object so we can modify it further $html = $(note.html); + + $('.note-edit-form').insertBefore('.notes-form'); + gl.utils.localTimeAgo($('.js-timeago', $html)); $html.renderGFM(); $html.find('.js-task-list-container').taskList('enable'); @@ -480,48 +483,73 @@ }; + Notes.prototype.checkContentToAllowEditing = function($el) { + var initialContent = $el.find('.original-note-content').text().trim(); + var currentContent = $el.find('.note-textarea').val(); + var isAllowed = true; + + if (currentContent === initialContent) { + this.removeNoteEditForm($el); + $el.find('.js-md-write-button').trigger('click'); + } + else { + var $buttons = $el.find('.note-form-actions'); + var isButtonsVisible = gl.utils.isElementVisibleInViewport($buttons[0]); + var isWidgetVisible = gl.utils.isElementVisibleInViewport($el[0]); + + if (!isButtonsVisible || !isWidgetVisible) { + gl.utils.animateToElement($el); + } + + $el.find('.js-edit-warning').show(); + $el.find('.js-md-write-button').trigger('click'); + isAllowed = false; + } + + return isAllowed; + } + + /* Called in response to clicking the edit note link Replaces the note text with the note edit form Adds a data attribute to the form with the original content of the note for cancellations - */ - + */ Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) { - var $noteText, done, form, note; e.preventDefault(); - note = $(this).closest(".note"); - note.addClass("is-editting"); - form = note.find(".note-edit-form"); + + var $currentlyEditing = $('.note.is-editting'); + if ($currentlyEditing.length) { + var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing); + + if (!isEditAllowed) { + return; + } + } + + var note = $(e.target).closest('.note'); + var $editForm = $('.note-edit-form'); + var $originalContentEl = note.find('.original-note-content'); + var originalContent = $originalContentEl.text().trim(); + var postUrl = $originalContentEl.data('post-url'); + var form = note.find('.note-edit-form'); + var $noteText = form.find('.js-note-text'); + var noteTextVal = $noteText.val(); // Neat little trick to put the cursor at the end + + note.addClass('is-editting'); + $editForm.insertAfter(note.find('.note-text')); + $editForm.find('.js-note-text').val(originalContent); + $editForm.find('form').attr('action', postUrl); + form.addClass('current-note-edit-form'); - // Show the attachment delete link - note.find(".js-note-attachment-delete").show(); - done = function($noteText) { - var noteTextVal; - // Neat little trick to put the cursor at the end - noteTextVal = $noteText.val(); - // Store the original note text in a data attribute to retrieve if a user cancels edit. - form.find('form.edit-note').data('original-note', noteTextVal); - return $noteText.val('').val(noteTextVal); - }; + note.find('.js-note-attachment-delete').show(); // Show the attachment delete link new GLForm(form); - if ((scrollTo != null) && (myLastNote != null)) { - // scroll to the bottom - // so the open of the last element doesn't make a jump - $('html, body').scrollTop($(document).height()); - return $('html, body').animate({ - scrollTop: myLastNote.offset().top - 150 - }, 500, function() { - var $noteText; - $noteText = form.find(".js-note-text"); - $noteText.focus(); - return done($noteText); - }); - } else { - $noteText = form.find('.js-note-text'); - $noteText.focus(); - return done($noteText); - } + + $noteText.focus(); + // Store the original note text in a data attribute to retrieve if a user cancels edit. + form.find('form.edit-note').data('original-note', noteTextVal); + $noteText.val('').val(noteTextVal); }; @@ -532,15 +560,17 @@ */ Notes.prototype.cancelEdit = function(e) { - var note; e.preventDefault(); - note = $(e.target).closest('.note'); + var note = $(e.target).closest('.note'); + note.find('.js-edit-warning').hide(); + note.find('.js-md-write-button').trigger('click'); + $('.note-edit-form').insertBefore('.notes-form'); return this.removeNoteEditForm(note); }; + Notes.prototype.removeNoteEditForm = function(note) { - var form; - form = note.find(".current-note-edit-form"); + var form = note.find(".current-note-edit-form"); note.removeClass("is-editting"); form.removeClass("current-note-edit-form"); // Replace markdown textarea text with original note text. diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 21d72791e81..4eb81473e2b 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -601,3 +601,12 @@ ul.notes { position: relative; } } + + +.note-edit-warning.settings-message { + display: none; + position: relative; + top: 1px; + left: 7px; + padding: 5px 10px; +} -- cgit v1.2.1 From 3e779f07b29aafcb8a143134723415fa8304ba5e Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Mon, 14 Nov 2016 23:12:51 +0300 Subject: Fix single comment edit form issues. --- app/assets/javascripts/notes.js | 42 ++++++++++++++++++++--------------------- 1 file changed, 20 insertions(+), 22 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 1f30368472d..1087fbe9c17 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -466,9 +466,7 @@ var $html, $note_li; // Convert returned HTML to a jQuery object so we can modify it further $html = $(note.html); - - $('.note-edit-form').insertBefore('.notes-form'); - + this.revertNoteEditForm(); gl.utils.localTimeAgo($('.js-timeago', $html)); $html.renderGFM(); $html.find('.js-task-list-container').taskList('enable'); @@ -528,28 +526,21 @@ } } - var note = $(e.target).closest('.note'); var $editForm = $('.note-edit-form'); - var $originalContentEl = note.find('.original-note-content'); + var $note = $(e.target).closest('.note'); + + $editForm.insertAfter($note.find('.note-text')); + + var $noteText = $editForm.find('.js-note-text'); + var $originalContentEl = $note.find('.original-note-content'); var originalContent = $originalContentEl.text().trim(); var postUrl = $originalContentEl.data('post-url'); - var form = note.find('.note-edit-form'); - var $noteText = form.find('.js-note-text'); - var noteTextVal = $noteText.val(); // Neat little trick to put the cursor at the end - - note.addClass('is-editting'); - $editForm.insertAfter(note.find('.note-text')); - $editForm.find('.js-note-text').val(originalContent); + $note.addClass('is-editting'); $editForm.find('form').attr('action', postUrl); - - form.addClass('current-note-edit-form'); - note.find('.js-note-attachment-delete').show(); // Show the attachment delete link - new GLForm(form); - - $noteText.focus(); - // Store the original note text in a data attribute to retrieve if a user cancels edit. - form.find('form.edit-note').data('original-note', noteTextVal); - $noteText.val('').val(noteTextVal); + $editForm.addClass('current-note-edit-form'); + $note.find('.js-note-attachment-delete').show(); // Show the attachment delete link + new GLForm($editForm.find('form')); + $editForm.find('.js-note-text').focus().val(originalContent); }; @@ -564,10 +555,17 @@ var note = $(e.target).closest('.note'); note.find('.js-edit-warning').hide(); note.find('.js-md-write-button').trigger('click'); - $('.note-edit-form').insertBefore('.notes-form'); + this.revertNoteEditForm(); return this.removeNoteEditForm(note); }; + Notes.prototype.revertNoteEditForm = function() { + var $editForm = $('.note-edit-form'); + + $editForm.insertBefore('.notes-form'); + $editForm.find('.js-comment-button').enable(); + } + Notes.prototype.removeNoteEditForm = function(note) { var form = note.find(".current-note-edit-form"); -- cgit v1.2.1 From 18165f97858f0ea12668bec9045998dee5212ecf Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 16 Nov 2016 00:32:55 +0300 Subject: Fix task list for single edit note widget changes. --- app/assets/javascripts/notes.js | 53 ++++++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 17 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 1087fbe9c17..8388b49e501 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -517,7 +517,11 @@ Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) { e.preventDefault(); + var $target = $(e.target); + var $editForm = $('.note-edit-form'); + var $note = $target.closest('.note'); var $currentlyEditing = $('.note.is-editting'); + if ($currentlyEditing.length) { var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing); @@ -526,21 +530,10 @@ } } - var $editForm = $('.note-edit-form'); - var $note = $(e.target).closest('.note'); - - $editForm.insertAfter($note.find('.note-text')); - - var $noteText = $editForm.find('.js-note-text'); - var $originalContentEl = $note.find('.original-note-content'); - var originalContent = $originalContentEl.text().trim(); - var postUrl = $originalContentEl.data('post-url'); - $note.addClass('is-editting'); - $editForm.find('form').attr('action', postUrl); - $editForm.addClass('current-note-edit-form'); $note.find('.js-note-attachment-delete').show(); // Show the attachment delete link - new GLForm($editForm.find('form')); - $editForm.find('.js-note-text').focus().val(originalContent); + $editForm.addClass('current-note-edit-form'); + $note.addClass('is-editting'); + this.putEditFormInPlace($target); }; @@ -865,15 +858,41 @@ Notes.prototype.initTaskList = function() { this.enableTaskList(); - return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList); + return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList.bind(this)); }; Notes.prototype.enableTaskList = function() { return $('.note .js-task-list-container').taskList('enable'); }; - Notes.prototype.updateTaskList = function() { - return $('form', this).submit(); + Notes.prototype.putEditFormInPlace = function($el) { + var $editForm = $('.note-edit-form'); + var $note = $el.closest('.note'); + + $editForm.insertAfter($note.find('.note-text')); + + var $originalContentEl = $note.find('.original-note-content'); + var originalContent = $originalContentEl.text().trim(); + var postUrl = $originalContentEl.data('post-url'); + var targetId = $originalContentEl.data('target-id'); + var targetType = $originalContentEl.data('target-type'); + + new GLForm($editForm.find('form')); + + $editForm.find('form').attr('action', postUrl); + $editForm.find('.formTargetId').val(targetId); + $editForm.find('.formTargetType').val(targetType); + $editForm.find('.js-note-text').focus().val(originalContent); + } + + Notes.prototype.updateTaskList = function(e) { + var $list = $(e.target).closest('.js-task-list-container'); + var $editForm = $('.note-edit-form'); + var $note = $list.closest('.note'); + + this.putEditFormInPlace($list); + $editForm.find('#note_note').val($note.find('.original-task-list').val()); + $('form', $list).submit(); }; Notes.prototype.updateNotesCount = function(updateCount) { -- cgit v1.2.1 From 2193ccec3d0cee689f7c62e4959a80589793af71 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 16 Nov 2016 22:18:01 +0300 Subject: Fix warning styling for responsive design. --- app/assets/javascripts/lib/utils/common_utils.js | 4 ++-- app/assets/stylesheets/pages/note_form.scss | 16 ++++++++++++++++ app/assets/stylesheets/pages/notes.scss | 17 ----------------- 3 files changed, 18 insertions(+), 19 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 06f85897f1a..7e8d97e27db 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -133,12 +133,12 @@ var rect = el.getBoundingClientRect(); var height = Math.max(document.documentElement.clientHeight, window.innerHeight); return !(rect.bottom - 110 < 0 || rect.top - height >= 0); // -110 for sticky GitLab navigation header - } + }; gl.utils.animateToElement = function($el) { return $('body, html').animate({ scrollTop: $el.offset().top - 110 }, 200); - } + }; }).call(this); diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e54e12be82f..1ef757147a2 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -27,6 +27,7 @@ .new-note, .note-edit-form { .note-form-actions { + position: relative; margin-top: $gl-padding; } @@ -265,3 +266,18 @@ } } } + +.note-edit-warning.settings-message { + display: none; + padding: 5px 10px; + position: absolute; + left: 127px; + top: 2px; + + @media (max-width: $screen-xs-max) { + position: relative; + top: 0; + left: 0; + margin-bottom: 10px; + } +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4eb81473e2b..3d111f6bfcb 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -586,23 +586,6 @@ ul.notes { } } -// Merge request notes in diffs -.diff-file { - - // Diff is side by side - .notes_content.parallel .note-header .note-headline-light { - display: block; - position: relative; - } - - // Diff is inline - .notes_content .note-header .note-headline-light { - display: inline-block; - position: relative; - } -} - - .note-edit-warning.settings-message { display: none; position: relative; -- cgit v1.2.1 From 0143573dd5f8d180b2824433a1ce5cdab42fe3d4 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 7 Dec 2016 01:11:09 +0300 Subject: Separate edit form in Changes and Discussions tab. if we are in the Merge Requests page, this change will clone existing note-edit-form and add a mr-discussion-edit-form class to cloned element so we will have two note-edit-form in place. One for Discussions tab one for Changes tab. For MR page, we basically need two note-edit-form because you may want to edit your comment in both tabs at the same time and we shouldn't remove or discard note-edit-form in other tab. --- app/assets/javascripts/lib/utils/common_utils.js | 5 +-- app/assets/javascripts/notes.js | 40 ++++++++++++++++++------ 2 files changed, 33 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 7e8d97e27db..31332cbe488 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -106,8 +106,9 @@ ); }; - gl.utils.getPagePath = function() { - return $('body').data('page').split(':')[0]; + gl.utils.getPagePath = function(index) { + index = index || 0; + return $('body').data('page').split(':')[index]; }; gl.utils.parseUrl = function (url) { diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 8388b49e501..15f4dc9399a 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -52,6 +52,12 @@ this.setupMainTargetNoteForm(); this.initTaskList(); this.collapseLongCommitList(); + + // We are in the Merge Requests page so we need another edit form for Changes tab + if (gl.utils.getPagePath(1) === 'merge_requests') { + $('.note-edit-form').clone() + .addClass('mr-discussion-edit-form').insertAfter('.note-edit-form'); + } } Notes.prototype.addBinding = function() { @@ -518,9 +524,9 @@ e.preventDefault(); var $target = $(e.target); - var $editForm = $('.note-edit-form'); + var $editForm = $(this.getEditFormSelector($target)); var $note = $target.closest('.note'); - var $currentlyEditing = $('.note.is-editting'); + var $currentlyEditing = $('.note.is-editting:visible'); if ($currentlyEditing.length) { var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing); @@ -545,20 +551,32 @@ Notes.prototype.cancelEdit = function(e) { e.preventDefault(); - var note = $(e.target).closest('.note'); + var $target = $(e.target); + var note = $target.closest('.note'); note.find('.js-edit-warning').hide(); note.find('.js-md-write-button').trigger('click'); - this.revertNoteEditForm(); + this.revertNoteEditForm($target); return this.removeNoteEditForm(note); }; - Notes.prototype.revertNoteEditForm = function() { - var $editForm = $('.note-edit-form'); + Notes.prototype.revertNoteEditForm = function($target) { + $target = $target || $('.note.is-editting:visible'); + var selector = this.getEditFormSelector($target); + var $editForm = $(selector); $editForm.insertBefore('.notes-form'); $editForm.find('.js-comment-button').enable(); - } + }; + Notes.prototype.getEditFormSelector = function($el) { + var selector = '.note-edit-form:not(.mr-discussion-edit-form)'; + + if ($el.parents('#diffs').length) { + selector = '.note-edit-form.mr-discussion-edit-form'; + } + + return selector; + }; Notes.prototype.removeNoteEditForm = function(note) { var form = note.find(".current-note-edit-form"); @@ -866,7 +884,8 @@ }; Notes.prototype.putEditFormInPlace = function($el) { - var $editForm = $('.note-edit-form'); + + var $editForm = $(this.getEditFormSelector($el)); var $note = $el.closest('.note'); $editForm.insertAfter($note.find('.note-text')); @@ -886,8 +905,9 @@ } Notes.prototype.updateTaskList = function(e) { - var $list = $(e.target).closest('.js-task-list-container'); - var $editForm = $('.note-edit-form'); + var $target = $(e.target); + var $list = $target.closest('.js-task-list-container'); + var $editForm = $(this.getEditFormSelector($target)); var $note = $list.closest('.note'); this.putEditFormInPlace($list); -- cgit v1.2.1 From 183a52f8e1454a0268993baca5b1a6793d9150f9 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Fri, 9 Dec 2016 00:49:32 +0300 Subject: Fix single note edit form specs. --- app/assets/javascripts/notes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 15f4dc9399a..31cb4549711 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -56,7 +56,7 @@ // We are in the Merge Requests page so we need another edit form for Changes tab if (gl.utils.getPagePath(1) === 'merge_requests') { $('.note-edit-form').clone() - .addClass('mr-discussion-edit-form').insertAfter('.note-edit-form'); + .addClass('mr-note-edit-form').insertAfter('.note-edit-form'); } } @@ -569,10 +569,10 @@ }; Notes.prototype.getEditFormSelector = function($el) { - var selector = '.note-edit-form:not(.mr-discussion-edit-form)'; + var selector = '.note-edit-form:not(.mr-note-edit-form)'; if ($el.parents('#diffs').length) { - selector = '.note-edit-form.mr-discussion-edit-form'; + selector = '.note-edit-form.mr-note-edit-form'; } return selector; -- cgit v1.2.1 From 509f0b1ac41254d010a1b94d05dbf0d2a75221d3 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 28 Dec 2016 21:28:20 +0300 Subject: Remove unnecessary styling came from merge conflicts. --- app/assets/stylesheets/pages/notes.scss | 8 -------- 1 file changed, 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 3d111f6bfcb..10a9df18c47 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -585,11 +585,3 @@ ul.notes { } } } - -.note-edit-warning.settings-message { - display: none; - position: relative; - top: 1px; - left: 7px; - padding: 5px 10px; -} -- cgit v1.2.1 From 32fe9ad24ecd14a64dcf308869e78c316f74aa3b Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 28 Dec 2016 21:33:19 +0300 Subject: Hide edit warning element when form reverted. --- app/assets/javascripts/notes.js | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 31cb4549711..ef545ae8ad2 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -566,6 +566,7 @@ $editForm.insertBefore('.notes-form'); $editForm.find('.js-comment-button').enable(); + $editForm.find('.js-edit-warning').hide(); }; Notes.prototype.getEditFormSelector = function($el) { -- cgit v1.2.1 From 9ae7e99a09ad1d9ea570279ce02cd232a55daf28 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Thu, 29 Dec 2016 19:19:11 +0300 Subject: Use gl.utils.isInViewport and improve gl.utils.animateToElement. --- app/assets/javascripts/lib/utils/common_utils.js | 23 +++++++++++------------ app/assets/javascripts/notes.js | 16 +++++++--------- app/assets/stylesheets/pages/notes.scss | 14 ++++++++++++++ 3 files changed, 32 insertions(+), 21 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 31332cbe488..7bf62cfd927 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -128,18 +128,17 @@ return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; }; - })(window); + gl.utils.animateToElement = function($el) { + var top = $el.offset().top; + gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height(); + gl.navLinksHieght = gl.navLinksHieght || $('.nav-links').height(); + gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height(); + + return $('body, html').animate({ + scrollTop: top - (gl.navBarHeight + gl.navLinksHieght + gl.mrTabsHeight) + }, 200); + }; - gl.utils.isElementVisibleInViewport = function(el) { - var rect = el.getBoundingClientRect(); - var height = Math.max(document.documentElement.clientHeight, window.innerHeight); - return !(rect.bottom - 110 < 0 || rect.top - height >= 0); // -110 for sticky GitLab navigation header - }; - - gl.utils.animateToElement = function($el) { - return $('body, html').animate({ - scrollTop: $el.offset().top - 110 - }, 200); - }; + })(window); }).call(this); diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index ef545ae8ad2..8400d615818 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -498,10 +498,9 @@ } else { var $buttons = $el.find('.note-form-actions'); - var isButtonsVisible = gl.utils.isElementVisibleInViewport($buttons[0]); - var isWidgetVisible = gl.utils.isElementVisibleInViewport($el[0]); + var isWidgetVisible = gl.utils.isInViewport($el[0]); - if (!isButtonsVisible || !isWidgetVisible) { + if (!isWidgetVisible) { gl.utils.animateToElement($el); } @@ -536,7 +535,7 @@ } } - $note.find('.js-note-attachment-delete').show(); // Show the attachment delete link + $note.find('.js-note-attachment-delete').show(); $editForm.addClass('current-note-edit-form'); $note.addClass('is-editting'); this.putEditFormInPlace($target); @@ -580,11 +579,11 @@ }; Notes.prototype.removeNoteEditForm = function(note) { - var form = note.find(".current-note-edit-form"); - note.removeClass("is-editting"); - form.removeClass("current-note-edit-form"); + var form = note.find('.current-note-edit-form'); + note.removeClass('is-editting'); + form.removeClass('current-note-edit-form'); // Replace markdown textarea text with original note text. - return form.find(".js-note-text").val(form.find('form.edit-note').data('original-note')); + return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note')); }; @@ -885,7 +884,6 @@ }; Notes.prototype.putEditFormInPlace = function($el) { - var $editForm = $(this.getEditFormSelector($el)); var $note = $el.closest('.note'); diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 10a9df18c47..43fab67ad75 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -585,3 +585,17 @@ ul.notes { } } } + +// Merge request notes in diffs +.diff-file { + // Diff is side by side + .notes_content.parallel .note-header .note-headline-light { + display: block; + position: relative; + } + // Diff is inline + .notes_content .note-header .note-headline-light { + display: inline-block; + position: relative; + } +} -- cgit v1.2.1 From 09fc4f557b4967e2c40ec17da07d17b3a637b0d5 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Mon, 2 Jan 2017 20:14:43 +0300 Subject: Review fixes. --- app/assets/javascripts/gl_form.js | 2 +- app/assets/javascripts/lib/utils/common_utils.js | 4 ++-- app/assets/javascripts/notes.js | 11 +++++------ 3 files changed, 8 insertions(+), 9 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js index 7dc2d13e5d8..04814fa0843 100644 --- a/app/assets/javascripts/gl_form.js +++ b/app/assets/javascripts/gl_form.js @@ -35,8 +35,8 @@ autosize(this.textarea); // form and textarea event listeners this.addEventListeners(); - gl.text.init(this.form); } + gl.text.init(this.form); // hide discard button this.form.find('.js-note-discard').hide(); return this.form.show(); diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 7bf62cfd927..54f2e7ad7d7 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -131,11 +131,11 @@ gl.utils.animateToElement = function($el) { var top = $el.offset().top; gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height(); - gl.navLinksHieght = gl.navLinksHieght || $('.nav-links').height(); + gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height(); gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height(); return $('body, html').animate({ - scrollTop: top - (gl.navBarHeight + gl.navLinksHieght + gl.mrTabsHeight) + scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight) }, 200); }; diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 8400d615818..8cdc623c83b 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -494,18 +494,16 @@ if (currentContent === initialContent) { this.removeNoteEditForm($el); - $el.find('.js-md-write-button').trigger('click'); } else { var $buttons = $el.find('.note-form-actions'); - var isWidgetVisible = gl.utils.isInViewport($el[0]); + var isWidgetVisible = gl.utils.isInViewport($el.get(0)); if (!isWidgetVisible) { gl.utils.animateToElement($el); } $el.find('.js-edit-warning').show(); - $el.find('.js-md-write-button').trigger('click'); isAllowed = false; } @@ -553,7 +551,6 @@ var $target = $(e.target); var note = $target.closest('.note'); note.find('.js-edit-warning').hide(); - note.find('.js-md-write-button').trigger('click'); this.revertNoteEditForm($target); return this.removeNoteEditForm(note); }; @@ -566,6 +563,7 @@ $editForm.insertBefore('.notes-form'); $editForm.find('.js-comment-button').enable(); $editForm.find('.js-edit-warning').hide(); + $editForm.find('.js-md-write-button').trigger('click'); }; Notes.prototype.getEditFormSelector = function($el) { @@ -582,6 +580,7 @@ var form = note.find('.current-note-edit-form'); note.removeClass('is-editting'); form.removeClass('current-note-edit-form'); + form.find('.js-edit-warning').hide(); // Replace markdown textarea text with original note text. return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note')); }; @@ -898,8 +897,8 @@ new GLForm($editForm.find('form')); $editForm.find('form').attr('action', postUrl); - $editForm.find('.formTargetId').val(targetId); - $editForm.find('.formTargetType').val(targetType); + $editForm.find('.js-form-target-id').val(targetId); + $editForm.find('.js-form-target-type').val(targetType); $editForm.find('.js-note-text').focus().val(originalContent); } -- cgit v1.2.1 From ae5dc479e7fdabe61900b2763500cc6c6551e2c7 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 4 Jan 2017 13:41:18 -0700 Subject: fix pagination UI --- app/assets/javascripts/vue_pagination/index.js.es6 | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 7df15f9d4af..d5f276e3b59 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -98,9 +98,9 @@ if (page > 1) items.push({ title: FIRST }); if (page > 1) { - items.push({ title: PREV }); + items.push({ title: PREV, prev: true }); } else { - items.push({ title: PREV, disabled: true }); + items.push({ title: PREV, disabled: true, prev: true }); } if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true }); @@ -110,29 +110,32 @@ for (let i = start; i <= end; i++) { const isActive = i === page; - items.push({ title: i, active: isActive }); + items.push({ title: i, active: isActive, page: true }); } if (total - page > PAGINATION_UI_BUTTON_LIMIT) { - items.push({ title: SPREAD, separator: true }); + items.push({ title: SPREAD, separator: true, page: true }); } if (page === total) { - items.push({ title: NEXT, disabled: true }); + items.push({ title: NEXT, disabled: true, next: true }); } else if (total - page >= 1) { - items.push({ title: NEXT }); + items.push({ title: NEXT, next: true }); } - if (total - page >= 1) items.push({ title: LAST }); + if (total - page >= 1) items.push({ title: LAST, last: true }); return items; }, }, template: `
        -
          -
        • li { @include transition(background-color, border-color); diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 689de841cbd..91073a7093b 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -106,10 +106,6 @@ .color-label { padding: 3px 7px; border-radius: $label-border-radius; - - &:hover { - box-shadow: inset 0 0 0 80px $label-remove-border; - } } .dropdown-labels-error { -- cgit v1.2.1 From 36412ee2c23015927fd7980df4997ec46c0b81c3 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Thu, 5 Jan 2017 00:44:00 +0300 Subject: Fix review comments. --- app/assets/javascripts/lib/utils/common_utils.js | 2 +- app/assets/javascripts/notes.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 54f2e7ad7d7..31a71379af3 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -128,7 +128,7 @@ return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; }; - gl.utils.animateToElement = function($el) { + gl.utils.scrollToElement = function($el) { var top = $el.offset().top; gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height(); gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height(); diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 8cdc623c83b..8de5a6191b6 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -500,7 +500,7 @@ var isWidgetVisible = gl.utils.isInViewport($el.get(0)); if (!isWidgetVisible) { - gl.utils.animateToElement($el); + gl.utils.scrollToElement($el); } $el.find('.js-edit-warning').show(); @@ -563,7 +563,6 @@ $editForm.insertBefore('.notes-form'); $editForm.find('.js-comment-button').enable(); $editForm.find('.js-edit-warning').hide(); - $editForm.find('.js-md-write-button').trigger('click'); }; Notes.prototype.getEditFormSelector = function($el) { @@ -900,6 +899,8 @@ $editForm.find('.js-form-target-id').val(targetId); $editForm.find('.js-form-target-type').val(targetType); $editForm.find('.js-note-text').focus().val(originalContent); + $editForm.find('.js-md-write-button').trigger('click'); + $editForm.find('.referenced-users').hide(); } Notes.prototype.updateTaskList = function(e) { -- cgit v1.2.1 From 03171bbf20cc40f1b2cdc6f3a6fde35230f920d2 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 4 Jan 2017 22:44:02 +0100 Subject: fixed bell transition animation --- app/assets/stylesheets/framework/animations.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index ce8124d0a13..3ff76e248b4 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -107,7 +107,7 @@ .note-action-button .link-highlight, .toolbar-btn, .dropdown-toggle-caret, -.fa { +.fa:not(.fa-bell) { @include transition(color); } -- cgit v1.2.1 From f4772b37c9fbccb72d1956e308313a8bb1dc8342 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 4 Jan 2017 15:44:16 -0600 Subject: Change CI template linter textarea with Ace Editor --- app/assets/javascripts/ci_lint_editor.js.es6 | 18 ++++++++++++++++++ app/assets/javascripts/dispatcher.js.es6 | 4 ++++ app/assets/stylesheets/pages/lint.scss | 10 ++++++++++ 3 files changed, 32 insertions(+) create mode 100644 app/assets/javascripts/ci_lint_editor.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/ci_lint_editor.js.es6 b/app/assets/javascripts/ci_lint_editor.js.es6 new file mode 100644 index 00000000000..56ffaa765a8 --- /dev/null +++ b/app/assets/javascripts/ci_lint_editor.js.es6 @@ -0,0 +1,18 @@ +(() => { + window.gl = window.gl || {}; + + class CILintEditor { + constructor() { + this.editor = window.ace.edit('ci-editor'); + this.textarea = document.querySelector('#content'); + + this.editor.getSession().setMode('ace/mode/yaml'); + this.editor.on('input', () => { + const content = this.editor.getSession().getValue(); + this.textarea.value = content; + }); + } + } + + gl.CILintEditor = CILintEditor; +})(); diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 1c1b6cd2dad..3c0dbb761c8 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -275,6 +275,10 @@ case 'projects:variables:index': new gl.ProjectVariables(); break; + case 'ci:lints:create': + case 'ci:lints:show': + new gl.CILintEditor(); + break; } switch (path.first()) { case 'admin': diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss index a7c80dce424..68b6c5ecbd4 100644 --- a/app/assets/stylesheets/pages/lint.scss +++ b/app/assets/stylesheets/pages/lint.scss @@ -9,3 +9,13 @@ color: $lint-correct-color; } } + +.ci-linter { + .ci-editor { + height: 400px; + } + + .ci-template pre { + white-space: pre-wrap; + } +} -- cgit v1.2.1 From ce8eb711fc9593230816f79adc5c91438224104f Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 5 Jan 2017 00:38:54 +0100 Subject: made avatar border color really subtle and not distracting, plus doesn't act on not links anymore --- app/assets/stylesheets/framework/avatar.scss | 8 ++++---- app/assets/stylesheets/pages/issuable.scss | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 905a61aaee9..8392b98f0a7 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -24,10 +24,6 @@ &.s110 { @include avatar-size(110px, 15px); } &.s140 { @include avatar-size(140px, 15px); } &.s160 { @include avatar-size(160px, 20px); } - - &:hover { - border-color: $gl-link-color; - } } .avatar { @@ -56,6 +52,10 @@ border-radius: 0; border: none; } + + &:not([href]):hover { + border-color: rgba($avatar-border, .2); + } } .identicon { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index bc4ac8d2eb4..7b1016ba521 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -99,8 +99,8 @@ .edit-link { color: $gl-gray; - &:hover { - color: $md-link-color; + &:not([href]):hover { + color: rgba($avatar-border, .2); } } } @@ -279,7 +279,7 @@ text-decoration: none; .avatar { - border-color: $md-link-color; + border-color: rgba($avatar-border, .2); } } } -- cgit v1.2.1 From c1daa7d177eef223cb54c4185343f0fb9a1c04e2 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 5 Jan 2017 00:51:09 +0100 Subject: added the same to .header-user-avatar to make it consistent --- app/assets/stylesheets/framework/animations.scss | 3 ++- app/assets/stylesheets/framework/header.scss | 9 +++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 3ff76e248b4..8d38fc78a19 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -100,7 +100,8 @@ } .dropdown-menu-toggle, -.avatar-circle { +.avatar-circle, +.header-user-avatar { @include transition(border-color); } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 09e7db80914..2ff020ab357 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -57,6 +57,14 @@ header { &.header-user-dropdown-toggle { margin-left: 14px; + + &:hover, + &:focus, + &:active { + .header-user-avatar { + border-color: rgba($avatar-border, .2); + } + } } &:hover, @@ -273,4 +281,5 @@ header { float: left; margin-right: 5px; border-radius: 50%; + border: 1px solid $avatar-border; } -- cgit v1.2.1 From 97ecf20ca196ae362437fc37d136b3b293957d5c Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 5 Jan 2017 01:27:52 +0100 Subject: Decreases font-size on login page --- app/assets/stylesheets/pages/login.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 712bd3da22f..71ed5b1361a 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -17,14 +17,19 @@ line-height: 1.5; p { - font-size: 18px; + font-size: 16px; color: $login-brand-holder-color; } h1:first-child { font-weight: normal; - margin-bottom: 30px; + margin-bottom: 0.68em; margin-top: 0; + font-size: 34px; + } + + h3 { + font-size: 22px; } img { -- cgit v1.2.1 From 5ce4883da07c939cc97ef4965aeb6e07adb688be Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Wed, 4 Jan 2017 13:51:40 -0600 Subject: Fixed a test and change the arrow functions to named functions --- app/assets/javascripts/member_expiration_date.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/member_expiration_date.js.es6 b/app/assets/javascripts/member_expiration_date.js.es6 index c9c548a490e..bf6c0ec2798 100644 --- a/app/assets/javascripts/member_expiration_date.js.es6 +++ b/app/assets/javascripts/member_expiration_date.js.es6 @@ -14,13 +14,13 @@ inputs.datepicker({ dateFormat: 'yy-mm-dd', minDate: 1, - onSelect: () => { + onSelect: function onSelect() { $(this).trigger('change'); toggleClearInput.call(this); }, }); - inputs.next('.js-clear-input').on('click', (event) => { + inputs.next('.js-clear-input').on('click', function clicked(event) { event.preventDefault(); const input = $(this).closest('.clearable-input').find(selector); -- cgit v1.2.1 From 61db9e2fa83508fdbe1288b074d3732ef9bbd765 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 5 Jan 2017 10:07:34 +0000 Subject: Removes unneeded `window` declaration --- .../environments/components/environment.js.es6 | 4 ++-- .../environments/components/environment_actions.js.es6 | 2 +- .../components/environment_external_url.js.es6 | 2 +- .../environments/components/environment_item.js.es6 | 18 +++++++++--------- .../components/environment_rollback.js.es6 | 2 +- .../environments/components/environment_stop.js.es6 | 2 +- .../components/environment_terminal_button.js.es6 | 2 +- .../environments/environments_bundle.js.es6 | 10 ++++++---- .../environments/stores/environments_store.js.es6 | 2 +- 9 files changed, 23 insertions(+), 21 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index facd653fd72..6b7fb9215d1 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -45,7 +45,7 @@ return fn(item); }).filter(Boolean); - window.gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', { + gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', { props: { store: { type: Object, @@ -55,7 +55,7 @@ }, components: { - 'environment-item': window.gl.environmentsList.EnvironmentItem, + 'environment-item': gl.environmentsList.EnvironmentItem, }, data() { diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6 index 7c743705d51..81468f4d3bc 100644 --- a/app/assets/javascripts/environments/components/environment_actions.js.es6 +++ b/app/assets/javascripts/environments/components/environment_actions.js.es6 @@ -5,7 +5,7 @@ window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - window.gl.environmentsList.ActionsComponent = Vue.component('actions-component', { + gl.environmentsList.ActionsComponent = Vue.component('actions-component', { props: { actions: { type: Array, diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6 index aed65b33c04..6592c1b5f0f 100644 --- a/app/assets/javascripts/environments/components/environment_external_url.js.es6 +++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6 @@ -5,7 +5,7 @@ window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - window.gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', { + gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', { props: { externalUrl: { type: String, diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index b26a40aa268..d9a78c592b0 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -23,18 +23,18 @@ */ window.gl = window.gl || {}; - window.gl.environmentsList = window.gl.environmentsList || {}; - window.gl.environmentsList.timeagoInstance = new timeago(); // eslint-disable-line + gl.environmentsList = window.gl.environmentsList || {}; + gl.environmentsList.timeagoInstance = new timeago(); // eslint-disable-line gl.environmentsList.EnvironmentItem = Vue.component('environment-item', { components: { - 'commit-component': window.gl.CommitComponent, - 'actions-component': window.gl.environmentsList.ActionsComponent, - 'external-url-component': window.gl.environmentsList.ExternalUrlComponent, - 'stop-component': window.gl.environmentsList.StopComponent, - 'rollback-component': window.gl.environmentsList.RollbackComponent, - 'terminal-button-component': window.gl.environmentsList.TerminalButtonComponent, + 'commit-component': gl.CommitComponent, + 'actions-component': gl.environmentsList.ActionsComponent, + 'external-url-component': gl.environmentsList.ExternalUrlComponent, + 'stop-component': gl.environmentsList.StopComponent, + 'rollback-component': gl.environmentsList.RollbackComponent, + 'terminal-button-component': gl.environmentsList.TerminalButtonComponent, }, props: { @@ -183,7 +183,7 @@ * @returns {String} */ createdDate() { - return window.gl.environmentsList.timeagoInstance.format( + return gl.environmentsList.timeagoInstance.format( this.model.last_deployment.deployable.created_at, ); }, diff --git a/app/assets/javascripts/environments/components/environment_rollback.js.es6 b/app/assets/javascripts/environments/components/environment_rollback.js.es6 index 6d4e8fad604..b52298b4a88 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.js.es6 +++ b/app/assets/javascripts/environments/components/environment_rollback.js.es6 @@ -5,7 +5,7 @@ window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - window.gl.environmentsList.RollbackComponent = Vue.component('rollback-component', { + gl.environmentsList.RollbackComponent = Vue.component('rollback-component', { props: { retryUrl: { type: String, diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6 index 7292f924e5c..0a29f2f36e9 100644 --- a/app/assets/javascripts/environments/components/environment_stop.js.es6 +++ b/app/assets/javascripts/environments/components/environment_stop.js.es6 @@ -5,7 +5,7 @@ window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - window.gl.environmentsList.StopComponent = Vue.component('stop-component', { + gl.environmentsList.StopComponent = Vue.component('stop-component', { props: { stopUrl: { type: String, diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 index 25e6ac7f3c9..050184ba497 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 +++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 @@ -5,7 +5,7 @@ window.gl = window.gl || {}; window.gl.environmentsList = window.gl.environmentsList || {}; - window.gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', { + gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', { props: { terminalPath: { type: String, diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6 index 20eee7976ec..9f24a6a4f88 100644 --- a/app/assets/javascripts/environments/environments_bundle.js.es6 +++ b/app/assets/javascripts/environments/environments_bundle.js.es6 @@ -7,15 +7,17 @@ $(() => { window.gl = window.gl || {}; - if (window.gl.EnvironmentsListApp) { - window.gl.EnvironmentsListApp.$destroy(true); + if (gl.EnvironmentsListApp) { + gl.EnvironmentsListApp.$destroy(true); } - const Store = window.gl.environmentsList.EnvironmentsStore; + const Store = gl.environmentsList.EnvironmentsStore; - window.gl.EnvironmentsListApp = new window.gl.environmentsList.EnvironmentsComponent({ + gl.EnvironmentsListApp = new gl.environmentsList.EnvironmentsComponent({ el: document.querySelector('#environments-list-view'), + propsData: { store: Store.create(), }, + }); }); diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index 0204a903ab5..97d65521a96 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ (() => { window.gl = window.gl || {}; - window.gl.environmentsList = window.gl.environmentsList || {}; + gl.environmentsList = window.gl.environmentsList || {}; gl.environmentsList.EnvironmentsStore = { state: {}, -- cgit v1.2.1 From e92846ca0fbae306ee641b39d9cfa2cb1d61a518 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 5 Jan 2017 10:10:22 +0000 Subject: Adds CHANGELOG entry --- .../javascripts/environments/components/environment_item.js.es6 | 4 ++-- app/assets/javascripts/environments/stores/environments_store.js.es6 | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index d9a78c592b0..0e6bc3fdb2c 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -23,8 +23,8 @@ */ window.gl = window.gl || {}; - gl.environmentsList = window.gl.environmentsList || {}; - gl.environmentsList.timeagoInstance = new timeago(); // eslint-disable-line + window.gl.environmentsList = window.gl.environmentsList || {}; + window.gl.environmentsList.timeagoInstance = new timeago(); // eslint-disable-line gl.environmentsList.EnvironmentItem = Vue.component('environment-item', { diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6 index 97d65521a96..0204a903ab5 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js.es6 +++ b/app/assets/javascripts/environments/stores/environments_store.js.es6 @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ (() => { window.gl = window.gl || {}; - gl.environmentsList = window.gl.environmentsList || {}; + window.gl.environmentsList = window.gl.environmentsList || {}; gl.environmentsList.EnvironmentsStore = { state: {}, -- cgit v1.2.1 From b16fbd69f52519d7962503b6d45987f63f60a02f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 5 Jan 2017 11:27:18 +0000 Subject: Fixed issue card not scrolling to correct position --- app/assets/javascripts/boards/components/board.js.es6 | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index f985898a3d9..d0c5d9702d5 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -46,8 +46,14 @@ if (issue) { const boardsList = document.querySelectorAll('.boards-list')[0]; - const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth; const left = boardsList.scrollLeft - this.$el.offsetLeft; + let right = (this.$el.offsetLeft + this.$el.offsetWidth); + + if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) { + right -= (boardsList.offsetWidth - 290); + } else { + right -= boardsList.offsetWidth; + } if (right - boardsList.scrollLeft > 0) { $(boardsList).animate({ -- cgit v1.2.1 From 043cc8196e41a3b44301f1ae093bb5cd6b4ebc82 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 4 Jan 2017 11:48:48 +0000 Subject: Simplify HTML of mini pipeline graph and dropdown Creates individual html for dropdown Adds simplified CSS for the new dropdown Removes old CSS Improves dropdown item in Chrome, Firefox and Safari Use SCSS variables for colors. Fix scss linter errors Adds animation when the stage is hovered. Adds back tooltip on dropdown toggle Fixes broken tests additional css changes to get more into direction of mockups --- app/assets/stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/pipelines.scss | 468 ++++++++++++------------ 2 files changed, 225 insertions(+), 244 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 6595010d221..3e52c482ece 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -525,3 +525,4 @@ Pipeline Graph */ $stage-hover-bg: #eaf3fc; $stage-hover-border: #d1e7fc; +$action-icon-color: #d6d6d6; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1e4f242d40d..6061e53f386 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -177,12 +177,13 @@ .stage-cell { font-size: 0; - svg { - height: 18px; - width: 18px; - position: relative; + > .stage-container > button > svg { + height: 22px; + width: 22px; + position: absolute; + top: -1px; + left: -1px; z-index: 2; - vertical-align: middle; overflow: visible; } @@ -200,7 +201,7 @@ content: ''; width: 8px; position: absolute; - right: -7px; + right: -8px; top: 10px; border-bottom: 2px solid $border-color; } @@ -470,6 +471,47 @@ white-space: normal; color: $gl-text-color-secondary; + // Action Icons in big pipeline-graph nodes + > .ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; + } + + &:hover { + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; + } + } + + .ci-play-icon { + padding: 5px 5px 5px 7px; + } + } + + > .ci-action-icon-container { + position: absolute; + right: 5px; + top: 5px; + } + + .ci-status-icon svg { + height: 20px; + width: 20px; + } + .dropdown-menu-toggle { background-color: transparent; border: none; @@ -504,16 +546,6 @@ } } - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } - - .ci-status-icon svg { - height: 20px; - width: 20px; - } .arrow { &::before, @@ -596,29 +628,9 @@ } } } - - .grouped-pipeline-dropdown { - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } - - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - top: 1px; - right: 8px; - } - } - } } +// Triggers the dropdown in the big pipeline graph .dropdown-counter-badge { color: $border-color; font-weight: 100; @@ -628,7 +640,8 @@ top: 8px; } -.grouped-pipeline-dropdown { +// Dropdown in the big pipeline graph +.big-pipeline-graph-dropdown-menu { padding: 0; width: 195px; min-width: 195px; @@ -636,56 +649,6 @@ right: -195px; top: -4px; box-shadow: 0 1px 5px $black-transparent; - - a { - display: inline-block; - } - - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } - - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - margin-top: 3px; - right: 7px; - } - } - - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; - - li { - margin: 4px 8px 4px 9px; - padding: 0; - line-height: 1.1; - position: relative; - - .ci-action-icon-container:hover { - background-color: transparent; - } - - .ci-status-icon { - position: relative; - top: 2px; - } - } - } -} - -.pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; } .ci-status-text { @@ -699,177 +662,217 @@ font-weight: 200; } -// Action Icons -.ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } - - &:hover { - color: $gl-text-color; - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; - } - } +// Dropdown button in mini pipeline graph +.mini-pipeline-graph-dropdown-toggle { + border-radius: 100px; + background-color: $white-light; + border-width: 1px; + border-style: solid; + width: 22px; + height: 22px; + margin: 0; + padding: 0; + transition: all 0.2s linear; + position: relative; - .ci-play-icon { - padding: 5px 5px 5px 7px; + > .fa.fa-caret-down { + position: absolute; + left: 20px; + top: 5px; + display: inline-block; + visibility: hidden; + opacity: 0; + color: inherit; + font-size: 12px; + transition: visibility 0.1s, opacity 0.1s linear; } -} -.dropdown-build { - color: $gl-text-color-secondary; + &:active, + &:focus, + &:hover { + outline: none; + width: 35px; - .build-content { - padding: 4px 7px 8px; + .fa.fa-caret-down { + visibility: visible; + opacity: 1; + } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; - position: relative; + // Dropdown button animation in mini pipeline graph + &.ci-status-icon-success { + border-color: $gl-success; + color: $gl-success; - i { - font-size: 11px; - margin-top: 0; + &:hover, + &:focus, + &:active { + background-color: rgba($gl-success, 0.1); + border-color: $gl-success; } } - .ci-action-icon-container { - i { - width: 24px; - height: 24px; + &.ci-status-icon-failed { + border-color: $gl-danger; + color: $gl-danger; - &::before { - top: 1px; - left: 1px; - } + &:hover, + &:focus, + &:active { + background-color: rgba($gl-danger, 0.1); + border-color: $gl-danger; } } - .stage { - max-width: 100px; - width: 100px; - } - - .ci-status-icon svg { - height: 18px; - width: 18px; - } + &.ci-status-icon-pending, + &.ci-status-icon-success_with_warnings { + border-color: $gl-warning; + color: $gl-warning; - .ci-status-text { - max-width: 95px; + &:hover, + &:focus, + &:active { + background-color: rgba($gl-warning, 0.1); + border-color: $gl-warning; + } } -} -/** - * Builds dropdown in mini pipeline - */ -.mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-secondary; - border: none; - margin: 0; + &.ci-status-icon-running { + border-color: $blue-normal; + color: $blue-normal; + &:hover, &:focus, - &:hover { - outline: none; - margin-right: -8px; - - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); - - + .dropdown-caret { - visibility: visible; - opacity: 1; - } - } + &:active { + background-color: rgba($blue-normal, 0.1); + border-color: $blue-normal; } + } + + &.ci-status-icon-canceled, + &.ci-status-icon-disabled, + &.ci-status-icon-not-found, + &.ci-status-icon-manual { + border-color: $gl-text-color; + color: $gl-text-color; + &:hover, &:focus, &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); - } - - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); - } - - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } - - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + background-color: rgba($gl-text-color, 0.1); + border-color: $gl-text-color; + } + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-text-color, .1); - } + &.ci-status-icon-created, + &.ci-status-icon-skipped { + border-color: $gray-darkest; + color: $gray-darkest; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); - } + &:hover, + &:focus, + &:active { + background-color: rgba($gray-darkest, 0.1); + border-color: $gray-darkest; } + } +} - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; - position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; - } - } +// dropdown content for big and mini pipeline +.big-pipeline-graph-dropdown-menu, +.mini-pipeline-graph-dropdown-menu { + width: 195px; + max-width: 195px; + + li { + padding: 2px 3px; } - .dropdown-build .build-content { - padding: 3px 7px 7px; + .scrollable-menu { + max-height: 245px; + overflow: auto; } + // Loading icon .builds-dropdown-loading { - margin: 10px auto; - width: 18px; + margin: 0 auto; + width: 20px; + } + + // Action icon on the right + a.ci-action-icon-wrapper { + color: $action-icon-color; + border: 1px solid $action-icon-color; + border-radius: 20px; + width: 22px; + height: 22px; + padding: 2px 0 0 5px; + cursor: pointer; + float: right; + margin: -26px 9px 0 0; + font-size: 12px; + background-color: $white-light; + + &:hover, + &:focus { + text-decoration: none; + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid transparent; + } } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + // link to the build + .mini-pipeline-graph-dropdown-item { + padding: 3px 7px 4px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + white-space: nowrap; + margin: 0 5px; + border-radius: 3px; - a { + // build name + .ci-build-text { + font-weight: 200; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 90px; color: $gl-text-color-secondary; + margin-left: 2px; + display: inline-block; + top: 1px; + vertical-align: text-bottom; + position: relative; + } + + // status icon on the left + .ci-status-icon { + top: 3px; + position: relative; + + > svg { + overflow: visible; + width: 18px; + height: 18px; + } + } + + &:hover, + &:focus { + outline: none; + text-decoration: none; + color: $gl-text-color; + background-color: $stage-hover-bg; } } +} +/** + * Top arrow in the dropdown in the mini pipeline graph + */ +.mini-pipeline-graph-dropdown-menu { .arrow-up { &::before, &::after { @@ -898,31 +901,8 @@ } /** - * Icons in mini pipeline graph + * Terminal */ -.mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - - svg { - top: -1px; - left: -1px; - } -} - -.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; -} - - .terminal-icon { margin-left: 3px; } -- cgit v1.2.1 From 5ab5c7552f1c73e06b565e4185d4b38315ed3f18 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 5 Jan 2017 10:47:49 -0600 Subject: Fix dropdown icon alignment --- app/assets/stylesheets/pages/pipelines.scss | 30 +++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 6061e53f386..ed53ad94021 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -339,7 +339,8 @@ white-space: nowrap; transition: max-height 0.3s, padding 0.3s; - ul { + .stage-column-list, + .builds-container > ul { padding: 0; } @@ -640,17 +641,6 @@ top: 8px; } -// Dropdown in the big pipeline graph -.big-pipeline-graph-dropdown-menu { - padding: 0; - width: 195px; - min-width: 195px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; -} - .ci-status-text { max-width: 110px; white-space: nowrap; @@ -869,6 +859,22 @@ } } +// Dropdown in the big pipeline graph +.big-pipeline-graph-dropdown-menu { + width: 195px; + min-width: 195px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + .mini-pipeline-graph-dropdown-item { + .ci-status-icon { + top: -1px; + } + } +} + /** * Top arrow in the dropdown in the mini pipeline graph */ -- cgit v1.2.1 From c71a88a7258fe25d77e6e4ef2745fa5a71fef908 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 5 Jan 2017 19:00:15 +0000 Subject: Simplifies the HTML strucutre in the mini pipeline graph to make it as similar as the one in haml as possible --- .../javascripts/vue_pipelines_index/stage.js.es6 | 44 +++++++--------------- .../javascripts/vue_pipelines_index/stages.js.es6 | 2 +- app/assets/stylesheets/pages/pipelines.scss | 1 + 3 files changed, 16 insertions(+), 31 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 23e70197432..3133a3896f2 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -47,46 +47,30 @@ const stageIcon = icon.replace(/icon/i, 'stage_icon'); return this.svgs[this.match(stageIcon)]; }, - spanClass() { - return `ci-status-icon ci-status-icon-${this.stage.status.group}`; + triggerButtonClass() { + return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`; }, }, template: ` -
          - +
          + type="button"> + + + -
          -
          -
          -
          -
          -
          -
          + +
            +
            +
            +
          `, }); diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 index a3b2700adfa..cb176b3f0c6 100644 --- a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6 @@ -10,7 +10,7 @@ template: `
          diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8f615905853..8861315d776 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -186,6 +186,7 @@ .stage-cell { font-size: 0; + > .stage-container > div > button > span > svg, > .stage-container > button > svg { height: 22px; width: 22px; -- cgit v1.2.1 From fc026c8a179620889b0c686ae28264f4f3649e6d Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Thu, 5 Jan 2017 22:31:36 +0100 Subject: Remove invalid pipeline status icon name --- app/assets/stylesheets/framework/icons.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 4826561dffe..dccf5177e35 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -1,5 +1,4 @@ -.ci-status-icon-success, -.ci-status-icon-passed { +.ci-status-icon-success { color: $gl-success; svg { -- cgit v1.2.1 From 0ff564347c00b277f494947c8cd6803aa547c68a Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 5 Jan 2017 15:07:13 -0600 Subject: Keep max width on MR content on side by side view --- app/assets/stylesheets/pages/issuable.scss | 49 ++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 0a8c037c402..3272a862b85 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,3 +1,52 @@ +// Limit MR description for side-by-side diff view +.fixed-width-container { + max-width: $limited-layout-width - ($gl-padding * 2); + margin-left: auto; + margin-right: auto; +} + +.limit-container-width { + .detail-page-header { + @extend .fixed-width-container; + } + + .issuable-details { + .detail-page-description, + .mr-source-target, + .mr-state-widget, + .merge-manually { + @extend .fixed-width-container; + } + + .merge-request-tabs-holder { + &.affix { + border-bottom: 1px solid $border-color; + + .nav-links { + border: 0; + } + } + + .container-fluid { + @extend .fixed-width-container; + } + } + } + + .merge-request-details { + .emoji-list-container { + @extend .fixed-width-container; + } + } + + .diffs { + .mr-version-controls, + .files-changed { + @extend .fixed-width-container; + } + } +} + .issuable-details { section { .issuable-discussion { -- cgit v1.2.1 From cb537324a38f6680741f2da8c074ff7220e75a4f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 6 Jan 2017 10:33:06 +0000 Subject: Fixed edit form authenticity_token call failing the tests --- app/assets/javascripts/notes.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 8de5a6191b6..603db88567d 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -895,7 +895,9 @@ new GLForm($editForm.find('form')); - $editForm.find('form').attr('action', postUrl); + $editForm.find('form') + .attr('action', postUrl) + .attr('data-remote', 'true'); $editForm.find('.js-form-target-id').val(targetId); $editForm.find('.js-form-target-type').val(targetType); $editForm.find('.js-note-text').focus().val(originalContent); -- cgit v1.2.1 From 36fa45e7f6c6b70560e59ad62e330fa6f16ed05b Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 6 Jan 2017 10:52:00 +0000 Subject: Added note about width of sidebar Changed CSS transition property for only values that change --- app/assets/javascripts/boards/components/board.js.es6 | 18 +++++++++++------- app/assets/stylesheets/pages/boards.scss | 3 ++- 2 files changed, 13 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index d0c5d9702d5..8d1a0f482f9 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -45,11 +45,15 @@ const issue = this.list.findIssue(this.detailIssue.issue.id); if (issue) { + const offsetLeft = this.$el.offsetLeft; const boardsList = document.querySelectorAll('.boards-list')[0]; - const left = boardsList.scrollLeft - this.$el.offsetLeft; - let right = (this.$el.offsetLeft + this.$el.offsetWidth); + const left = boardsList.scrollLeft - offsetLeft; + let right = (offsetLeft + this.$el.offsetWidth); if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) { + // -290 here because width of boardsList is animating so therefore + // getting the width here is incorrect + // 290 is the width of the sidebar right -= (boardsList.offsetWidth - 290); } else { right -= boardsList.offsetWidth; @@ -58,11 +62,11 @@ if (right - boardsList.scrollLeft > 0) { $(boardsList).animate({ scrollLeft: right - }, 200); + }, this.sortableOptions.animation); } else if (left > 0) { $(boardsList).animate({ - scrollLeft: this.$el.offsetLeft - }, 200); + scrollLeft: offsetLeft + }, this.sortableOptions.animation); } } }, @@ -75,7 +79,7 @@ } }, mounted () { - const options = gl.issueBoards.getBoardSortableDefaultOptions({ + this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({ disabled: this.disabled, group: 'boards', draggable: '.is-draggable', @@ -94,7 +98,7 @@ } }); - this.sortable = Sortable.create(this.$el.parentNode, options); + this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions); }, }); })(); diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 67ffbae2ab9..83673932bfa 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -343,7 +343,8 @@ .right-sidebar.right-sidebar-expanded { &.boards-sidebar-slide-enter-active, &.boards-sidebar-slide-leave-active { - transition: all .2s; + transition: width .2s, + padding .2s; } &.boards-sidebar-slide-enter, -- cgit v1.2.1 From 23e6d8c3682c116db909d0eabfaedb57df85bf36 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Thu, 5 Jan 2017 12:25:47 -0600 Subject: Moved the "import" button next to the "Add to project" button Fixed padding and margins for the dropdowns on the members section --- app/assets/stylesheets/framework/lists.scss | 4 ++++ app/assets/stylesheets/pages/members.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 277d4202950..cb25b808374 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -163,6 +163,10 @@ ul.content-list { &:last-child { margin-right: 0; + + @media(max-width: $screen-xs-max) { + margin: 0 auto; + } } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 18c65191ea1..be7193bae04 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -25,7 +25,7 @@ } .form-horizontal { - margin-top: 5px; + margin-top: 20px; @media (min-width: $screen-sm-min) { display: -webkit-flex; -- cgit v1.2.1 From 6bf0bd0fba08320ffa0dc4ef3af7910d9aa14ae6 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 13:56:53 -0700 Subject: no space for requires - all consistent syntax = change if logic for index.js.es6 --- .../javascripts/vue_pipelines_index/index.js.es6 | 67 ++++++++++------------ .../javascripts/vue_pipelines_index/store.js.es6 | 1 - .../vue_pipelines_index/time_ago.js.es6 | 1 + 3 files changed, 31 insertions(+), 38 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index bad24ce41d0..d2971139a53 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -1,21 +1,17 @@ /* global Vue, VueResource, gl */ /* eslint-disable no-bitwise, no-plusplus*/ - /*= require vue_common_component/commit */ - -//= require vue-resource - +/*= require vue-resource /*= require boards/vue_resource_interceptor */ - -//= require ./status.js.es6 -//= require ./store.js.es6 -//= require ./pipeline_url.js.es6 -//= require ./pipeline_head.js.es6 -//= require ./stage.js.es6 -//= require ./stages.js.es6 -//= require ./pipeline_actions.js.es6 -//= require ./time_ago.js.es6 -//= require ./pipelines.js.es6 +/*= require ./status.js.es6 */ +/*= require ./store.js.es6 */ +/*= require ./pipeline_url.js.es6 */ +/*= require ./pipeline_head.js.es6 */ +/*= require ./stage.js.es6 */ +/*= require ./stages.js.es6 */ +/*= require ./pipeline_actions.js.es6 */ +/*= require ./time_ago.js.es6 */ +/*= require ./pipelines.js.es6 */ (() => { const project = document.querySelector('.pipelines'); @@ -24,27 +20,24 @@ Vue.use(VueResource); - if (entry) { - return new Vue({ - el: entry, - data: { - scope: project.dataset.url, - store: new gl.PipelineStore(), - svgs: svgs.dataset, - }, - components: { - 'vue-pipelines': gl.VuePipelines, - }, - template: ` - - - `, - }); - } - - return null; + if (!entry) return null; + return new Vue({ + el: entry, + data: { + scope: project.dataset.url, + store: new gl.PipelineStore(), + svgs: svgs.dataset, + }, + components: { + 'vue-pipelines': gl.VuePipelines, + }, + template: ` + + + `, + }); })(); diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 137b08224a7..0b0c60d0551 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -1,6 +1,5 @@ /* global gl, Flash */ /* eslint-disable no-param-reassign, no-underscore-dangle */ - /*= require vue_realtime_listener/index.js */ ((gl) => { diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 7559fd55803..257352b8087 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -1,5 +1,6 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign */ + ((gl) => { gl.VueTimeAgo = Vue.extend({ data() { -- cgit v1.2.1 From 79f6e08c116a24493406da21e8be8a03cc1b35cd Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 14:11:42 -0700 Subject: use switch for pagination --- app/assets/javascripts/vue_pagination/index.js.es6 | 30 +++++++++++++--------- 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index d5f276e3b59..24d3e222679 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -66,18 +66,24 @@ const text = e.target.innerText; const { totalPages, nextPage, previousPage } = this.pageInfo; - if (text === SPREAD) { - return; - } else if (text === LAST) { - pageNum = totalPages; - } else if (text === NEXT) { - pageNum = nextPage; - } else if (text === PREV) { - pageNum = previousPage; - } else if (text === FIRST) { - pageNum = 1; - } else { - pageNum = +text; + switch (text) { + case SPREAD: + break; + case LAST: + pageNum = totalPages; + break; + case NEXT: + pageNum = nextPage; + break; + case PREV: + pageNum = previousPage; + break; + case FIRST: + pageNum = 1; + break; + default: + pageNum = +text; + break; } this.change(pageNum, apiScope); -- cgit v1.2.1 From 5d67051c28722d4aff80daf363e1b516bb2fc31f Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 14:14:53 -0700 Subject: remove pipeline head component and use staic HTML instead --- .../javascripts/vue_pipelines_index/index.js.es6 | 1 - .../vue_pipelines_index/pipeline_head.js.es6 | 19 ------------------- .../javascripts/vue_pipelines_index/pipelines.js.es6 | 11 ++++++++++- 3 files changed, 10 insertions(+), 21 deletions(-) delete mode 100644 app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index d2971139a53..5e9ff040135 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -6,7 +6,6 @@ /*= require ./status.js.es6 */ /*= require ./store.js.es6 */ /*= require ./pipeline_url.js.es6 */ -/*= require ./pipeline_head.js.es6 */ /*= require ./stage.js.es6 */ /*= require ./stages.js.es6 */ /*= require ./pipeline_actions.js.es6 */ diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 deleted file mode 100644 index 510e54f3a6f..00000000000 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 +++ /dev/null @@ -1,19 +0,0 @@ -/* global Vue, gl */ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.VuePipelineHead = Vue.extend({ - template: ` - - - Status - Pipeline - Commit - Stages - - - - - `, - }); -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 65e6aff426b..baea63b62a1 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -74,7 +74,16 @@
          - + + + + + + + + + + Date: Fri, 6 Jan 2017 15:07:34 -0700 Subject: remove white space --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 3 --- 1 file changed, 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 3133a3896f2..a196832d928 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -61,12 +61,9 @@ data-placement="top" data-toggle="dropdown" type="button"> - - -
            -- cgit v1.2.1 From ce996962d6bec0d29664ac3dbe62dcd18630230e Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 15:27:56 -0700 Subject: add param_helper to utils - fix switch statement in pagination --- app/assets/javascripts/lib/utils/param_helper.js.es6 | 18 ++++++++++++++++++ app/assets/javascripts/vue_pagination/index.js.es6 | 15 ++++++--------- .../javascripts/vue_pagination/param_helper.js.es6 | 13 ------------- 3 files changed, 24 insertions(+), 22 deletions(-) create mode 100644 app/assets/javascripts/lib/utils/param_helper.js.es6 delete mode 100644 app/assets/javascripts/vue_pagination/param_helper.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/param_helper.js.es6 b/app/assets/javascripts/lib/utils/param_helper.js.es6 new file mode 100644 index 00000000000..2b150c415c8 --- /dev/null +++ b/app/assets/javascripts/lib/utils/param_helper.js.es6 @@ -0,0 +1,18 @@ +/* eslint-disable no-param-reassign */ + +((w) => { + /** + this will take in the `name` of the param you want to parse in the url + if the name does not exist this function will return `null` + otherwise it will return the value of the param key provided + */ + w.getParameterByName = (name) => { + const url = window.location.href; + name = name.replace(/[[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); + const results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + }; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 24d3e222679..b69062e0849 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -1,7 +1,7 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign, no-plusplus */ -//= require ./param_helper.js.es6 +/*= require lib/utils/param_helper.js.es6 */ ((gl) => { const PAGINATION_UI_BUTTON_LIMIT = 4; @@ -58,7 +58,6 @@ }, methods: { changePage(e) { - let pageNum = this.pageInfo.page; let apiScope = gl.getParameterByName('scope'); if (!apiScope) apiScope = 'all'; @@ -70,23 +69,21 @@ case SPREAD: break; case LAST: - pageNum = totalPages; + this.change(totalPages, apiScope); break; case NEXT: - pageNum = nextPage; + this.change(nextPage, apiScope); break; case PREV: - pageNum = previousPage; + this.change(previousPage, apiScope); break; case FIRST: - pageNum = 1; + this.change(1, apiScope); break; default: - pageNum = +text; + this.change(+text, apiScope); break; } - - this.change(pageNum, apiScope); }, }, computed: { diff --git a/app/assets/javascripts/vue_pagination/param_helper.js.es6 b/app/assets/javascripts/vue_pagination/param_helper.js.es6 deleted file mode 100644 index 4c684f96e9e..00000000000 --- a/app/assets/javascripts/vue_pagination/param_helper.js.es6 +++ /dev/null @@ -1,13 +0,0 @@ -/* eslint-disable no-param-reassign */ - -((w) => { - w.getParameterByName = (name) => { - const url = window.location.href; - name = name.replace(/[[\]]/g, '\\$&'); - const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); - const results = regex.exec(url); - if (!results) return null; - if (!results[2]) return ''; - return decodeURIComponent(results[2].replace(/\+/g, ' ')); - }; -})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 9c5524dfda86e96fbae39f0777883a9efaecf2e1 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 15:32:06 -0700 Subject: fix cssClasses in status component --- app/assets/javascripts/vue_pipelines_index/status.js.es6 | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 2db18aa0bd4..05175082704 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -8,8 +8,7 @@ ], computed: { cssClasses() { - const cssObject = {}; - cssObject['ci-status'] = true; + const cssObject = { 'ci-status': true }; cssObject[`ci-${this.pipeline.details.status.group}`] = true; return cssObject; }, -- cgit v1.2.1 From a812a915109d43b4777e6ecb06ada687a0025100 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 15:34:47 -0700 Subject: fix flash and request logic in stage --- app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index a196832d928..74a79dcedae 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -19,9 +19,11 @@ .then((response) => { this.request = true; this.builds = JSON.parse(response.body).html; - }, () => new Flash( - 'Something went wrong on our end.', - )); + }, () => { + const flash = new Flash('Something went wrong on our end.'); + this.request = false; + return flash; + }); }, clearBuilds() { this.builds = ''; -- cgit v1.2.1 From 7eca523e20dc7376c5172088f447d9126c3391e7 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 15:37:02 -0700 Subject: change 'pipelines.length' logic for spinner --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index baea63b62a1..9a8de768aba 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -72,7 +72,7 @@
            -
            +
          StatusPipelineCommitStages
          -- cgit v1.2.1 From 0e6d3c14a64f09d404f18f27ea212c41295fb5db Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 15:38:35 -0700 Subject: remove parenthesis around returned objects in pipelines.js.es6 --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 9a8de768aba..3afb6fc236f 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -44,15 +44,15 @@ author(pipeline) { if (!pipeline.commit) return ({ avatar_url: '', web_url: '', username: '' }); if (pipeline.commit.author) return pipeline.commit.author; - return ({ + return { avatar_url: pipeline.commit.author_gravatar_url, web_url: `mailto:${pipeline.commit.author_email}`, username: pipeline.commit.author_name, - }); + }; }, ref(pipeline) { const { ref } = pipeline; - return ({ name: ref.name, tag: ref.tag, ref_url: ref.path }); + return { name: ref.name, tag: ref.tag, ref_url: ref.path }; }, commitTitle(pipeline) { return pipeline.commit ? pipeline.commit.title : ''; -- cgit v1.2.1 From 776b9774007422b61ae96c39df14ecb923714240 Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 16:05:16 -0700 Subject: remove disabled rules - not needed anymore --- app/assets/javascripts/vue_pipelines_index/index.js.es6 | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 5e9ff040135..9dfbedd73ab 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -1,5 +1,4 @@ /* global Vue, VueResource, gl */ -/* eslint-disable no-bitwise, no-plusplus*/ /*= require vue_common_component/commit */ /*= require vue-resource /*= require boards/vue_resource_interceptor */ -- cgit v1.2.1 From ec90700c844fd73f7bde05afa6029be15fb2cdbe Mon Sep 17 00:00:00 2001 From: Regis Date: Fri, 6 Jan 2017 16:06:12 -0700 Subject: remove bitwise disable on pipelines.js.es6 --- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 3afb6fc236f..d4166be4a34 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -1,5 +1,5 @@ /* global Vue, gl */ -/* eslint-disable no-param-reassign, no-bitwise*/ +/* eslint-disable no-param-reassign */ ((gl) => { gl.VuePipelines = Vue.extend({ -- cgit v1.2.1 From 3fff93ca01008e73c320ce87a686c69bada5dac3 Mon Sep 17 00:00:00 2001 From: Regis Date: Sat, 7 Jan 2017 18:13:00 -0700 Subject: use Object.assign instead of Vue.set - change duration to computed prop --- app/assets/javascripts/vue_pipelines_index/store.js.es6 | 6 +++--- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 0b0c60d0551..6b34839b030 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -25,11 +25,11 @@ this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`) .then((response) => { const pageInfo = pageValues(response.headers); - Vue.set(this, 'pageInfo', pageInfo); + this.pageInfo = Object.assign({}, this.pageInfo, pageInfo); const res = JSON.parse(response.body); - Vue.set(this, 'pipelines', res.pipelines); - Vue.set(this, 'count', res.count); + this.count = Object.assign({}, this.count, res.count); + this.pipelines = Object.assign([], this.pipelines, res.pipelines); updatePipelineNums(this.count); this.pageRequest = false; diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 257352b8087..7e6d17d4e13 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -29,23 +29,23 @@ if (!finished && changeTime) return false; return ({ words: this.timeAgo.format(finished) }); }, - }, - methods: { duration() { const { duration } = this.pipeline.details; if (duration === 0) return '00:00:00'; if (duration !== null) return duration; return false; }, + }, + methods: { changeTime() { this.currentTime = new Date(); }, }, template: `
          -

          +

          - {{duration()}} + {{duration}}

          -- cgit v1.2.1 From 76c68d1a185009b831bab014446829158ced2f17 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 9 Jan 2017 09:19:55 -0700 Subject: namespace getParametersByName to gl.utils instead of just gl --- app/assets/javascripts/lib/utils/param_helper.js.es6 | 7 +++++-- app/assets/javascripts/vue_pagination/index.js.es6 | 2 +- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 6 +++--- 3 files changed, 9 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/param_helper.js.es6 b/app/assets/javascripts/lib/utils/param_helper.js.es6 index 2b150c415c8..01b3a2ee07f 100644 --- a/app/assets/javascripts/lib/utils/param_helper.js.es6 +++ b/app/assets/javascripts/lib/utils/param_helper.js.es6 @@ -1,12 +1,15 @@ /* eslint-disable no-param-reassign */ -((w) => { +((gl) => { + gl.utils = gl.utils || (gl.utils = {}); + /** this will take in the `name` of the param you want to parse in the url if the name does not exist this function will return `null` otherwise it will return the value of the param key provided */ - w.getParameterByName = (name) => { + + gl.utils.getParameterByName = (name) => { const url = window.location.href; name = name.replace(/[[\]]/g, '\\$&'); const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index b69062e0849..b9678d8a97f 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -58,7 +58,7 @@ }, methods: { changePage(e) { - let apiScope = gl.getParameterByName('scope'); + let apiScope = gl.utils.getParameterByName('scope'); if (!apiScope) apiScope = 'all'; diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index d4166be4a34..eb9035146ba 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -28,8 +28,8 @@ }, props: ['scope', 'store', 'svgs'], created() { - const pagenum = gl.getParameterByName('p'); - const scope = gl.getParameterByName('scope'); + const pagenum = gl.utils.getParameterByName('p'); + const scope = gl.utils.getParameterByName('scope'); if (pagenum) this.pagenum = pagenum; if (scope) this.apiScope = scope; this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope); @@ -42,7 +42,7 @@ this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope); }, author(pipeline) { - if (!pipeline.commit) return ({ avatar_url: '', web_url: '', username: '' }); + if (!pipeline.commit) return { avatar_url: '', web_url: '', username: '' }; if (pipeline.commit.author) return pipeline.commit.author; return { avatar_url: pipeline.commit.author_gravatar_url, -- cgit v1.2.1 From 5498448535c74e326dcb9a714dc3d8992c965f2c Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 9 Jan 2017 10:20:20 -0700 Subject: use Turbolinks instead of window.pushState for pagination --- app/assets/javascripts/vue_pagination/index.js.es6 | 7 ++----- app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 | 7 ++----- 2 files changed, 4 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index b9678d8a97f..78a26f65dfd 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -17,15 +17,12 @@ /** This function will take the information given by the pagination component - And make a new API call from the parent + And make a new Turbolinks call Here is an example `change` method: change(pagenum, apiScope) { - window.history.pushState({}, null, `?scope=${apiScope}&p=${pagenum}`); - clearInterval(this.timeLoopInterval); - this.pageRequest = true; - this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope); + Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`); }, */ diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index eb9035146ba..73627e9ba50 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -1,4 +1,4 @@ -/* global Vue, gl */ +/* global Vue, Turbolinks, gl */ /* eslint-disable no-param-reassign */ ((gl) => { @@ -36,10 +36,7 @@ }, methods: { change(pagenum, apiScope) { - window.history.pushState({}, null, `?scope=${apiScope}&p=${pagenum}`); - clearInterval(this.timeLoopInterval); - this.pageRequest = true; - this.store.fetchDataLoop.call(this, Vue, pagenum, this.scope, apiScope); + Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`); }, author(pipeline) { if (!pipeline.commit) return { avatar_url: '', web_url: '', username: '' }; -- cgit v1.2.1 From 55df55367f68ca0d1df2ad13363c98ec62fc3930 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 9 Jan 2017 10:26:43 -0700 Subject: move param helper to common utils --- app/assets/javascripts/lib/utils/common_utils.js | 144 ------------------- .../javascripts/lib/utils/common_utils.js.es6 | 159 +++++++++++++++++++++ .../javascripts/lib/utils/param_helper.js.es6 | 21 --- app/assets/javascripts/vue_pagination/index.js.es6 | 2 - 4 files changed, 159 insertions(+), 167 deletions(-) delete mode 100644 app/assets/javascripts/lib/utils/common_utils.js create mode 100644 app/assets/javascripts/lib/utils/common_utils.js.es6 delete mode 100644 app/assets/javascripts/lib/utils/param_helper.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js deleted file mode 100644 index 31a71379af3..00000000000 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ /dev/null @@ -1,144 +0,0 @@ -/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-param-reassign, no-else-return, quotes, object-shorthand, comma-dangle, camelcase, one-var, vars-on-top, one-var-declaration-per-line, no-return-assign, consistent-return, padded-blocks, max-len, prefer-template */ -(function() { - (function(w) { - var base; - w.gl || (w.gl = {}); - (base = w.gl).utils || (base.utils = {}); - w.gl.utils.isInGroupsPage = function() { - return gl.utils.getPagePath() === 'groups'; - }; - w.gl.utils.isInProjectPage = function() { - return gl.utils.getPagePath() === 'projects'; - }; - w.gl.utils.getProjectSlug = function() { - if (this.isInProjectPage()) { - return $('body').data('project'); - } else { - return null; - } - }; - w.gl.utils.getGroupSlug = function() { - if (this.isInGroupsPage()) { - return $('body').data('group'); - } else { - return null; - } - }; - - w.gl.utils.ajaxGet = function(url) { - return $.ajax({ - type: "GET", - url: url, - dataType: "script" - }); - }; - - w.gl.utils.extractLast = function(term) { - return this.split(term).pop(); - }; - - w.gl.utils.rstrip = function rstrip(val) { - if (val) { - return val.replace(/\s+$/, ''); - } else { - return val; - } - }; - - w.gl.utils.disableButtonIfEmptyField = function(field_selector, button_selector, event_name) { - event_name = event_name || 'input'; - var closest_submit, field, that; - that = this; - field = $(field_selector); - closest_submit = field.closest('form').find(button_selector); - if (this.rstrip(field.val()) === "") { - closest_submit.disable(); - } - return field.on(event_name, function() { - if (that.rstrip($(this).val()) === "") { - return closest_submit.disable(); - } else { - return closest_submit.enable(); - } - }); - }; - - // automatically adjust scroll position for hash urls taking the height of the navbar into account - // https://github.com/twitter/bootstrap/issues/1768 - w.gl.utils.handleLocationHash = function() { - var hash = w.gl.utils.getLocationHash(); - if (!hash) return; - - var navbar = document.querySelector('.navbar-gitlab'); - var subnav = document.querySelector('.layout-nav'); - var fixedTabs = document.querySelector('.js-tabs-affix'); - - var adjustment = 0; - if (navbar) adjustment -= navbar.offsetHeight; - if (subnav) adjustment -= subnav.offsetHeight; - - // scroll to user-generated markdown anchor if we cannot find a match - if (document.getElementById(hash) === null) { - var target = document.getElementById('user-content-' + hash); - if (target && target.scrollIntoView) { - target.scrollIntoView(true); - window.scrollBy(0, adjustment); - } - } else { - // only adjust for fixedTabs when not targeting user-generated content - if (fixedTabs) { - adjustment -= fixedTabs.offsetHeight; - } - window.scrollBy(0, adjustment); - } - }; - - // Check if element scrolled into viewport from above or below - // Courtesy http://stackoverflow.com/a/7557433/414749 - w.gl.utils.isInViewport = function(el) { - var rect = el.getBoundingClientRect(); - - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= window.innerHeight && - rect.right <= window.innerWidth - ); - }; - - gl.utils.getPagePath = function(index) { - index = index || 0; - return $('body').data('page').split(':')[index]; - }; - - gl.utils.parseUrl = function (url) { - var parser = document.createElement('a'); - parser.href = url; - return parser; - }; - - gl.utils.parseUrlPathname = function (url) { - var parsedUrl = gl.utils.parseUrl(url); - // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11 - // We have to make sure we always have an absolute path. - return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname; - }; - - gl.utils.isMetaKey = function(e) { - return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; - }; - - gl.utils.scrollToElement = function($el) { - var top = $el.offset().top; - gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height(); - gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height(); - gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height(); - - return $('body, html').animate({ - scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight) - }, 200); - }; - - })(window); - -}).call(this); diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 new file mode 100644 index 00000000000..b8d637a9827 --- /dev/null +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -0,0 +1,159 @@ +/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-param-reassign, no-else-return, quotes, object-shorthand, comma-dangle, camelcase, one-var, vars-on-top, one-var-declaration-per-line, no-return-assign, consistent-return, padded-blocks, max-len, prefer-template */ +(function() { + (function(w) { + var base; + w.gl || (w.gl = {}); + (base = w.gl).utils || (base.utils = {}); + w.gl.utils.isInGroupsPage = function() { + return gl.utils.getPagePath() === 'groups'; + }; + w.gl.utils.isInProjectPage = function() { + return gl.utils.getPagePath() === 'projects'; + }; + w.gl.utils.getProjectSlug = function() { + if (this.isInProjectPage()) { + return $('body').data('project'); + } else { + return null; + } + }; + w.gl.utils.getGroupSlug = function() { + if (this.isInGroupsPage()) { + return $('body').data('group'); + } else { + return null; + } + }; + + w.gl.utils.ajaxGet = function(url) { + return $.ajax({ + type: "GET", + url: url, + dataType: "script" + }); + }; + + w.gl.utils.extractLast = function(term) { + return this.split(term).pop(); + }; + + w.gl.utils.rstrip = function rstrip(val) { + if (val) { + return val.replace(/\s+$/, ''); + } else { + return val; + } + }; + + w.gl.utils.disableButtonIfEmptyField = function(field_selector, button_selector, event_name) { + event_name = event_name || 'input'; + var closest_submit, field, that; + that = this; + field = $(field_selector); + closest_submit = field.closest('form').find(button_selector); + if (this.rstrip(field.val()) === "") { + closest_submit.disable(); + } + return field.on(event_name, function() { + if (that.rstrip($(this).val()) === "") { + return closest_submit.disable(); + } else { + return closest_submit.enable(); + } + }); + }; + + // automatically adjust scroll position for hash urls taking the height of the navbar into account + // https://github.com/twitter/bootstrap/issues/1768 + w.gl.utils.handleLocationHash = function() { + var hash = w.gl.utils.getLocationHash(); + if (!hash) return; + + var navbar = document.querySelector('.navbar-gitlab'); + var subnav = document.querySelector('.layout-nav'); + var fixedTabs = document.querySelector('.js-tabs-affix'); + + var adjustment = 0; + if (navbar) adjustment -= navbar.offsetHeight; + if (subnav) adjustment -= subnav.offsetHeight; + + // scroll to user-generated markdown anchor if we cannot find a match + if (document.getElementById(hash) === null) { + var target = document.getElementById('user-content-' + hash); + if (target && target.scrollIntoView) { + target.scrollIntoView(true); + window.scrollBy(0, adjustment); + } + } else { + // only adjust for fixedTabs when not targeting user-generated content + if (fixedTabs) { + adjustment -= fixedTabs.offsetHeight; + } + window.scrollBy(0, adjustment); + } + }; + + // Check if element scrolled into viewport from above or below + // Courtesy http://stackoverflow.com/a/7557433/414749 + w.gl.utils.isInViewport = function(el) { + var rect = el.getBoundingClientRect(); + + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= window.innerHeight && + rect.right <= window.innerWidth + ); + }; + + gl.utils.getPagePath = function(index) { + index = index || 0; + return $('body').data('page').split(':')[index]; + }; + + gl.utils.parseUrl = function (url) { + var parser = document.createElement('a'); + parser.href = url; + return parser; + }; + + gl.utils.parseUrlPathname = function (url) { + var parsedUrl = gl.utils.parseUrl(url); + // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11 + // We have to make sure we always have an absolute path. + return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname; + }; + + gl.utils.isMetaKey = function(e) { + return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; + }; + + gl.utils.scrollToElement = function($el) { + var top = $el.offset().top; + gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height(); + gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height(); + gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height(); + + return $('body, html').animate({ + scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight) + }, 200); + }; + + /** + this will take in the `name` of the param you want to parse in the url + if the name does not exist this function will return `null` + otherwise it will return the value of the param key provided + */ + w.gl.utils.getParameterByName = (name) => { + const url = window.location.href; + name = name.replace(/[[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); + const results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + }; + + })(window); + +}).call(this); diff --git a/app/assets/javascripts/lib/utils/param_helper.js.es6 b/app/assets/javascripts/lib/utils/param_helper.js.es6 deleted file mode 100644 index 01b3a2ee07f..00000000000 --- a/app/assets/javascripts/lib/utils/param_helper.js.es6 +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable no-param-reassign */ - -((gl) => { - gl.utils = gl.utils || (gl.utils = {}); - - /** - this will take in the `name` of the param you want to parse in the url - if the name does not exist this function will return `null` - otherwise it will return the value of the param key provided - */ - - gl.utils.getParameterByName = (name) => { - const url = window.location.href; - name = name.replace(/[[\]]/g, '\\$&'); - const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); - const results = regex.exec(url); - if (!results) return null; - if (!results[2]) return ''; - return decodeURIComponent(results[2].replace(/\+/g, ' ')); - }; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6 index 78a26f65dfd..605824fa939 100644 --- a/app/assets/javascripts/vue_pagination/index.js.es6 +++ b/app/assets/javascripts/vue_pagination/index.js.es6 @@ -1,8 +1,6 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign, no-plusplus */ -/*= require lib/utils/param_helper.js.es6 */ - ((gl) => { const PAGINATION_UI_BUTTON_LIMIT = 4; const UI_LIMIT = 6; -- cgit v1.2.1 From 2955c8cc8b76666404569f00e49457262ffbc895 Mon Sep 17 00:00:00 2001 From: Ryan Harris Date: Mon, 9 Jan 2017 12:50:04 -0500 Subject: Display project avatars on Admin Area and Projects pages for mobile views --- app/assets/stylesheets/framework/mobile.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 7eb9962ba33..92d687996e9 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -37,10 +37,6 @@ display: none; } - .project-avatar { - display: none; - } - .project-home-panel { padding-left: 0 !important; -- cgit v1.2.1 From cf84c09ad270dae9a31d80d57588e5b7023454d4 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 9 Jan 2017 11:25:30 -0700 Subject: format duration in vue: time_ago computed property in a dynamic fashion --- app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 7e6d17d4e13..655110feba1 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -31,8 +31,17 @@ }, duration() { const { duration } = this.pipeline.details; - if (duration === 0) return '00:00:00'; - if (duration !== null) return duration; + const date = new Date(duration * 1000); + + let hh = date.getUTCHours(); + let mm = date.getUTCMinutes(); + let ss = date.getSeconds(); + + if (hh < 10) hh = `0${hh}`; + if (mm < 10) mm = `0${mm}`; + if (ss < 10) ss = `0${ss}`; + + if (duration !== null) return `${hh}:${mm}:${ss}`; return false; }, }, -- cgit v1.2.1 From e797f7100d32c5a3089f0c3c934b9bd8d1615e9b Mon Sep 17 00:00:00 2001 From: Ryan Harris Date: Mon, 9 Jan 2017 15:20:42 -0500 Subject: Adjusted widths on Admin Area projects page to prevent misaligned floats --- app/assets/stylesheets/pages/projects.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index e30d73886e1..9455ba3b98a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -587,11 +587,21 @@ pre.light-well { .project-full-name { @include str-truncated; + + @media (max-width: $screen-xs-max) { + max-width: 50%; + } } .controls { line-height: $list-text-height; + .badge { + @media (max-width: $screen-xs-max) { + display: none; + } + } + a:hover { text-decoration: none; } @@ -605,6 +615,12 @@ pre.light-well { top: 2px; } } + + .description p { + @media (max-width: $screen-xs-max) { + max-width: 50%; + } + } } .bottom { -- cgit v1.2.1 From 71dc5af9ce5e25d8d3219b296e23c3ca6340451b Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 4 Nov 2016 16:27:11 -0500 Subject: Add basic search --- app/assets/javascripts/dispatcher.js.es6 | 3 + .../filtered_search/filtered_search_bundle.js | 13 +++ .../filtered_search/filtered_search_manager.js.es6 | 104 +++++++++++++++++++++ app/assets/stylesheets/framework/filters.scss | 24 +++++ 4 files changed, 144 insertions(+) create mode 100644 app/assets/javascripts/filtered_search/filtered_search_bundle.js create mode 100644 app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 54f13e328bd..5a9ee5c7d78 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -84,6 +84,9 @@ break; case 'projects:merge_requests:index': case 'projects:issues:index': + if(gl.hasOwnProperty('FilteredSearchManager')) { + new gl.FilteredSearchManager(); + } Issuable.init(); new gl.IssuableBulkActions({ prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_', diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js new file mode 100644 index 00000000000..656979ba82f --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_bundle.js @@ -0,0 +1,13 @@ + /* eslint-disable */ + // This is a manifest file that'll be compiled into including all the files listed below. + // Add new JavaScript code in separate files in this directory and they'll automatically + // be included in the compiled file accessible from http://example.com/assets/application.js + // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the + // the compiled file. + // + /*= require_tree . */ + + (function() { + + }).call(this); + \ No newline at end of file diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 new file mode 100644 index 00000000000..797473f2044 --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -0,0 +1,104 @@ +((global) => { + const TOKEN_TYPE_STRING = 'string'; + const TOKEN_TYPE_ARRAY = 'array'; + + const validTokenKeys = [{ + key: 'author', + type: 'string', + },{ + key: 'assignee', + type: 'string' + },{ + key: 'milestone', + type: 'string' + },{ + key: 'label', + type: 'array' + },]; + + class FilteredSearchManager { + constructor() { + this.bindEvents(); + this.clearTokens(); + } + + bindEvents() { + const input = document.querySelector('.filtered-search'); + + input.addEventListener('input', this.tokenize.bind(this)); + input.addEventListener('keydown', this.checkForEnter.bind(this)); + } + + clearTokens() { + this.tokens = []; + this.searchToken = ''; + } + + tokenize(event) { + // Re-calculate tokens + this.clearTokens(); + + // TODO: Current implementation does not support token values that have valid spaces in them + // Example/ label:community contribution + const input = event.target.value; + const inputs = input.split(' '); + let searchTerms = ''; + + inputs.forEach((i) => { + const colonIndex = i.indexOf(':'); + + // Check if text is a token + if (colonIndex !== -1) { + const tokenKey = i.slice(0, colonIndex).toLowerCase(); + const tokenValue = i.slice(colonIndex + 1); + + const match = validTokenKeys.filter((v) => { + return v.name === tokenKey; + })[0]; + + if (match) { + this.tokens.push = { + key: match.key, + value: tokenValue, + }; + } + } else { + searchTerms += i + ' '; + } + }, this); + + this.searchToken = searchTerms.trim(); + this.printTokens(); + } + + printTokens() { + console.log(this.tokens); + console.log(this.searchToken); + } + + checkForEnter(event) { + if (event.key === 'Enter') { + event.stopPropagation(); + event.preventDefault(); + this.search(); + } + } + + search() { + console.log('search'); + let path = '?scope=all&state=opened&utf8=✓'; + + this.tokens.foreach((token) => { + + }); + + if (this.searchToken) { + path += '&search=' + this.searchToken; + } + + window.location = path; + } + } + + global.FilteredSearchManager = FilteredSearchManager; +})(window.gl || (window.gl = {})); \ No newline at end of file diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 19827943385..a565642ba38 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -23,3 +23,27 @@ } } +.filtered-search-container { + display: flex; +} + +.filtered-search-input-container { + display: flex; + position: relative; + width: 100%; + + .form-control { + padding-left: 25px; + + &:focus ~ .fa-filter { + color: #444; + } + } + + .fa-filter { + position: absolute; + left: 10px; + top: 10px; + color: $gray-darkest; + } +} -- cgit v1.2.1 From cf8ae790d13f69d15f3d279565abbba3b065fba4 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 7 Nov 2016 16:18:50 -0600 Subject: Add filter params to search --- .../filtered_search/filtered_search_manager.js.es6 | 36 ++++++++++++++-------- 1 file changed, 24 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 797473f2044..c26a46a8558 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -5,15 +5,19 @@ const validTokenKeys = [{ key: 'author', type: 'string', + param: 'id', },{ key: 'assignee', - type: 'string' + type: 'string', + param: 'id', },{ key: 'milestone', - type: 'string' + type: 'string', + param: 'title', },{ key: 'label', - type: 'array' + type: 'array', + param: 'name%5B%5D', },]; class FilteredSearchManager { @@ -53,14 +57,14 @@ const tokenValue = i.slice(colonIndex + 1); const match = validTokenKeys.filter((v) => { - return v.name === tokenKey; + return v.key === tokenKey; })[0]; - if (match) { - this.tokens.push = { - key: match.key, - value: tokenValue, - }; + if (match && tokenValue.length > 0) { + this.tokens.push({ + key: match.key, + value: tokenValue, + }); } } else { searchTerms += i + ' '; @@ -72,8 +76,11 @@ } printTokens() { - console.log(this.tokens); - console.log(this.searchToken); + console.log('tokens:') + this.tokens.forEach((token) => { + console.log(token); + }) + console.log('search: ' + this.searchToken); } checkForEnter(event) { @@ -88,8 +95,13 @@ console.log('search'); let path = '?scope=all&state=opened&utf8=✓'; - this.tokens.foreach((token) => { + this.tokens.forEach((token) => { + const param = validTokenKeys.find((t) => { + return t.key === token.key; + }).param; + + path += `&${token.key}_${param}=${token.value}`; }); if (this.searchToken) { -- cgit v1.2.1 From 9e8f0e63b46ad4540eb2cf8e6206ebc22200f670 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 7 Nov 2016 16:19:15 -0600 Subject: Load searched params into input field --- .../filtered_search/filtered_search_manager.js.es6 | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index c26a46a8558..44718e8306c 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -23,6 +23,7 @@ class FilteredSearchManager { constructor() { this.bindEvents(); + this.loadSearchParamsFromURL(); this.clearTokens(); } @@ -38,6 +39,31 @@ this.searchToken = ''; } + loadSearchParamsFromURL() { + const params = window.location.search.split('&'); + let inputValue = ''; + + params.forEach((p) => { + const split = p.split('='); + const key = split[0]; + const value = split[1]; + + const match = validTokenKeys.find((t) => { + return key === `${t.key}_${t.param}`; + }); + + if (match) { + const sanitizedKey = key.slice(0, key.indexOf('_')); + inputValue += `${sanitizedKey}:${value} `; + } else if (!match && key === 'search') { + inputValue += `${value} `; + } + }); + + // Trim the last space value + document.querySelector('.filtered-search').value = inputValue.trim(); + } + tokenize(event) { // Re-calculate tokens this.clearTokens(); -- cgit v1.2.1 From d0165c82877cbc0ddd939713e7365337e0e5478f Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 7 Nov 2016 16:33:51 -0600 Subject: Add author_username and assignee_username --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 44718e8306c..94c0b99a1e1 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -5,11 +5,11 @@ const validTokenKeys = [{ key: 'author', type: 'string', - param: 'id', + param: 'username', },{ key: 'assignee', type: 'string', - param: 'id', + param: 'username', },{ key: 'milestone', type: 'string', -- cgit v1.2.1 From 339c5d43262d0061a70b0b485f5fe75f49a6cd0b Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 11:35:28 -0600 Subject: Sanitize spaces in search term --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 94c0b99a1e1..c9d7a99ae44 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -56,7 +56,9 @@ const sanitizedKey = key.slice(0, key.indexOf('_')); inputValue += `${sanitizedKey}:${value} `; } else if (!match && key === 'search') { - inputValue += `${value} `; + // Sanitize value as URL converts spaces into %20 + const sanitizedValue = value.replace('%20', ' '); + inputValue += `${sanitizedValue} `; } }); @@ -139,4 +141,4 @@ } global.FilteredSearchManager = FilteredSearchManager; -})(window.gl || (window.gl = {})); \ No newline at end of file +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 823185eca1dd3483f0c178991870c9727aad6470 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 11:36:03 -0600 Subject: Fixed bug where search terms with colons were not searchable --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index c9d7a99ae44..7acdabe3ef2 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -76,10 +76,13 @@ const inputs = input.split(' '); let searchTerms = ''; + const addSearchTerm = function addSearchTerm(term) { + searchTerms += term + ' '; + } + inputs.forEach((i) => { const colonIndex = i.indexOf(':'); - // Check if text is a token if (colonIndex !== -1) { const tokenKey = i.slice(0, colonIndex).toLowerCase(); const tokenValue = i.slice(colonIndex + 1); @@ -93,9 +96,11 @@ key: match.key, value: tokenValue, }); + } else { + addSearchTerm(i); } } else { - searchTerms += i + ' '; + addSearchTerm(i); } }, this); -- cgit v1.2.1 From a257f48946d9d002d829e116cc4acb6349240318 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 12:47:53 -0600 Subject: Add clear search button --- .../filtered_search/filtered_search_manager.js.es6 | 21 +++++++++++++++++++++ app/assets/stylesheets/framework/filters.scss | 22 ++++++++++++++++++++-- 2 files changed, 41 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 7acdabe3ef2..ad988fe2072 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -29,9 +29,23 @@ bindEvents() { const input = document.querySelector('.filtered-search'); + const clearSearch = document.querySelector('.clear-search'); input.addEventListener('input', this.tokenize.bind(this)); input.addEventListener('keydown', this.checkForEnter.bind(this)); + + clearSearch.addEventListener('click', this.clearSearch.bind(this)); + } + + clearSearch(event) { + event.stopPropagation(); + event.preventDefault(); + + this.clearTokens(); + const input = document.querySelector('.filtered-search'); + input.value = ''; + + event.target.classList.add('hidden'); } clearTokens() { @@ -64,12 +78,19 @@ // Trim the last space value document.querySelector('.filtered-search').value = inputValue.trim(); + + if (inputValue.trim()) { + document.querySelector('.clear-search').classList.remove('hidden'); + } } tokenize(event) { // Re-calculate tokens this.clearTokens(); + // Enable clear button + document.querySelector('.clear-search').classList.remove('hidden'); + // TODO: Current implementation does not support token values that have valid spaces in them // Example/ label:community contribution const input = event.target.value; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index a565642ba38..b192455f5f0 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -39,11 +39,29 @@ color: #444; } } - .fa-filter { position: absolute; - left: 10px; top: 10px; + left: 10px; + color: $gray-darkest; + } + + .fa-times { + right: 10px; color: $gray-darkest; } + + .clear-search { + width: 35px; + background-color: transparent; + border: none; + position: absolute; + right: 0px; + height: 100%; + outline: none; + + &:hover .fa-times { + color: #444; + } + } } -- cgit v1.2.1 From 7564c5713319517d0b61bc421275197ae7c79113 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 12:59:30 -0600 Subject: Use + instead of %20 --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index ad988fe2072..fccc0de050f 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -70,8 +70,8 @@ const sanitizedKey = key.slice(0, key.indexOf('_')); inputValue += `${sanitizedKey}:${value} `; } else if (!match && key === 'search') { - // Sanitize value as URL converts spaces into %20 - const sanitizedValue = value.replace('%20', ' '); + // Sanitize value as URL converts spaces into + + const sanitizedValue = value.replace(/[+]/g, ' '); inputValue += `${sanitizedValue} `; } }); @@ -149,7 +149,6 @@ console.log('search'); let path = '?scope=all&state=opened&utf8=✓'; - this.tokens.forEach((token) => { const param = validTokenKeys.find((t) => { return t.key === token.key; @@ -159,7 +158,7 @@ }); if (this.searchToken) { - path += '&search=' + this.searchToken; + path += '&search=' + this.searchToken.replace(/ /g, '+'); } window.location = path; -- cgit v1.2.1 From 6b4358eaf70afdd79e441501a5b41690ef70b845 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 13:20:37 -0600 Subject: Add search based on state --- .../filtered_search/filtered_search_manager.js.es6 | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index fccc0de050f..63cdcecdf49 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -147,7 +147,22 @@ search() { console.log('search'); - let path = '?scope=all&state=opened&utf8=✓'; + let path = '?scope=all&utf8=✓'; + + // Check current state + const currentPath = window.location.search; + const stateIndex = currentPath.indexOf('state='); + const defaultState = 'opened'; + let currentState = defaultState; + + if (stateIndex !== -1) { + const remaining = currentPath.slice(stateIndex + 6); + const separatorIndex = remaining.indexOf('&'); + + currentState = separatorIndex === -1 ? remaining : remaining.slice(0, separatorIndex); + } + + path += `&state=${currentState}` this.tokens.forEach((token) => { const param = validTokenKeys.find((t) => { -- cgit v1.2.1 From 7b382af73956518b73872c9638754e86da15d915 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 14:18:46 -0600 Subject: Add support for quotations --- .../filtered_search/filtered_search_manager.js.es6 | 41 +++++++++++++++++++--- 1 file changed, 36 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 63cdcecdf49..f5e53d075b0 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -68,7 +68,13 @@ if (match) { const sanitizedKey = key.slice(0, key.indexOf('_')); - inputValue += `${sanitizedKey}:${value} `; + let sanitizedValue = value; + + if (match && sanitizedKey === 'label') { + sanitizedValue = sanitizedValue.replace(/%20/g, ' '); + } + + inputValue += `${sanitizedKey}:${sanitizedValue} `; } else if (!match && key === 'search') { // Sanitize value as URL converts spaces into + const sanitizedValue = value.replace(/[+]/g, ' '); @@ -91,26 +97,51 @@ // Enable clear button document.querySelector('.clear-search').classList.remove('hidden'); - // TODO: Current implementation does not support token values that have valid spaces in them - // Example/ label:community contribution const input = event.target.value; const inputs = input.split(' '); let searchTerms = ''; + let lastQuotation = ''; + let incompleteToken = false; const addSearchTerm = function addSearchTerm(term) { searchTerms += term + ' '; } inputs.forEach((i) => { + if (incompleteToken) { + const prevToken = this.tokens[this.tokens.length - 1]; + prevToken.value += ` ${i}`; + + // Remove last quotation + const lastQuotationRegex = new RegExp(lastQuotation, 'g'); + prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); + this.tokens[this.tokens.length - 1] = prevToken; + + // Check to see if this quotation completes the token value + if (i.indexOf(lastQuotation)) { + incompleteToken = !incompleteToken; + } + + return; + } + const colonIndex = i.indexOf(':'); if (colonIndex !== -1) { const tokenKey = i.slice(0, colonIndex).toLowerCase(); const tokenValue = i.slice(colonIndex + 1); - const match = validTokenKeys.filter((v) => { + const match = validTokenKeys.find((v) => { return v.key === tokenKey; - })[0]; + }); + + if (tokenValue.indexOf('"') !== -1) { + lastQuotation = '"'; + incompleteToken = true; + } else if (tokenValue.indexOf('\'') !== -1) { + lastQuotation = '\''; + incompleteToken = true; + } if (match && tokenValue.length > 0) { this.tokens.push({ -- cgit v1.2.1 From 53b4d1b3a76f2aa80070699f623c90e4f7766506 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 15:42:15 -0600 Subject: Add special character encoding --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index f5e53d075b0..393e0b8a4b2 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -17,7 +17,7 @@ },{ key: 'label', type: 'array', - param: 'name%5B%5D', + param: 'name[]', },]; class FilteredSearchManager { @@ -54,13 +54,14 @@ } loadSearchParamsFromURL() { + // We can trust that each param has one & since values containing & will be encoded const params = window.location.search.split('&'); let inputValue = ''; params.forEach((p) => { const split = p.split('='); const key = split[0]; - const value = split[1]; + const value = decodeURIComponent(split[1]); const match = validTokenKeys.find((t) => { return key === `${t.key}_${t.param}`; @@ -200,11 +201,11 @@ return t.key === token.key; }).param; - path += `&${token.key}_${param}=${token.value}`; + path += `&${token.key}_${param}=${encodeURIComponent(token.value)}`; }); if (this.searchToken) { - path += '&search=' + this.searchToken.replace(/ /g, '+'); + path += '&search=' + encodeURIComponent(this.searchToken.replace(/ /g, '+')); } window.location = path; -- cgit v1.2.1 From 3ce7f23a855e9061e8f702ae9c9c07ce91e24738 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 16:20:47 -0600 Subject: Fix bug where search terms would not work after switching to another state tab --- .../filtered_search/filtered_search_manager.js.es6 | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 393e0b8a4b2..3528d9da88c 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -55,12 +55,13 @@ loadSearchParamsFromURL() { // We can trust that each param has one & since values containing & will be encoded - const params = window.location.search.split('&'); + // Remove the first character of search as it is always ? + const params = window.location.search.slice(1).split('&'); let inputValue = ''; params.forEach((p) => { const split = p.split('='); - const key = split[0]; + const key = decodeURIComponent(split[0]); const value = decodeURIComponent(split[1]); const match = validTokenKeys.find((t) => { @@ -69,17 +70,24 @@ if (match) { const sanitizedKey = key.slice(0, key.indexOf('_')); - let sanitizedValue = value; + const valueHasSpace = value.indexOf(' ') !== -1; - if (match && sanitizedKey === 'label') { - sanitizedValue = sanitizedValue.replace(/%20/g, ' '); + const preferredQuotations = '"'; + let quotationsToUse = preferredQuotations; + + if (valueHasSpace) { + // Prefer ", but use ' if required + quotationsToUse = value.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; } - inputValue += `${sanitizedKey}:${sanitizedValue} `; + inputValue += valueHasSpace ? `${sanitizedKey}:${quotationsToUse}${value}${quotationsToUse}` : `${sanitizedKey}:${value}`; + inputValue += ' '; + } else if (!match && key === 'search') { // Sanitize value as URL converts spaces into + const sanitizedValue = value.replace(/[+]/g, ' '); - inputValue += `${sanitizedValue} `; + inputValue += sanitizedValue; + inputValue += ' '; } }); -- cgit v1.2.1 From d797b03b98e9eccc5d2c7ba4de2d46b0aff1ff67 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 16:30:06 -0600 Subject: Fix bug where spaces would conver into + for all values --- .../filtered_search/filtered_search_manager.js.es6 | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 3528d9da88c..9fe70bbf3a7 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -62,7 +62,11 @@ params.forEach((p) => { const split = p.split('='); const key = decodeURIComponent(split[0]); - const value = decodeURIComponent(split[1]); + const value = split[1]; + + // Sanitize value since URL converts spaces into + + // Replace before decode so that we know what was originally + versus the encoded + + const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; const match = validTokenKeys.find((t) => { return key === `${t.key}_${t.param}`; @@ -70,22 +74,20 @@ if (match) { const sanitizedKey = key.slice(0, key.indexOf('_')); - const valueHasSpace = value.indexOf(' ') !== -1; + const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; const preferredQuotations = '"'; let quotationsToUse = preferredQuotations; if (valueHasSpace) { // Prefer ", but use ' if required - quotationsToUse = value.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; + quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; } - inputValue += valueHasSpace ? `${sanitizedKey}:${quotationsToUse}${value}${quotationsToUse}` : `${sanitizedKey}:${value}`; + inputValue += valueHasSpace ? `${sanitizedKey}:${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${sanitizedValue}`; inputValue += ' '; } else if (!match && key === 'search') { - // Sanitize value as URL converts spaces into + - const sanitizedValue = value.replace(/[+]/g, ' '); inputValue += sanitizedValue; inputValue += ' '; } @@ -213,7 +215,7 @@ }); if (this.searchToken) { - path += '&search=' + encodeURIComponent(this.searchToken.replace(/ /g, '+')); + path += '&search=' + encodeURIComponent(this.searchToken); } window.location = path; -- cgit v1.2.1 From ad02257c3ca25806c7104673566bc99c3f6867ed Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 8 Nov 2016 17:54:19 -0600 Subject: Fix bug where clear search button would not toggle visible --- .../filtered_search/filtered_search_manager.js.es6 | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 9fe70bbf3a7..42fe0cace10 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -32,6 +32,7 @@ const clearSearch = document.querySelector('.clear-search'); input.addEventListener('input', this.tokenize.bind(this)); + input.addEventListener('input', this.toggleClearSearchButton); input.addEventListener('keydown', this.checkForEnter.bind(this)); clearSearch.addEventListener('click', this.clearSearch.bind(this)); @@ -42,10 +43,8 @@ event.preventDefault(); this.clearTokens(); - const input = document.querySelector('.filtered-search'); - input.value = ''; - - event.target.classList.add('hidden'); + document.querySelector('.filtered-search').value = ''; + document.querySelector('.clear-search').classList.add('hidden'); } clearTokens() { @@ -101,13 +100,20 @@ } } + toggleClearSearchButton(event) { + const clearSearch = document.querySelector('.clear-search'); + + if (event.target.value) { + clearSearch.classList.remove('hidden'); + } else { + clearSearch.classList.add('hidden'); + } + } + tokenize(event) { // Re-calculate tokens this.clearTokens(); - // Enable clear button - document.querySelector('.clear-search').classList.remove('hidden'); - const input = event.target.value; const inputs = input.split(' '); let searchTerms = ''; -- cgit v1.2.1 From fe4d33cf15b877e8ba22f518f068088db8a3e36d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 9 Nov 2016 13:51:43 -0600 Subject: Fix scss lint --- app/assets/stylesheets/framework/filters.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b192455f5f0..90b9394b207 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -39,6 +39,7 @@ color: #444; } } + .fa-filter { position: absolute; top: 10px; @@ -56,7 +57,7 @@ background-color: transparent; border: none; position: absolute; - right: 0px; + right: 0; height: 100%; outline: none; -- cgit v1.2.1 From f1574e45b268e9f1dd488a3962327a4c40f26ae9 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 9 Nov 2016 14:31:58 -0600 Subject: Fix ESLint errors --- .../filtered_search/filtered_search_manager.js.es6 | 156 ++++++++++----------- 1 file changed, 71 insertions(+), 85 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 42fe0cace10..1b58fc01608 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,29 +1,81 @@ +/* eslint-disable no-param-reassign */ ((global) => { - const TOKEN_TYPE_STRING = 'string'; - const TOKEN_TYPE_ARRAY = 'array'; - const validTokenKeys = [{ key: 'author', type: 'string', param: 'username', - },{ + }, { key: 'assignee', type: 'string', param: 'username', - },{ + }, { key: 'milestone', type: 'string', param: 'title', - },{ + }, { key: 'label', type: 'array', param: 'name[]', - },]; + }]; + + function toggleClearSearchButton(event) { + const clearSearch = document.querySelector('.clear-search'); + + if (event.target.value) { + clearSearch.classList.remove('hidden'); + } else { + clearSearch.classList.add('hidden'); + } + } + + function loadSearchParamsFromURL() { + // We can trust that each param has one & since values containing & will be encoded + // Remove the first character of search as it is always ? + const params = window.location.search.slice(1).split('&'); + let inputValue = ''; + + params.forEach((p) => { + const split = p.split('='); + const key = decodeURIComponent(split[0]); + const value = split[1]; + + // Sanitize value since URL converts spaces into + + // Replace before decode so that we know what was originally + versus the encoded + + const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; + const match = validTokenKeys.find(t => key === `${t.key}_${t.param}`); + + if (match) { + const sanitizedKey = key.slice(0, key.indexOf('_')); + const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; + + const preferredQuotations = '"'; + let quotationsToUse = preferredQuotations; + + if (valueHasSpace) { + // Prefer ", but use ' if required + quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; + } + + inputValue += valueHasSpace ? `${sanitizedKey}:${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${sanitizedValue}`; + inputValue += ' '; + } else if (!match && key === 'search') { + inputValue += sanitizedValue; + inputValue += ' '; + } + }); + + // Trim the last space value + document.querySelector('.filtered-search').value = inputValue.trim(); + + if (inputValue.trim()) { + document.querySelector('.clear-search').classList.remove('hidden'); + } + } class FilteredSearchManager { constructor() { this.bindEvents(); - this.loadSearchParamsFromURL(); + loadSearchParamsFromURL(); this.clearTokens(); } @@ -32,7 +84,7 @@ const clearSearch = document.querySelector('.clear-search'); input.addEventListener('input', this.tokenize.bind(this)); - input.addEventListener('input', this.toggleClearSearchButton); + input.addEventListener('input', toggleClearSearchButton); input.addEventListener('keydown', this.checkForEnter.bind(this)); clearSearch.addEventListener('click', this.clearSearch.bind(this)); @@ -52,64 +104,6 @@ this.searchToken = ''; } - loadSearchParamsFromURL() { - // We can trust that each param has one & since values containing & will be encoded - // Remove the first character of search as it is always ? - const params = window.location.search.slice(1).split('&'); - let inputValue = ''; - - params.forEach((p) => { - const split = p.split('='); - const key = decodeURIComponent(split[0]); - const value = split[1]; - - // Sanitize value since URL converts spaces into + - // Replace before decode so that we know what was originally + versus the encoded + - const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; - - const match = validTokenKeys.find((t) => { - return key === `${t.key}_${t.param}`; - }); - - if (match) { - const sanitizedKey = key.slice(0, key.indexOf('_')); - const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; - - const preferredQuotations = '"'; - let quotationsToUse = preferredQuotations; - - if (valueHasSpace) { - // Prefer ", but use ' if required - quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; - } - - inputValue += valueHasSpace ? `${sanitizedKey}:${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${sanitizedValue}`; - inputValue += ' '; - - } else if (!match && key === 'search') { - inputValue += sanitizedValue; - inputValue += ' '; - } - }); - - // Trim the last space value - document.querySelector('.filtered-search').value = inputValue.trim(); - - if (inputValue.trim()) { - document.querySelector('.clear-search').classList.remove('hidden'); - } - } - - toggleClearSearchButton(event) { - const clearSearch = document.querySelector('.clear-search'); - - if (event.target.value) { - clearSearch.classList.remove('hidden'); - } else { - clearSearch.classList.add('hidden'); - } - } - tokenize(event) { // Re-calculate tokens this.clearTokens(); @@ -121,8 +115,9 @@ let incompleteToken = false; const addSearchTerm = function addSearchTerm(term) { - searchTerms += term + ' '; - } + // Add space for next term + searchTerms += `${term} `; + }; inputs.forEach((i) => { if (incompleteToken) { @@ -147,10 +142,7 @@ if (colonIndex !== -1) { const tokenKey = i.slice(0, colonIndex).toLowerCase(); const tokenValue = i.slice(colonIndex + 1); - - const match = validTokenKeys.find((v) => { - return v.key === tokenKey; - }); + const match = validTokenKeys.find(v => v.key === tokenKey); if (tokenValue.indexOf('"') !== -1) { lastQuotation = '"'; @@ -178,11 +170,9 @@ } printTokens() { - console.log('tokens:') - this.tokens.forEach((token) => { - console.log(token); - }) - console.log('search: ' + this.searchToken); + console.log('tokens:'); + this.tokens.forEach(token => console.log(token)); + console.log(`search: ${this.searchToken}`); } checkForEnter(event) { @@ -210,18 +200,14 @@ currentState = separatorIndex === -1 ? remaining : remaining.slice(0, separatorIndex); } - path += `&state=${currentState}` - + path += `&state=${currentState}`; this.tokens.forEach((token) => { - const param = validTokenKeys.find((t) => { - return t.key === token.key; - }).param; - + const param = validTokenKeys.find(t => t.key === token.key).param; path += `&${token.key}_${param}=${encodeURIComponent(token.value)}`; }); if (this.searchToken) { - path += '&search=' + encodeURIComponent(this.searchToken); + path += `&search=${encodeURIComponent(this.searchToken)}`; } window.location = path; -- cgit v1.2.1 From 3845bf377296f58e1604d44e4db529099e14888e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 9 Nov 2016 14:44:11 -0600 Subject: Add droplab --- app/assets/javascripts/droplab/droplab.js | 515 +++++++++++++++++++++++ app/assets/javascripts/droplab/droplab_ajax.js | 45 ++ app/assets/javascripts/droplab/droplab_filter.js | 28 ++ 3 files changed, 588 insertions(+) create mode 100644 app/assets/javascripts/droplab/droplab.js create mode 100644 app/assets/javascripts/droplab/droplab_ajax.js create mode 100644 app/assets/javascripts/droplab/droplab_filter.js (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js new file mode 100644 index 00000000000..18ca8be7203 --- /dev/null +++ b/app/assets/javascripts/droplab/droplab.js @@ -0,0 +1,515 @@ +/* eslint-disable */ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o0){ + if(!listItems[currentIndex-1]){ + currentIndex = currentIndex-1; + } + listItems[currentIndex-1].classList.add('dropdown-active'); + } + }; + + var mousedown = function mousedown(e) { + var list = e.detail.hook.list; + removeHighlight(list); + list.show(); + currentIndex = 0; + isUpArrow = false; + isDownArrow = false; + }; + var selectItem = function selectItem(list) { + var listItems = removeHighlight(list); + var currentItem = listItems[currentIndex-1]; + var listEvent = new CustomEvent('click.dl', { + detail: { + list: list, + selected: currentItem, + data: currentItem.dataset, + }, + }); + list.list.dispatchEvent(listEvent); + list.hide(); + } + + var keydown = function keydown(e){ + var typedOn = e.target; + isUpArrow = false; + isDownArrow = false; + + if(e.detail.which){ + currentKey = e.detail.which; + if(currentKey === 13){ + selectItem(e.detail.hook.list); + return; + } + if(currentKey === 38) { + isUpArrow = true; + } + if(currentKey === 40) { + isDownArrow = true; + } + } else if(e.detail.key) { + currentKey = e.detail.key; + if(currentKey === 'Enter'){ + selectItem(e.detail.hook.list); + return; + } + if(currentKey === 'ArrowUp') { + isUpArrow = true; + } + if(currentKey === 'ArrowDown') { + isDownArrow = true; + } + } + if(isUpArrow){ currentIndex--; } + if(isDownArrow){ currentIndex++; } + if(currentIndex < 0){ currentIndex = 0; } + setMenuForArrows(e.detail.hook.list); + }; + + w.addEventListener('mousedown.dl', mousedown); + w.addEventListener('keydown.dl', keydown); + }; +}); +},{"./window":11}],10:[function(require,module,exports){ +var DATA_TRIGGER = require('./constants').DATA_TRIGGER; +var DATA_DROPDOWN = require('./constants').DATA_DROPDOWN; + +var toDataCamelCase = function(attr){ + return this.camelize(attr.split('-').slice(1).join(' ')); +}; + +// the tiniest damn templating I can do +var t = function(s,d){ + for(var p in d) + s=s.replace(new RegExp('{{'+p+'}}','g'), d[p]); + return s; +}; + +var camelize = function(str) { + return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) { + return index == 0 ? letter.toLowerCase() : letter.toUpperCase(); + }).replace(/\s+/g, ''); +}; + +var closest = function(thisTag, stopTag) { + while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){ + thisTag = thisTag.parentNode; + } + return thisTag; +}; + +var isDropDownParts = function(target) { + if(target.tagName === 'HTML') { return false; } + return ( + target.hasAttribute(DATA_TRIGGER) || + target.hasAttribute(DATA_DROPDOWN) + ); +}; + +module.exports = { + toDataCamelCase: toDataCamelCase, + t: t, + camelize: camelize, + closest: closest, + isDropDownParts: isDropDownParts, +}; + +},{"./constants":1}],11:[function(require,module,exports){ +module.exports = function(callback) { + return (function() { + callback(this); + }).call(null); +}; + +},{}]},{},[8])(8) +}); diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js new file mode 100644 index 00000000000..23e43b352d6 --- /dev/null +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -0,0 +1,45 @@ +/* eslint-disable */ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o Date: Wed, 9 Nov 2016 17:07:30 -0600 Subject: Refactor tokenizer --- .../filtered_search/filtered_search_manager.js.es6 | 120 +++++---------------- .../filtered_search/filtered_search_tokenizer.es6 | 90 ++++++++++++++++ 2 files changed, 115 insertions(+), 95 deletions(-) create mode 100644 app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 1b58fc01608..58c64ea078d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -18,13 +18,21 @@ param: 'name[]', }]; + function clearSearch(event) { + event.stopPropagation(); + event.preventDefault(); + + document.querySelector('.filtered-search').value = ''; + document.querySelector('.clear-search').classList.add('hidden'); + } + function toggleClearSearchButton(event) { - const clearSearch = document.querySelector('.clear-search'); + const clearSearchButton = document.querySelector('.clear-search'); if (event.target.value) { - clearSearch.classList.remove('hidden'); + clearSearchButton.classList.remove('hidden'); } else { - clearSearch.classList.add('hidden'); + clearSearchButton.classList.add('hidden'); } } @@ -74,105 +82,24 @@ class FilteredSearchManager { constructor() { + this.tokenizer = new gl.FilteredSearchTokenizer(validTokenKeys); this.bindEvents(); loadSearchParamsFromURL(); - this.clearTokens(); } bindEvents() { - const input = document.querySelector('.filtered-search'); - const clearSearch = document.querySelector('.clear-search'); - - input.addEventListener('input', this.tokenize.bind(this)); - input.addEventListener('input', toggleClearSearchButton); - input.addEventListener('keydown', this.checkForEnter.bind(this)); + const filteredSearchInput = document.querySelector('.filtered-search'); - clearSearch.addEventListener('click', this.clearSearch.bind(this)); - } - - clearSearch(event) { - event.stopPropagation(); - event.preventDefault(); - - this.clearTokens(); - document.querySelector('.filtered-search').value = ''; - document.querySelector('.clear-search').classList.add('hidden'); - } + filteredSearchInput.addEventListener('input', this.processInput.bind(this)); + filteredSearchInput.addEventListener('input', toggleClearSearchButton); + filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this)); - clearTokens() { - this.tokens = []; - this.searchToken = ''; + document.querySelector('.clear-search').addEventListener('click', clearSearch); } - tokenize(event) { - // Re-calculate tokens - this.clearTokens(); - + processInput(event) { const input = event.target.value; - const inputs = input.split(' '); - let searchTerms = ''; - let lastQuotation = ''; - let incompleteToken = false; - - const addSearchTerm = function addSearchTerm(term) { - // Add space for next term - searchTerms += `${term} `; - }; - - inputs.forEach((i) => { - if (incompleteToken) { - const prevToken = this.tokens[this.tokens.length - 1]; - prevToken.value += ` ${i}`; - - // Remove last quotation - const lastQuotationRegex = new RegExp(lastQuotation, 'g'); - prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); - this.tokens[this.tokens.length - 1] = prevToken; - - // Check to see if this quotation completes the token value - if (i.indexOf(lastQuotation)) { - incompleteToken = !incompleteToken; - } - - return; - } - - const colonIndex = i.indexOf(':'); - - if (colonIndex !== -1) { - const tokenKey = i.slice(0, colonIndex).toLowerCase(); - const tokenValue = i.slice(colonIndex + 1); - const match = validTokenKeys.find(v => v.key === tokenKey); - - if (tokenValue.indexOf('"') !== -1) { - lastQuotation = '"'; - incompleteToken = true; - } else if (tokenValue.indexOf('\'') !== -1) { - lastQuotation = '\''; - incompleteToken = true; - } - - if (match && tokenValue.length > 0) { - this.tokens.push({ - key: match.key, - value: tokenValue, - }); - } else { - addSearchTerm(i); - } - } else { - addSearchTerm(i); - } - }, this); - - this.searchToken = searchTerms.trim(); - this.printTokens(); - } - - printTokens() { - console.log('tokens:'); - this.tokens.forEach(token => console.log(token)); - console.log(`search: ${this.searchToken}`); + this.tokenizer.processTokens(input); } checkForEnter(event) { @@ -193,6 +120,9 @@ const defaultState = 'opened'; let currentState = defaultState; + const tokens = this.tokenizer.getTokens(); + const searchToken = this.tokenizer.getSearchToken(); + if (stateIndex !== -1) { const remaining = currentPath.slice(stateIndex + 6); const separatorIndex = remaining.indexOf('&'); @@ -201,13 +131,13 @@ } path += `&state=${currentState}`; - this.tokens.forEach((token) => { + tokens.forEach((token) => { const param = validTokenKeys.find(t => t.key === token.key).param; path += `&${token.key}_${param}=${encodeURIComponent(token.value)}`; }); - if (this.searchToken) { - path += `&search=${encodeURIComponent(this.searchToken)}`; + if (searchToken) { + path += `&search=${encodeURIComponent(searchToken)}`; } window.location = path; diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 new file mode 100644 index 00000000000..f6cc1b8860d --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -0,0 +1,90 @@ +/* eslint-disable no-param-reassign */ +((global) => { + class FilteredSearchTokenizer { + constructor(validTokenKeys) { + this.validTokenKeys = validTokenKeys; + this.resetTokens(); + } + + getTokens() { + return this.tokens; + } + + getSearchToken() { + return this.searchToken; + } + + resetTokens() { + this.tokens = []; + this.searchToken = ''; + } + + printTokens() { + console.log('tokens:'); + this.tokens.forEach(token => console.log(token)); + console.log(`search: ${this.searchToken}`); + } + + processTokens(input) { + // Re-calculate tokens + this.resetTokens(); + + const inputs = input.split(' '); + let searchTerms = ''; + let lastQuotation = ''; + let incompleteToken = false; + + inputs.forEach((i) => { + if (incompleteToken) { + const prevToken = this.tokens[this.tokens.length - 1]; + prevToken.value += ` ${i}`; + + // Remove last quotation + const lastQuotationRegex = new RegExp(lastQuotation, 'g'); + prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); + this.tokens[this.tokens.length - 1] = prevToken; + + // Check to see if this quotation completes the token value + if (i.indexOf(lastQuotation)) { + incompleteToken = !incompleteToken; + } + + return; + } + + const colonIndex = i.indexOf(':'); + + if (colonIndex !== -1) { + const tokenKey = i.slice(0, colonIndex).toLowerCase(); + const tokenValue = i.slice(colonIndex + 1); + const match = this.validTokenKeys.find(v => v.key === tokenKey); + + if (tokenValue.indexOf('"') !== -1) { + lastQuotation = '"'; + incompleteToken = true; + } else if (tokenValue.indexOf('\'') !== -1) { + lastQuotation = '\''; + incompleteToken = true; + } + + if (match && tokenValue.length > 0) { + this.tokens.push({ + key: match.key, + value: tokenValue, + }); + + return; + } + } + + // Add space for next term + searchTerms += `${i} `; + }, this); + + this.searchToken = searchTerms.trim(); + this.printTokens(); + } + } + + global.FilteredSearchTokenizer = FilteredSearchTokenizer; +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From 8b4e4e333db0cf47080aa8577b4351b9e00525ea Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 9 Nov 2016 19:10:15 -0600 Subject: Fix JS for tests --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 7 ++++--- .../javascripts/filtered_search/filtered_search_tokenizer.es6 | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 58c64ea078d..db414b9755d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -50,7 +50,7 @@ // Sanitize value since URL converts spaces into + // Replace before decode so that we know what was originally + versus the encoded + const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; - const match = validTokenKeys.find(t => key === `${t.key}_${t.param}`); + const match = validTokenKeys.filter(t => key === `${t.key}_${t.param}`)[0]; if (match) { const sanitizedKey = key.slice(0, key.indexOf('_')); @@ -103,7 +103,8 @@ } checkForEnter(event) { - if (event.key === 'Enter') { + // Enter KeyCode + if (event.keyCode === 13) { event.stopPropagation(); event.preventDefault(); this.search(); @@ -132,7 +133,7 @@ path += `&state=${currentState}`; tokens.forEach((token) => { - const param = validTokenKeys.find(t => t.key === token.key).param; + const param = validTokenKeys.filter(t => t.key === token.key)[0].param; path += `&${token.key}_${param}=${encodeURIComponent(token.value)}`; }); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index f6cc1b8860d..ddb173b2d98 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -57,7 +57,7 @@ if (colonIndex !== -1) { const tokenKey = i.slice(0, colonIndex).toLowerCase(); const tokenValue = i.slice(colonIndex + 1); - const match = this.validTokenKeys.find(v => v.key === tokenKey); + const match = this.validTokenKeys.filter(v => v.key === tokenKey)[0]; if (tokenValue.indexOf('"') !== -1) { lastQuotation = '"'; -- cgit v1.2.1 From 9c8a86f60d2d36b628c5275004e4c17aa07aeeeb Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 10 Nov 2016 16:49:12 -0600 Subject: Update filter issue specs --- app/assets/stylesheets/framework/filters.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 90b9394b207..c679a3833e9 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -24,10 +24,12 @@ } .filtered-search-container { + display: -webkit-flex; display: flex; } .filtered-search-input-container { + display: -webkit-flex; display: flex; position: relative; width: 100%; -- cgit v1.2.1 From f20875ec4557b23d6df810bd49e1955f5fbbd6e0 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 11 Nov 2016 11:56:47 -0600 Subject: Add username to gon --- app/assets/javascripts/search_autocomplete.js.es6 | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/search_autocomplete.js.es6 b/app/assets/javascripts/search_autocomplete.js.es6 index 437f5dbbf7d..cec8856d4e7 100644 --- a/app/assets/javascripts/search_autocomplete.js.es6 +++ b/app/assets/javascripts/search_autocomplete.js.es6 @@ -142,8 +142,9 @@ } getCategoryContents() { - var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, utils; + var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, userName, utils; userId = gon.current_user_id; + userName = gon.current_username; utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions; if (utils.isInGroupsPage() && groupOptions) { options = groupOptions[utils.getGroupSlug()]; @@ -158,10 +159,10 @@ header: "" + name }, { text: 'Issues assigned to me', - url: issuesPath + "/?assignee_id=" + userId + url: issuesPath + "/?assignee_username=" + userName }, { text: "Issues I've created", - url: issuesPath + "/?author_id=" + userId + url: issuesPath + "/?author_username=" + userName }, 'separator', { text: 'Merge requests assigned to me', url: mrPath + "/?assignee_id=" + userId -- cgit v1.2.1 From 01eb0571f0498225c3d75df419b8a50a47739dc8 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 14 Nov 2016 10:37:55 -0600 Subject: Resolve MR review suggestions --- .../filtered_search/filtered_search_bundle.js | 6 ----- .../filtered_search/filtered_search_manager.js.es6 | 28 +++++++++++----------- .../filtered_search/filtered_search_tokenizer.es6 | 2 +- 3 files changed, 15 insertions(+), 21 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js index 656979ba82f..d188718c5f3 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_bundle.js +++ b/app/assets/javascripts/filtered_search/filtered_search_bundle.js @@ -1,4 +1,3 @@ - /* eslint-disable */ // This is a manifest file that'll be compiled into including all the files listed below. // Add new JavaScript code in separate files in this directory and they'll automatically // be included in the compiled file accessible from http://example.com/assets/application.js @@ -6,8 +5,3 @@ // the compiled file. // /*= require_tree . */ - - (function() { - - }).call(this); - \ No newline at end of file diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index db414b9755d..26b9d334545 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -18,22 +18,22 @@ param: 'name[]', }]; - function clearSearch(event) { - event.stopPropagation(); - event.preventDefault(); + function clearSearch(e) { + e.stopPropagation(); + e.preventDefault(); document.querySelector('.filtered-search').value = ''; document.querySelector('.clear-search').classList.add('hidden'); } - function toggleClearSearchButton(event) { + function toggleClearSearchButton(e) { const clearSearchButton = document.querySelector('.clear-search'); if (event.target.value) { - clearSearchButton.classList.remove('hidden'); - } else { - clearSearchButton.classList.add('hidden'); - } + clearSearchButton.classList.remove('hidden'); + } else { + clearSearchButton.classList.add('hidden'); + } } function loadSearchParamsFromURL() { @@ -97,16 +97,16 @@ document.querySelector('.clear-search').addEventListener('click', clearSearch); } - processInput(event) { - const input = event.target.value; + processInput(e) { + const input = e.target.value; this.tokenizer.processTokens(input); } - checkForEnter(event) { + checkForEnter(e) { // Enter KeyCode - if (event.keyCode === 13) { - event.stopPropagation(); - event.preventDefault(); + if (e.keyCode === 13) { + e.stopPropagation(); + e.preventDefault(); this.search(); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index ddb173b2d98..de91081edfa 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -36,7 +36,7 @@ inputs.forEach((i) => { if (incompleteToken) { - const prevToken = this.tokens[this.tokens.length - 1]; + const prevToken = this.tokens.last(); prevToken.value += ` ${i}`; // Remove last quotation -- cgit v1.2.1 From 329b03b3c3fa51f365dee867cf4d8cef5ad23d4e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 14 Nov 2016 13:22:32 -0600 Subject: Add token symbol matching --- .../filtered_search/filtered_search_manager.js.es6 | 94 ++++++++++++++++------ .../filtered_search/filtered_search_tokenizer.es6 | 10 ++- 2 files changed, 78 insertions(+), 26 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 26b9d334545..31e570bd6b6 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -4,18 +4,37 @@ key: 'author', type: 'string', param: 'username', + symbol: '@', }, { key: 'assignee', type: 'string', param: 'username', + symbol: '@', + conditions: [{ + keyword: 'none', + url: 'assignee_id=0', + }] }, { key: 'milestone', type: 'string', param: 'title', + symbol: '%', + conditions: [{ + keyword: 'none', + url: 'milestone_title=No+Milestone', + }, { + keyword: 'upcoming', + url: 'milestone_title=%23upcoming', + }] }, { key: 'label', type: 'array', param: 'name[]', + symbol: '~', + conditions: [{ + keyword: 'none', + url: 'label_name[]=No+Label', + }] }]; function clearSearch(e) { @@ -47,28 +66,42 @@ const key = decodeURIComponent(split[0]); const value = split[1]; - // Sanitize value since URL converts spaces into + - // Replace before decode so that we know what was originally + versus the encoded + - const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; - const match = validTokenKeys.filter(t => key === `${t.key}_${t.param}`)[0]; - - if (match) { - const sanitizedKey = key.slice(0, key.indexOf('_')); - const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; - - const preferredQuotations = '"'; - let quotationsToUse = preferredQuotations; - - if (valueHasSpace) { - // Prefer ", but use ' if required - quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; + // Check if it matches edge conditions listed in validTokenKeys + let conditionIndex = 0; + const validCondition = validTokenKeys.filter(v => v.conditions && v.conditions.filter((c, index) => { + if (c.url === p) { + conditionIndex = index; + } + return c.url === p; + })[0])[0]; + + if (validCondition) { + inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; + } else { + // Sanitize value since URL converts spaces into + + // Replace before decode so that we know what was originally + versus the encoded + + const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; + const match = validTokenKeys.filter(t => key === `${t.key}_${t.param}`)[0]; + + if (match) { + const sanitizedKey = key.slice(0, key.indexOf('_')); + const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; + const symbol = match.symbol; + + const preferredQuotations = '"'; + let quotationsToUse = preferredQuotations; + + if (valueHasSpace) { + // Prefer ", but use ' if required + quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; + } + + inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`; + inputValue += ' '; + } else if (!match && key === 'search') { + inputValue += sanitizedValue; + inputValue += ' '; } - - inputValue += valueHasSpace ? `${sanitizedKey}:${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${sanitizedValue}`; - inputValue += ' '; - } else if (!match && key === 'search') { - inputValue += sanitizedValue; - inputValue += ' '; } }); @@ -133,8 +166,23 @@ path += `&state=${currentState}`; tokens.forEach((token) => { - const param = validTokenKeys.filter(t => t.key === token.key)[0].param; - path += `&${token.key}_${param}=${encodeURIComponent(token.value)}`; + const match = validTokenKeys.filter(t => t.key === token.key)[0]; + let tokenPath = ''; + + if (token.wildcard && match.conditions) { + const condition = match.conditions.filter(c => c.keyword === token.value.toLowerCase())[0]; + + if (condition) { + tokenPath = `${condition.url}`; + } + } else if (!token.wildcard) { + // Remove the wildcard token + tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value.slice(1))}`; + } else { + tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value)}`; + } + + path += `&${tokenPath}`; }); if (searchToken) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index de91081edfa..c3e5e817c9e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -57,7 +57,10 @@ if (colonIndex !== -1) { const tokenKey = i.slice(0, colonIndex).toLowerCase(); const tokenValue = i.slice(colonIndex + 1); - const match = this.validTokenKeys.filter(v => v.key === tokenKey)[0]; + const tokenSymbol = tokenValue[0]; + console.log(tokenSymbol) + const keyMatch = this.validTokenKeys.filter(v => v.key === tokenKey)[0]; + const symbolMatch = this.validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; if (tokenValue.indexOf('"') !== -1) { lastQuotation = '"'; @@ -67,10 +70,11 @@ incompleteToken = true; } - if (match && tokenValue.length > 0) { + if (keyMatch && tokenValue.length > 0) { this.tokens.push({ - key: match.key, + key: keyMatch.key, value: tokenValue, + wildcard: symbolMatch ? false : true, }); return; -- cgit v1.2.1 From 8e3a52cfd68302ed75ffb89de3a08d1f70f876ad Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 14 Nov 2016 17:45:26 -0600 Subject: Fix eslint --- .../filtered_search/filtered_search_manager.js.es6 | 32 ++++++++++++---------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 31e570bd6b6..8568bf78416 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -13,7 +13,7 @@ conditions: [{ keyword: 'none', url: 'assignee_id=0', - }] + }], }, { key: 'milestone', type: 'string', @@ -25,7 +25,7 @@ }, { keyword: 'upcoming', url: 'milestone_title=%23upcoming', - }] + }], }, { key: 'label', type: 'array', @@ -34,7 +34,7 @@ conditions: [{ keyword: 'none', url: 'label_name[]=No+Label', - }] + }], }]; function clearSearch(e) { @@ -48,11 +48,11 @@ function toggleClearSearchButton(e) { const clearSearchButton = document.querySelector('.clear-search'); - if (event.target.value) { - clearSearchButton.classList.remove('hidden'); - } else { - clearSearchButton.classList.add('hidden'); - } + if (e.target.value) { + clearSearchButton.classList.remove('hidden'); + } else { + clearSearchButton.classList.add('hidden'); + } } function loadSearchParamsFromURL() { @@ -68,12 +68,13 @@ // Check if it matches edge conditions listed in validTokenKeys let conditionIndex = 0; - const validCondition = validTokenKeys.filter(v => v.conditions && v.conditions.filter((c, index) => { - if (c.url === p) { - conditionIndex = index; - } - return c.url === p; - })[0])[0]; + const validCondition = validTokenKeys + .filter(v => v.conditions && v.conditions.filter((c, index) => { + if (c.url === p) { + conditionIndex = index; + } + return c.url === p; + })[0])[0]; if (validCondition) { inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; @@ -170,7 +171,8 @@ let tokenPath = ''; if (token.wildcard && match.conditions) { - const condition = match.conditions.filter(c => c.keyword === token.value.toLowerCase())[0]; + const condition = match.conditions + .filter(c => c.keyword === token.value.toLowerCase())[0]; if (condition) { tokenPath = `${condition.url}`; -- cgit v1.2.1 From 976893ec2fa1e4289f5d923a41d296e170bdf3af Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 14 Nov 2016 22:14:29 -0600 Subject: Add support for labels containing single/double quote --- .../filtered_search/filtered_search_tokenizer.es6 | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index c3e5e817c9e..eab805c4714 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -62,10 +62,20 @@ const keyMatch = this.validTokenKeys.filter(v => v.key === tokenKey)[0]; const symbolMatch = this.validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; - if (tokenValue.indexOf('"') !== -1) { + const doubleQuoteIndex = tokenValue.indexOf('"'); + const singleQuoteIndex = tokenValue.indexOf('\''); + + const doubleQuoteExist = doubleQuoteIndex !== -1; + const singleQuoteExist = singleQuoteIndex !== -1; + + if ((doubleQuoteExist && !singleQuoteExist) || + (doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex)) { + // " is found and is in front of ' (if any) lastQuotation = '"'; incompleteToken = true; - } else if (tokenValue.indexOf('\'') !== -1) { + } else if ((singleQuoteExist && !doubleQuoteExist) || + (doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex)) { + // ' is found and is in front of " (if any) lastQuotation = '\''; incompleteToken = true; } -- cgit v1.2.1 From 8ecc2117db3a38961785fcaa4b49bd6de13371d4 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 30 Nov 2016 12:30:52 -0600 Subject: Refactor validTokenKeys --- .../filtered_search/filtered_search_manager.js.es6 | 51 +++--------------- .../filtered_search_token_keys.js.es6 | 45 ++++++++++++++++ .../filtered_search/filtered_search_tokenizer.es6 | 60 +++++++++++----------- 3 files changed, 81 insertions(+), 75 deletions(-) create mode 100644 app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 8568bf78416..3899181a352 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,42 +1,5 @@ /* eslint-disable no-param-reassign */ ((global) => { - const validTokenKeys = [{ - key: 'author', - type: 'string', - param: 'username', - symbol: '@', - }, { - key: 'assignee', - type: 'string', - param: 'username', - symbol: '@', - conditions: [{ - keyword: 'none', - url: 'assignee_id=0', - }], - }, { - key: 'milestone', - type: 'string', - param: 'title', - symbol: '%', - conditions: [{ - keyword: 'none', - url: 'milestone_title=No+Milestone', - }, { - keyword: 'upcoming', - url: 'milestone_title=%23upcoming', - }], - }, { - key: 'label', - type: 'array', - param: 'name[]', - symbol: '~', - conditions: [{ - keyword: 'none', - url: 'label_name[]=No+Label', - }], - }]; - function clearSearch(e) { e.stopPropagation(); e.preventDefault(); @@ -66,9 +29,9 @@ const key = decodeURIComponent(split[0]); const value = split[1]; - // Check if it matches edge conditions listed in validTokenKeys + // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get() let conditionIndex = 0; - const validCondition = validTokenKeys + const validCondition = gl.FilteredSearchTokenKeys.get() .filter(v => v.conditions && v.conditions.filter((c, index) => { if (c.url === p) { conditionIndex = index; @@ -82,7 +45,7 @@ // Sanitize value since URL converts spaces into + // Replace before decode so that we know what was originally + versus the encoded + const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; - const match = validTokenKeys.filter(t => key === `${t.key}_${t.param}`)[0]; + const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0]; if (match) { const sanitizedKey = key.slice(0, key.indexOf('_')); @@ -116,7 +79,7 @@ class FilteredSearchManager { constructor() { - this.tokenizer = new gl.FilteredSearchTokenizer(validTokenKeys); + this.tokenizer = gl.FilteredSearchTokenizer; this.bindEvents(); loadSearchParamsFromURL(); } @@ -131,6 +94,7 @@ document.querySelector('.clear-search').addEventListener('click', clearSearch); } + // TODO: This is only used for testing, remove when going to PRO processInput(e) { const input = e.target.value; this.tokenizer.processTokens(input); @@ -155,8 +119,7 @@ const defaultState = 'opened'; let currentState = defaultState; - const tokens = this.tokenizer.getTokens(); - const searchToken = this.tokenizer.getSearchToken(); + const { tokens, searchToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value); if (stateIndex !== -1) { const remaining = currentPath.slice(stateIndex + 6); @@ -167,7 +130,7 @@ path += `&state=${currentState}`; tokens.forEach((token) => { - const match = validTokenKeys.filter(t => t.key === token.key)[0]; + const match = gl.FilteredSearchTokenKeys.get().filter(t => t.key === token.key)[0]; let tokenPath = ''; if (token.wildcard && match.conditions) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 new file mode 100644 index 00000000000..8d38a29a354 --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 @@ -0,0 +1,45 @@ +/* eslint-disable no-param-reassign */ +((global) => { + class FilteredSearchTokenKeys { + static get() { + return [{ + key: 'author', + type: 'string', + param: 'username', + symbol: '@', + }, { + key: 'assignee', + type: 'string', + param: 'username', + symbol: '@', + conditions: [{ + keyword: 'none', + url: 'assignee_id=0', + }], + }, { + key: 'milestone', + type: 'string', + param: 'title', + symbol: '%', + conditions: [{ + keyword: 'none', + url: 'milestone_title=No+Milestone', + }, { + keyword: 'upcoming', + url: 'milestone_title=%23upcoming', + }], + }, { + key: 'label', + type: 'array', + param: 'name[]', + symbol: '~', + conditions: [{ + keyword: 'none', + url: 'label_name[]=No+Label', + }], + }]; + } + } + + global.FilteredSearchTokenKeys = FilteredSearchTokenKeys; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index eab805c4714..b1f37443aa1 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -1,33 +1,20 @@ /* eslint-disable no-param-reassign */ ((global) => { class FilteredSearchTokenizer { - constructor(validTokenKeys) { - this.validTokenKeys = validTokenKeys; - this.resetTokens(); - } - - getTokens() { - return this.tokens; - } - - getSearchToken() { - return this.searchToken; - } - - resetTokens() { - this.tokens = []; - this.searchToken = ''; - } - - printTokens() { + // TODO: Remove when going to pro + static printTokens(tokens, searchToken, lastToken) { console.log('tokens:'); - this.tokens.forEach(token => console.log(token)); - console.log(`search: ${this.searchToken}`); + tokens.forEach(token => console.log(token)); + console.log(`search: ${searchToken}`); + console.log('last token:'); + console.log(lastToken); } - processTokens(input) { - // Re-calculate tokens - this.resetTokens(); + static processTokens(input) { + let tokens = []; + let searchToken = ''; + let lastToken = ''; + const validTokenKeys = gl.FilteredSearchTokenKeys.get(); const inputs = input.split(' '); let searchTerms = ''; @@ -36,16 +23,17 @@ inputs.forEach((i) => { if (incompleteToken) { - const prevToken = this.tokens.last(); + const prevToken = tokens.last(); prevToken.value += ` ${i}`; // Remove last quotation const lastQuotationRegex = new RegExp(lastQuotation, 'g'); prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); - this.tokens[this.tokens.length - 1] = prevToken; + tokens[tokens.length - 1] = prevToken; // Check to see if this quotation completes the token value if (i.indexOf(lastQuotation)) { + lastToken = tokens.last(); incompleteToken = !incompleteToken; } @@ -59,8 +47,8 @@ const tokenValue = i.slice(colonIndex + 1); const tokenSymbol = tokenValue[0]; console.log(tokenSymbol) - const keyMatch = this.validTokenKeys.filter(v => v.key === tokenKey)[0]; - const symbolMatch = this.validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; + const keyMatch = validTokenKeys.filter(v => v.key === tokenKey)[0]; + const symbolMatch = validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; const doubleQuoteIndex = tokenValue.indexOf('"'); const singleQuoteIndex = tokenValue.indexOf('\''); @@ -81,11 +69,12 @@ } if (keyMatch && tokenValue.length > 0) { - this.tokens.push({ + tokens.push({ key: keyMatch.key, value: tokenValue, wildcard: symbolMatch ? false : true, }); + lastToken = tokens.last(); return; } @@ -93,10 +82,19 @@ // Add space for next term searchTerms += `${i} `; + lastToken = i; }, this); - this.searchToken = searchTerms.trim(); - this.printTokens(); + searchToken = searchTerms.trim(); + + // TODO: Remove when going to PRO + gl.FilteredSearchTokenizer.printTokens(tokens, searchToken, lastToken); + + return { + tokens, + searchToken, + lastToken, + }; } } -- cgit v1.2.1 From 3492ff6784ffdd72db2863aa982426b29245ed69 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 30 Nov 2016 12:32:10 -0600 Subject: Add static methods for dropdowns to interface with --- .../filtered_search/filtered_search_manager.js.es6 | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 3899181a352..09a7779635f 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -84,6 +84,21 @@ loadSearchParamsFromURL(); } + static fillInWord(word) { + const originalValue = document.querySelector('.filtered-search').value; + document.querySelector('.filtered-search').value = `${originalValue} ${word.trim()}`; + } + + static loadDropdown(dropdownName) { + dropdownName = dropdownName.toLowerCase(); + + const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; + + if (match) { + console.log(`🦄 load ${match.key} dropdown`); + } + } + bindEvents() { const filteredSearchInput = document.querySelector('.filtered-search'); -- cgit v1.2.1 From 64d46a3e80001c2dc13f6fd04e2abac40ee9d093 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 30 Nov 2016 15:18:17 -0600 Subject: Add logic for dynamically selecting which dropdown to load [skip ci] --- .../filtered_search/filtered_search_manager.js.es6 | 55 ++++++++++++++++++---- .../filtered_search/filtered_search_tokenizer.es6 | 35 ++++++++++---- 2 files changed, 71 insertions(+), 19 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 09a7779635f..8903f382c18 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -77,42 +77,77 @@ } } + let dropdownHint; + class FilteredSearchManager { constructor() { this.tokenizer = gl.FilteredSearchTokenizer; this.bindEvents(); loadSearchParamsFromURL(); + this.setDropdown(); } - static fillInWord(word) { - const originalValue = document.querySelector('.filtered-search').value; - document.querySelector('.filtered-search').value = `${originalValue} ${word.trim()}`; + static addWordToInput(word, addSpace) { + const hasExistingValue = document.querySelector('.filtered-search').value.length !== 0; + document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word; } - static loadDropdown(dropdownName) { + loadDropdown(dropdownName = '') { dropdownName = dropdownName.toLowerCase(); const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; - if (match) { + if (match && this.currentDropdown !== match.key) { console.log(`🦄 load ${match.key} dropdown`); + this.currentDropdown = match.key; + } else if (!match && this.currentDropdown !== 'hint') { + console.log('🦄 load hint dropdown'); + this.currentDropdown = 'hint'; + + if (!dropdownHint) { + dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search')) + } + + dropdownHint.render(); + } + } + + setDropdown() { + const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value); + + if (typeof lastToken === 'string') { + // Token is not fully initialized yet + // because it has no value + // Eg. token = 'label:' + const { tokenKey } = this.tokenizer.parseToken(lastToken); + this.loadDropdown(tokenKey); + } else if (lastToken.hasOwnProperty('key')) { + // Token has been initialized into an object + // because it has a value + this.loadDropdown(lastToken.key); + } else { + this.loadDropdown('hint'); } } bindEvents() { const filteredSearchInput = document.querySelector('.filtered-search'); - filteredSearchInput.addEventListener('input', this.processInput.bind(this)); + filteredSearchInput.addEventListener('input', this.setDropdown.bind(this)); filteredSearchInput.addEventListener('input', toggleClearSearchButton); filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this)); - document.querySelector('.clear-search').addEventListener('click', clearSearch); } - // TODO: This is only used for testing, remove when going to PRO - processInput(e) { + checkDropdownToken(e) { const input = e.target.value; - this.tokenizer.processTokens(input); + const { lastToken } = this.tokenizer.processTokens(input); + + // Check for dropdown token + if (lastToken[lastToken.length - 1] === ':') { + const token = lastToken.slice(0, -1); + + } } checkForEnter(e) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index b1f37443aa1..b686a43cf32 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -3,11 +3,30 @@ class FilteredSearchTokenizer { // TODO: Remove when going to pro static printTokens(tokens, searchToken, lastToken) { - console.log('tokens:'); - tokens.forEach(token => console.log(token)); - console.log(`search: ${searchToken}`); - console.log('last token:'); - console.log(lastToken); + // console.log('tokens:'); + // tokens.forEach(token => console.log(token)); + // console.log(`search: ${searchToken}`); + // console.log('last token:'); + // console.log(lastToken); + } + + static parseToken(input) { + const colonIndex = input.indexOf(':'); + let tokenKey; + let tokenValue; + let tokenSymbol; + + if (colonIndex !== -1) { + tokenKey = input.slice(0, colonIndex).toLowerCase(); + tokenValue = input.slice(colonIndex + 1); + tokenSymbol = tokenValue[0]; + } + + return { + tokenKey, + tokenValue, + tokenSymbol, + } } static processTokens(input) { @@ -43,10 +62,8 @@ const colonIndex = i.indexOf(':'); if (colonIndex !== -1) { - const tokenKey = i.slice(0, colonIndex).toLowerCase(); - const tokenValue = i.slice(colonIndex + 1); - const tokenSymbol = tokenValue[0]; - console.log(tokenSymbol) + const { tokenKey, tokenValue, tokenSymbol } = gl.FilteredSearchTokenizer.parseToken(i); + const keyMatch = validTokenKeys.filter(v => v.key === tokenKey)[0]; const symbolMatch = validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; -- cgit v1.2.1 From 3c0755809f82b4eed5913f1994f57ccffffb4686 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 30 Nov 2016 15:25:10 -0600 Subject: Add dropdown hint --- .../filtered_search/dropdown_hint.js.es6 | 106 +++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 app/assets/javascripts/filtered_search/dropdown_hint.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 new file mode 100644 index 00000000000..ebbd43ad8e0 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -0,0 +1,106 @@ +/* eslint-disable no-param-reassign */ +((global) => { + const dropdownData = [{ + icon: 'fa-search', + hint: 'Keep typing and press Enter', + tag: '', + },{ + icon: 'fa-pencil', + hint: 'author:', + tag: '<author>' + },{ + icon: 'fa-user', + hint: 'assignee:', + tag: '<assignee>', + },{ + icon: 'fa-clock-o', + hint: 'milestone:', + tag: '<milestone>', + },{ + icon: 'fa-tag', + hint: 'label:', + tag: '<label>', + }]; + + class DropdownHint { + constructor(dropdown, input) { + this.input = input; + this.dropdown = dropdown; + this.bindEvents(); + } + + bindEvents() { + this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this)); + } + + unbindEvents() { + this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this)); + } + + // cleanup() { + // this.unbindEvents(); + // droplab.setConfig({'filtered-search': {}}); + // droplab.setData('filtered-search', []); + // this.dropdown.style.display = 'hidden'; + // } + + getSelectedText(selectedToken) { + // TODO: Get last word from FilteredSearchTokenizer + const lastWord = this.input.value.split(' ').last(); + const lastWordIndex = selectedToken.indexOf(lastWord); + + return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); + } + + itemClicked(e) { + const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim(); + const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim(); + + if (tag.length) { + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); + } + + this.input.focus(); + this.dismissDropdown(); + + // Propogate input change to FilteredSearchManager + // so that it can determine which dropdowns to open + this.input.dispatchEvent(new Event('input')); + } + + dismissDropdown() { + this.input.removeAttribute('data-dropdown-trigger'); + droplab.setConfig({'filtered-search': {}}); + droplab.setData('filtered-search', []); + this.unbindEvents(); + } + + setAsDropdown() { + this.input.setAttribute('data-dropdown-trigger', '#js-dropdown-hint'); + // const hookId = 'filtered-search'; + // const listId = 'js-dropdown-hint'; + // const hook = droplab.hooks.filter((h) => { + // return h.id === hookId; + // })[0]; + + // if (hook.list.list.id !== listId) { + // droplab.changeHookList(hookId, `#${listId}`); + // } + } + + render() { + console.log('render dropdown hint'); + this.setAsDropdown(); + + droplab.setConfig({ + 'filtered-search': { + text: 'hint' + } + }); + + droplab.setData('filtered-search', dropdownData); + } + } + + global.DropdownHint = DropdownHint; +})(window.gl || (window.gl = {})); -- cgit v1.2.1 From a1ca5c76ab44e306fb4fb4adcfe5ea2214bd5abc Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 2 Dec 2016 15:02:54 -0600 Subject: Add droplab updates --- app/assets/javascripts/application.js | 1 + app/assets/javascripts/droplab/droplab.js | 98 +++++++++++++++++++----- app/assets/javascripts/droplab/droplab_filter.js | 12 ++- 3 files changed, 86 insertions(+), 25 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e43afbb4cc9..f0615481ed2 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -58,6 +58,7 @@ /*= require_directory ./extensions */ /*= require_directory ./lib/utils */ /*= require_directory ./u2f */ +/*= require_directory ./droplab */ /*= require_directory . */ /*= require fuzzaldrin-plus */ /*= require es6-promise.auto */ diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 18ca8be7203..56582e71b61 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -38,6 +38,7 @@ var DropDown = function(list, trigger) { this.items = []; this.getItems(); this.addEvents(); + this.initialState = list.innerHTML; }; Object.assign(DropDown.prototype, { @@ -50,7 +51,8 @@ Object.assign(DropDown.prototype, { var self = this; // event delegation. this.list.addEventListener('click', function(e) { - if(e.target.tagName === 'A') { + if(e.target.tagName === 'A' || e.target.tagName === 'button') { + e.preventDefault(); self.hide(); var listEvent = new CustomEvent('click.dl', { detail: { @@ -72,6 +74,11 @@ Object.assign(DropDown.prototype, { } }, + setData: function(data) { + this.data = data; + this.render(data); + }, + addData: function(data) { this.data = (this.data || []).concat(data); this.render(data); @@ -155,8 +162,17 @@ require('./window')(function(w){ addData: function () { var args = [].slice.apply(arguments); + this.applyArgs(args, '_addData'); + }, + + setData: function() { + var args = [].slice.apply(arguments); + this.applyArgs(args, '_setData'); + }, + + applyArgs: function(args, methodName) { if(this.ready) { - this._addData.apply(this, args); + this[methodName].apply(this, args); } else { this.queuedData = this.queuedData || []; this.queuedData.push(args); @@ -164,10 +180,18 @@ require('./window')(function(w){ }, _addData: function(trigger, data) { + this._processData(trigger, data, 'addData'); + }, + + _setData: function(trigger, data) { + this._processData(trigger, data, 'setData'); + }, + + _processData: function(trigger, data, methodName) { this.hooks.forEach(function(hook) { if(hook.trigger.dataset.hasOwnProperty('id')) { if(hook.trigger.dataset.id === trigger) { - hook.list.addData(data); + hook.list[methodName](data); } } }); @@ -189,21 +213,48 @@ require('./window')(function(w){ }); }, - addHook: function(hook) { + changeHookList: function(trigger, list) { + trigger = document.querySelector('[data-id="'+trigger+'"]'); + list = document.querySelector(list); + this.hooks.every(function(hook, i) { + if(hook.trigger === trigger) { + // Restore initial State + hook.list.list.innerHTML = hook.list.initialState; + hook.list.hide(); + hook.trigger.removeEventListener('mousedown', hook.events.mousedown); + hook.trigger.removeEventListener('input', hook.events.input); + hook.trigger.removeEventListener('keyup', hook.events.keyup); + hook.trigger.removeEventListener('keydown', hook.events.keydown); + this.hooks.splice(i, 1); + this.addHook(trigger, list); + return false; + } + return true + }.bind(this)); + }, + + addHook: function(hook, list) { if(!(hook instanceof HTMLElement) && typeof hook === 'string'){ hook = document.querySelector(hook); } - var list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]); - if(hook.tagName === 'A' || hook.tagName === 'BUTTON') { - this.hooks.push(new HookButton(hook, list)); - } else if(hook.tagName === 'INPUT') { - this.hooks.push(new HookInput(hook, list)); + if(!list){ + list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]); + } + + if(hook) { + if(hook.tagName === 'A' || hook.tagName === 'BUTTON') { + this.hooks.push(new HookButton(hook, list)); + } else if(hook.tagName === 'INPUT') { + this.hooks.push(new HookInput(hook, list)); + } } return this; }, addHooks: function(hooks) { - hooks.forEach(this.addHook.bind(this)); + hooks.forEach(function(hook) { + this.addHook(hook, null); + }.bind(this)); return this; }, @@ -302,7 +353,8 @@ var HookInput = function(trigger, list) { Object.assign(HookInput.prototype, { addEvents: function(){ var self = this; - this.trigger.addEventListener('mousedown', function(e){ + + function mousedown(e) { var mouseEvent = new CustomEvent('mousedown.dl', { detail: { hook: self, @@ -312,9 +364,9 @@ Object.assign(HookInput.prototype, { cancelable: true }); e.target.dispatchEvent(mouseEvent); - }); + } - this.trigger.addEventListener('input', function(e){ + function input(e) { var inputEvent = new CustomEvent('input.dl', { detail: { hook: self, @@ -325,15 +377,15 @@ Object.assign(HookInput.prototype, { }); e.target.dispatchEvent(inputEvent); self.list.show(); - }); + } - this.trigger.addEventListener('keyup', function(e){ + function keyup(e) { keyEvent(e, 'keyup.dl'); - }); + } - this.trigger.addEventListener('keydown', function(e){ + function keydown(e) { keyEvent(e, 'keydown.dl'); - }); + } function keyEvent(e, keyEventName){ var keyEvent = new CustomEvent(keyEventName, { @@ -349,6 +401,16 @@ Object.assign(HookInput.prototype, { e.target.dispatchEvent(keyEvent); self.list.show(); } + + this.events = this.events || {}; + this.events.mousedown = mousedown; + this.events.input = input; + this.events.keyup = keyup; + this.events.keydown = keydown; + this.trigger.addEventListener('mousedown', mousedown); + this.trigger.addEventListener('input', input); + this.trigger.addEventListener('keyup', keyup); + this.trigger.addEventListener('keydown', keydown); }, }); diff --git a/app/assets/javascripts/droplab/droplab_filter.js b/app/assets/javascripts/droplab/droplab_filter.js index 4a7ae0cbdc1..88e69c02422 100644 --- a/app/assets/javascripts/droplab/droplab_filter.js +++ b/app/assets/javascripts/droplab/droplab_filter.js @@ -2,18 +2,17 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o Date: Fri, 2 Dec 2016 15:04:10 -0600 Subject: Add dropdowns for assignee --- .../filtered_search/dropdown_assignee.js.es6 | 21 ++++++ .../filtered_search/dropdown_hint.js.es6 | 69 +++---------------- .../filtered_search_dropdown.js.es6 | 78 ++++++++++++++++++++++ .../filtered_search/filtered_search_manager.js.es6 | 22 +++++- 4 files changed, 130 insertions(+), 60 deletions(-) create mode 100644 app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 create mode 100644 app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 new file mode 100644 index 00000000000..9e4d1018ac3 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -0,0 +1,21 @@ +/* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + +((global) => { + class DropdownAssignee extends gl.FilteredSearchDropdown { + constructor(dropdown, input) { + super(dropdown, input); + this.listId = 'js-dropdown-assignee'; + } + + itemClicked(e) { + console.log('assignee clicked'); + } + + renderContent() { + droplab.addData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); + } + } + + global.DropdownAssignee = DropdownAssignee; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index ebbd43ad8e0..0593561c8a1 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -1,4 +1,6 @@ /* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + ((global) => { const dropdownData = [{ icon: 'fa-search', @@ -22,34 +24,11 @@ tag: '<label>', }]; - class DropdownHint { - constructor(dropdown, input) { - this.input = input; - this.dropdown = dropdown; - this.bindEvents(); - } - - bindEvents() { - this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this)); - } - - unbindEvents() { - this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this)); - } - - // cleanup() { - // this.unbindEvents(); - // droplab.setConfig({'filtered-search': {}}); - // droplab.setData('filtered-search', []); - // this.dropdown.style.display = 'hidden'; - // } - - getSelectedText(selectedToken) { - // TODO: Get last word from FilteredSearchTokenizer - const lastWord = this.input.value.split(' ').last(); - const lastWordIndex = selectedToken.indexOf(lastWord); - - return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); + class DropdownHint extends gl.FilteredSearchDropdown { + constructor(dropdown, input, filterKeyword) { + super(dropdown, input); + this.listId = 'js-dropdown-hint'; + this.filterKeyword = filterKeyword; } itemClicked(e) { @@ -68,37 +47,9 @@ this.input.dispatchEvent(new Event('input')); } - dismissDropdown() { - this.input.removeAttribute('data-dropdown-trigger'); - droplab.setConfig({'filtered-search': {}}); - droplab.setData('filtered-search', []); - this.unbindEvents(); - } - - setAsDropdown() { - this.input.setAttribute('data-dropdown-trigger', '#js-dropdown-hint'); - // const hookId = 'filtered-search'; - // const listId = 'js-dropdown-hint'; - // const hook = droplab.hooks.filter((h) => { - // return h.id === hookId; - // })[0]; - - // if (hook.list.list.id !== listId) { - // droplab.changeHookList(hookId, `#${listId}`); - // } - } - - render() { - console.log('render dropdown hint'); - this.setAsDropdown(); - - droplab.setConfig({ - 'filtered-search': { - text: 'hint' - } - }); - - droplab.setData('filtered-search', dropdownData); + renderContent() { + super.renderContent(); + droplab.setData(this.hookId, dropdownData); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 new file mode 100644 index 00000000000..250d8236ea9 --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -0,0 +1,78 @@ +/* eslint-disable no-param-reassign */ +((global) => { + const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger'; + + class FilteredSearchDropdown { + constructor(dropdown, input) { + this.hookId = 'filtered-search'; + this.input = input; + this.dropdown = dropdown; + this.bindEvents(); + } + + bindEvents() { + this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this)); + } + + unbindEvents() { + this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this)); + } + + getSelectedText(selectedToken) { + // TODO: Get last word from FilteredSearchTokenizer + const lastWord = this.input.value.split(' ').last(); + const lastWordIndex = selectedToken.indexOf(lastWord); + + return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); + } + + itemClicked(e) { + // Overridden by dropdown sub class + } + + getFilterConfig(filterKeyword) { + const config = {}; + const filterConfig = { + text: filterKeyword, + }; + + config[this.hookId] = filterKeyword ? filterConfig : {}; + + return config; + } + + dismissDropdown() { + this.input.removeAttribute(DATA_DROPDOWN_TRIGGER); + droplab.setConfig(this.getFilterConfig()); + droplab.setData(this.hookId, []); + this.unbindEvents(); + } + + setAsDropdown() { + this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`); + } + + getCurrentHook() { + return droplab.hooks.filter(h => h.id === this.hookId)[0]; + } + + renderContent() { + droplab.setConfig(this.getFilterConfig(this.filterKeyword)); + } + + render() { + this.setAsDropdown(); + + const firstTimeInitialized = this.getCurrentHook() === undefined; + + if (firstTimeInitialized) { + this.renderContent(); + } else if(this.getCurrentHook().list.list.id !== this.listId) { + droplab.changeHookList(this.hookId, `#${this.listId}`); + this.renderContent(); + } + } + } + + global.FilteredSearchDropdown = FilteredSearchDropdown; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 8903f382c18..92f07024354 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -78,6 +78,7 @@ } let dropdownHint; + let dropdownAssignee; class FilteredSearchManager { constructor() { @@ -99,19 +100,38 @@ if (match && this.currentDropdown !== match.key) { console.log(`🦄 load ${match.key} dropdown`); + this.dismissCurrentDropdown(); this.currentDropdown = match.key; + + if (match.key === 'assignee') { + if (!dropdownAssignee) { + + // document.querySelector('.filtered-search').setAttribute('data-dropdown-trigger', '#js-dropdown-assignee'); + dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), document.querySelector('.filtered-search')); + } + + dropdownAssignee.render(); + } + } else if (!match && this.currentDropdown !== 'hint') { console.log('🦄 load hint dropdown'); + this.dismissCurrentDropdown(); this.currentDropdown = 'hint'; if (!dropdownHint) { - dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search')) + dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), 'hint'); } dropdownHint.render(); } } + dismissCurrentDropdown() { + if (this.currentDropdown === 'hint') { + dropdownHint.dismissDropdown(); + } + } + setDropdown() { const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value); -- cgit v1.2.1 From 9081d3efeec5b22fd92c76172ae92dad3cc94c58 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 2 Dec 2016 16:20:01 -0600 Subject: Update droplab --- app/assets/javascripts/droplab/droplab.js | 19 +++++++++++++++++-- app/assets/javascripts/droplab/droplab_ajax.js | 11 +++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 56582e71b61..aff47aa23cf 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -51,13 +51,15 @@ Object.assign(DropDown.prototype, { var self = this; // event delegation. this.list.addEventListener('click', function(e) { - if(e.target.tagName === 'A' || e.target.tagName === 'button') { + // climb up the tree to find the LI + var selected = utils.closest(e.target, 'LI'); + if(selected) { e.preventDefault(); self.hide(); var listEvent = new CustomEvent('click.dl', { detail: { list: self, - selected: e.target, + selected: selected, data: e.target.dataset, }, }); @@ -102,6 +104,15 @@ Object.assign(DropDown.prototype, { var html = utils.t(sampleItem.outerHTML, dat); var template = document.createElement('template'); template.innerHTML = html; + + // Help set the image src template + var imageTags = template.content.querySelectorAll('img[data-src]'); + for(var i = 0; i < imageTags.length; i++) { + var imageTag = imagetags[i]; + imageTag.src = imageTag.getAttribute('data-src'); + imageTag.removeAttribute('data-src'); + } + if(dat.hasOwnProperty('droplab_hidden') && dat.droplab_hidden){ template.content.firstChild.style.display = 'none' }else{ @@ -115,6 +126,9 @@ Object.assign(DropDown.prototype, { } else { this.list.innerHTML = newChildren.join(''); } + + // Show dropdown if there is data + data !== [] ? this.show() : this.hide(); }, show: function() { @@ -221,6 +235,7 @@ require('./window')(function(w){ // Restore initial State hook.list.list.innerHTML = hook.list.initialState; hook.list.hide(); + hook.trigger.removeEventListener('mousedown', hook.events.mousedown); hook.trigger.removeEventListener('input', hook.events.input); hook.trigger.removeEventListener('keyup', hook.events.keyup); diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index 23e43b352d6..2dff5b83fae 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -3,6 +3,7 @@ /* global droplab */ droplab.plugin(function init(DropLab) { var _addData = DropLab.prototype.addData; + var _setData = DropLab.prototype.setData; var _loadUrlData = function(url) { return new Promise(function(resolve, reject) { @@ -24,10 +25,16 @@ droplab.plugin(function init(DropLab) { Object.assign(DropLab.prototype, { addData: function(trigger, data) { + this.processData(trigger, data, _addData); + }, + setData: function(trigger, data) { + this.processData(trigger, data, _setData); + }, + processData: function(trigger, data, methodName) { var _this = this; if('string' === typeof data) { _loadUrlData(data).then(function(d) { - _addData.call(_this, trigger, d); + methodName.call(_this, trigger, d); }).catch(function(e) { if(e.message) console.error(e.message, e.stack); // eslint-disable-line no-console @@ -35,7 +42,7 @@ droplab.plugin(function init(DropLab) { console.error(e); // eslint-disable-line no-console }) } else { - _addData.apply(this, arguments); + methodName.apply(this, arguments); } }, }); -- cgit v1.2.1 From ce1247727d2a9f24994f602debe95fd2ebff90db Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 2 Dec 2016 16:20:21 -0600 Subject: Fix rendering of assignee dropdown after clicking hint dropdown --- app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 | 3 ++- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index 9e4d1018ac3..e3cbb4cb3a0 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -13,7 +13,8 @@ } renderContent() { - droplab.addData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); + super.renderContent(); + droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 92f07024354..fc7bfe121fb 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -121,7 +121,6 @@ if (!dropdownHint) { dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), 'hint'); } - dropdownHint.render(); } } -- cgit v1.2.1 From 78b9e7c6b500b87dd2ebac45331a012eb0cf6ca4 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 2 Dec 2016 16:30:19 -0600 Subject: Add author dropdown --- .../filtered_search/dropdown_author.js.es6 | 22 ++++++++++++++++++++++ .../filtered_search/filtered_search_manager.js.es6 | 13 +++++++++---- 2 files changed, 31 insertions(+), 4 deletions(-) create mode 100644 app/assets/javascripts/filtered_search/dropdown_author.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 new file mode 100644 index 00000000000..e16b313b743 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -0,0 +1,22 @@ +/* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + +((global) => { + class DropdownAuthor extends gl.FilteredSearchDropdown { + constructor(dropdown, input) { + super(dropdown, input); + this.listId = 'js-dropdown-author'; + } + + itemClicked(e) { + console.log('author clicked'); + } + + renderContent() { + super.renderContent(); + droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); + } + } + + global.DropdownAuthor = DropdownAuthor; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index fc7bfe121fb..237f4fc3fff 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -78,6 +78,7 @@ } let dropdownHint; + let dropdownAuthor; let dropdownAssignee; class FilteredSearchManager { @@ -103,10 +104,14 @@ this.dismissCurrentDropdown(); this.currentDropdown = match.key; - if (match.key === 'assignee') { - if (!dropdownAssignee) { + if (match.key === 'author') { + if (!dropdownAuthor) { + dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), document.querySelector('.filtered-search')); + } - // document.querySelector('.filtered-search').setAttribute('data-dropdown-trigger', '#js-dropdown-assignee'); + dropdownAuthor.render(); + } else if (match.key === 'assignee') { + if (!dropdownAssignee) { dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), document.querySelector('.filtered-search')); } @@ -119,7 +124,7 @@ this.currentDropdown = 'hint'; if (!dropdownHint) { - dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), 'hint'); + dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), this.currentDropdown); } dropdownHint.render(); } -- cgit v1.2.1 From a510791bb2fb537fd2fbe4a9f6b94e38fe5a6094 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 2 Dec 2016 16:43:15 -0600 Subject: Add label and milestone dropdowns --- .../filtered_search/dropdown_label.js.es6 | 22 ++++++++++++++++++++++ .../filtered_search/dropdown_milestone.js.es6 | 22 ++++++++++++++++++++++ .../filtered_search/filtered_search_manager.js.es6 | 14 ++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 app/assets/javascripts/filtered_search/dropdown_label.js.es6 create mode 100644 app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 new file mode 100644 index 00000000000..9225dca13b0 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -0,0 +1,22 @@ +/* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + +((global) => { + class DropdownLabel extends gl.FilteredSearchDropdown { + constructor(dropdown, input) { + super(dropdown, input); + this.listId = 'js-dropdown-label'; + } + + itemClicked(e) { + console.log('label clicked'); + } + + renderContent() { + super.renderContent(); + droplab.setData(this.hookId, 'labels.json'); + } + } + + global.DropdownLabel = DropdownLabel; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 new file mode 100644 index 00000000000..ab97d709886 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -0,0 +1,22 @@ +/* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + +((global) => { + class DropdownMilestone extends gl.FilteredSearchDropdown { + constructor(dropdown, input) { + super(dropdown, input); + this.listId = 'js-dropdown-milestone'; + } + + itemClicked(e) { + console.log('milestone clicked'); + } + + renderContent() { + super.renderContent(); + droplab.setData(this.hookId, 'milestones.json'); + } + } + + global.DropdownMilestone = DropdownMilestone; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 237f4fc3fff..f06d5a646cf 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -80,6 +80,8 @@ let dropdownHint; let dropdownAuthor; let dropdownAssignee; + let dropdownMilestone; + let dropdownLabel; class FilteredSearchManager { constructor() { @@ -116,6 +118,18 @@ } dropdownAssignee.render(); + } else if (match.key === 'milestone') { + if (!dropdownMilestone) { + dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), document.querySelector('.filtered-search')); + } + + dropdownMilestone.render(); + } else if (match.key === 'label') { + if (!dropdownLabel) { + dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), document.querySelector('.filtered-search')); + } + + dropdownLabel.render(); } } else if (!match && this.currentDropdown !== 'hint') { -- cgit v1.2.1 From 2edaabfe669f7e865a56eab321db41fe9cdcad89 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 12:18:02 -0600 Subject: Fix image data-src --- app/assets/javascripts/droplab/droplab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index aff47aa23cf..0152eef793f 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -108,7 +108,7 @@ Object.assign(DropDown.prototype, { // Help set the image src template var imageTags = template.content.querySelectorAll('img[data-src]'); for(var i = 0; i < imageTags.length; i++) { - var imageTag = imagetags[i]; + var imageTag = imageTags[i]; imageTag.src = imageTag.getAttribute('data-src'); imageTag.removeAttribute('data-src'); } -- cgit v1.2.1 From f19503b008e962a6eaf16ce4fa18bdb89ceb7442 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 12:26:36 -0600 Subject: Style hint dropdown --- .../filtered_search/dropdown_hint.js.es6 | 4 ++-- app/assets/stylesheets/framework/filters.scss | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 0593561c8a1..dc28b97fea9 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -32,8 +32,8 @@ } itemClicked(e) { - const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim(); - const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim(); + const token = e.detail.selected.querySelector('.dropdown-filter-hint').innerText.trim(); + const tag = e.detail.selected.querySelector('.dropdown-filter-tag').innerText.trim(); if (tag.length) { gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index c679a3833e9..71b33646185 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -68,3 +68,25 @@ } } } + +.dropdown-menu .filter-dropdown { + padding: 0; +} + +.filter-dropdown { + .btn { + border: none; + width: 100%; + text-align: left; + padding: 8px 16px; + + &:hover { + text-decoration: none; + } + } + + .dropdown-filter-tag { + font-size: 14px; + font-weight: 400; + } +} -- cgit v1.2.1 From fdd1bac91a0554df9a3a25b500877d376fd6b2a0 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 12:35:28 -0600 Subject: Style author dropdown --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 4 ++-- app/assets/stylesheets/framework/filters.scss | 11 ++++++++++- 2 files changed, 12 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index dc28b97fea9..0593561c8a1 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -32,8 +32,8 @@ } itemClicked(e) { - const token = e.detail.selected.querySelector('.dropdown-filter-hint').innerText.trim(); - const tag = e.detail.selected.querySelector('.dropdown-filter-tag').innerText.trim(); + const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim(); + const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 71b33646185..767803ac1d0 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -85,8 +85,17 @@ } } - .dropdown-filter-tag { + .dropdown-light-content { font-size: 14px; font-weight: 400; } + + .dropdown-user { + display: flex; + } + + .dropdown-user-details { + display: flex; + flex-direction: column; + } } -- cgit v1.2.1 From 7cf322f1d667b6e0d1c74e58a89aa3dbd437a850 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 13:00:18 -0600 Subject: Add blue hover for dropdowns --- app/assets/stylesheets/framework/filters.scss | 2 ++ app/assets/stylesheets/framework/variables.scss | 5 +++++ 2 files changed, 7 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 767803ac1d0..4fa826c1b76 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -81,6 +81,8 @@ padding: 8px 16px; &:hover { + background-color: $dropdown-hover-color; + color: white; text-decoration: none; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 3e52c482ece..f3cb3d33d99 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -263,6 +263,11 @@ $dropdown-chevron-size: 10px; $dropdown-toggle-active-border-color: darken($border-color, 14%); +/* +* Filtered Search +*/ +$dropdown-hover-color: #3B86FF; + /* * Buttons */ -- cgit v1.2.1 From 9f1c19ce84046de2e85eff1aef7f693a2925bf11 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 13:09:29 -0600 Subject: Style label dropdowns --- app/assets/stylesheets/framework/filters.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 4fa826c1b76..c4b4a56a8b5 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -79,6 +79,8 @@ width: 100%; text-align: left; padding: 8px 16px; + text-overflow: ellipsis; + overflow-y: hidden; &:hover { background-color: $dropdown-hover-color; -- cgit v1.2.1 From 52fd1b08caad773b332216c117bdecc25cbd6256 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 13:17:43 -0600 Subject: Add vertical scrolling for dropdowns --- app/assets/stylesheets/framework/filters.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index c4b4a56a8b5..2efdb537cb3 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -74,6 +74,11 @@ } .filter-dropdown { + max-height: 215px; + overflow-x: scroll; +} + +.filter-dropdown-item { .btn { border: none; width: 100%; @@ -103,3 +108,7 @@ flex-direction: column; } } + +.hint-dropdown { + width: 250px; +} -- cgit v1.2.1 From c0ec94f5f0e0ba24655ab06f60a8da3ccd2930f8 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 13:26:24 -0600 Subject: Fix css dropdown width --- app/assets/stylesheets/framework/filters.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 2efdb537cb3..1f980c3d618 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -69,7 +69,7 @@ } } -.dropdown-menu .filter-dropdown { +.dropdown-menu .filter-dropdown-item { padding: 0; } -- cgit v1.2.1 From 24042d882b544e8909170bdb49d080c5c9e153fd Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 13:32:44 -0600 Subject: Add white background for dropdown label box color --- app/assets/stylesheets/framework/filters.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 1f980c3d618..bcbf0e868e2 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -91,6 +91,12 @@ background-color: $dropdown-hover-color; color: white; text-decoration: none; + + .dropdown-label-box { + border-color: white; + border-style: solid; + border-width: 2px; + } } } -- cgit v1.2.1 From 0e7b8413329270379b6675d87fb5cc28a5b24a58 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 13:34:20 -0600 Subject: Add focus state style the same as hover state --- app/assets/stylesheets/framework/filters.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index bcbf0e868e2..130d06b601c 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -87,7 +87,8 @@ text-overflow: ellipsis; overflow-y: hidden; - &:hover { + &:hover, + &:focus { background-color: $dropdown-hover-color; color: white; text-decoration: none; -- cgit v1.2.1 From e36d32327185e9e8824b04f0cebcbfbffa42d7e8 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 15:12:34 -0600 Subject: Add dropdown offset to match input cursor --- .../filtered_search_dropdown.js.es6 | 4 ++++ .../filtered_search/filtered_search_manager.js.es6 | 24 +++++++++++++++++----- app/assets/javascripts/lib/utils/text_utility.js | 16 +++++++++++++++ 3 files changed, 39 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 250d8236ea9..251162f3fb1 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -52,6 +52,10 @@ this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`); } + setOffset(offset = 0) { + this.dropdown.style.left = `${offset}px`; + } + getCurrentHook() { return droplab.hooks.filter(h => h.id === this.hookId)[0]; } diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index f06d5a646cf..c80c60d6d6e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -99,47 +99,61 @@ loadDropdown(dropdownName = '') { dropdownName = dropdownName.toLowerCase(); + const filterIconPadding = 27; const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; + const filteredSearch = document.querySelector('.filtered-search'); if (match && this.currentDropdown !== match.key) { console.log(`🦄 load ${match.key} dropdown`); + + const dynamicDropdownPadding = 12; + const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding + dynamicDropdownPadding; + this.dismissCurrentDropdown(); this.currentDropdown = match.key; if (match.key === 'author') { if (!dropdownAuthor) { - dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), document.querySelector('.filtered-search')); + dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), filteredSearch); } + dropdownAuthor.setOffset(dropdownOffset); dropdownAuthor.render(); } else if (match.key === 'assignee') { if (!dropdownAssignee) { - dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), document.querySelector('.filtered-search')); + dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), filteredSearch); } + dropdownAssignee.setOffset(dropdownOffset); dropdownAssignee.render(); } else if (match.key === 'milestone') { if (!dropdownMilestone) { - dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), document.querySelector('.filtered-search')); + dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), filteredSearch); } + dropdownMilestone.setOffset(dropdownOffset); dropdownMilestone.render(); } else if (match.key === 'label') { if (!dropdownLabel) { - dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), document.querySelector('.filtered-search')); + dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), filteredSearch); } + dropdownLabel.setOffset(dropdownOffset); dropdownLabel.render(); } } else if (!match && this.currentDropdown !== 'hint') { console.log('🦄 load hint dropdown'); + + const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding; + this.dismissCurrentDropdown(); this.currentDropdown = 'hint'; if (!dropdownHint) { - dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), this.currentDropdown); + dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown); } + dropdownHint.setOffset(dropdownOffset); dropdownHint.render(); } } diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index 5066e3282d7..e47eccc3a33 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -17,6 +17,22 @@ gl.text.replaceRange = function(s, start, end, substitute) { return s.substring(0, start) + substitute + s.substring(end); }; + gl.text.getTextWidth = function(text, font) { + /** + * Uses canvas.measureText to compute and return the width of the given text of given font in pixels. + * + * @param {String} text The text to be rendered. + * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana"). + * + * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 + */ + // re-use canvas object for better performance + var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement("canvas")); + var context = canvas.getContext("2d"); + context.font = font; + var metrics = context.measureText(text); + return metrics.width; + }; gl.text.selectedText = function(text, textarea) { return text.substring(textarea.selectionStart, textarea.selectionEnd); }; -- cgit v1.2.1 From dd90dd0e28839a0e83a2145aa13c6f517efbee89 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 15:40:55 -0600 Subject: Set data_dropdown_trigger to empty instead of removing --- app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 251162f3fb1..0a406bef985 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -42,7 +42,7 @@ } dismissDropdown() { - this.input.removeAttribute(DATA_DROPDOWN_TRIGGER); + this.input.setAttribute(DATA_DROPDOWN_TRIGGER, ''); droplab.setConfig(this.getFilterConfig()); droplab.setData(this.hookId, []); this.unbindEvents(); -- cgit v1.2.1 From d2ecba6edfea8ff1836943b6c683fdb36e4c92a3 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 16:04:06 -0600 Subject: Remove bad droplab code --- app/assets/javascripts/droplab/droplab.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 0152eef793f..6befa0976d4 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -126,9 +126,6 @@ Object.assign(DropDown.prototype, { } else { this.list.innerHTML = newChildren.join(''); } - - // Show dropdown if there is data - data !== [] ? this.show() : this.hide(); }, show: function() { -- cgit v1.2.1 From f5719c2c48dd989ed5431a78e95e560f3c1d9335 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 16:05:30 -0600 Subject: Add ability to click on none as an option --- .../filtered_search/dropdown_assignee.js.es6 | 8 +++++++- .../javascripts/filtered_search/dropdown_hint.js.es6 | 5 ----- .../javascripts/filtered_search/dropdown_label.js.es6 | 9 ++++++++- .../filtered_search/dropdown_milestone.js.es6 | 8 +++++++- .../filtered_search/filtered_search_dropdown.js.es6 | 19 ++++++++++++++++++- .../filtered_search/filtered_search_manager.js.es6 | 2 +- 6 files changed, 41 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index e3cbb4cb3a0..fcaacac1b50 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -9,7 +9,13 @@ } itemClicked(e) { - console.log('assignee clicked'); + const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + + if (!dataValueSet) { + console.log('set value'); + } + + this.dismissDropdown(); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 0593561c8a1..b7161d00eb9 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -39,12 +39,7 @@ gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); } - this.input.focus(); this.dismissDropdown(); - - // Propogate input change to FilteredSearchManager - // so that it can determine which dropdowns to open - this.input.dispatchEvent(new Event('input')); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index 9225dca13b0..ef92ecd3bd1 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -9,7 +9,14 @@ } itemClicked(e) { - console.log('label clicked'); + const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + + if (!dataValueSet) { + const labelName = `~${e.detail.selected.querySelector('.label-title').innerText.trim()}`; + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(labelName)); + } + + this.dismissDropdown(); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index ab97d709886..00df89ff063 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -9,7 +9,13 @@ } itemClicked(e) { - console.log('milestone clicked'); + const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + + if (!dataValueSet) { + console.log('set value'); + } + + this.dismissDropdown(); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 0a406bef985..a345b368238 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -41,13 +41,20 @@ return config; } - dismissDropdown() { + destroy() { this.input.setAttribute(DATA_DROPDOWN_TRIGGER, ''); droplab.setConfig(this.getFilterConfig()); droplab.setData(this.hookId, []); this.unbindEvents(); } + dismissDropdown() { + this.input.focus(); + // Propogate input change to FilteredSearchManager + // so that it can determine which dropdowns to open + this.input.dispatchEvent(new Event('input')); + } + setAsDropdown() { this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`); } @@ -56,6 +63,16 @@ this.dropdown.style.left = `${offset}px`; } + setDataValueIfSelected(selected) { + const dataValue = selected.getAttribute('data-value'); + + if (dataValue) { + gl.FilteredSearchManager.addWordToInput(dataValue); + } + + return dataValue !== null; + } + getCurrentHook() { return droplab.hooks.filter(h => h.id === this.hookId)[0]; } diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index c80c60d6d6e..53ab2135a09 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -160,7 +160,7 @@ dismissCurrentDropdown() { if (this.currentDropdown === 'hint') { - dropdownHint.dismissDropdown(); + dropdownHint.destroy(); } } -- cgit v1.2.1 From 0c1c26c0bcc5c62f5959d7fc1399d44e1a6617cd Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 16:29:55 -0600 Subject: Replace typed token with selected dropdown token --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 53ab2135a09..7e6144b571d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -92,7 +92,14 @@ } static addWordToInput(word, addSpace) { - const hasExistingValue = document.querySelector('.filtered-search').value.length !== 0; + const filteredSearchValue = document.querySelector('.filtered-search').value; + const hasExistingValue = filteredSearchValue.length !== 0; + + const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue); + if (lastToken.hasOwnProperty('key')) { + document.querySelector('.filtered-search').value = filteredSearchValue.slice(0, -1 * (lastToken.value.length)); + } + document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word; } -- cgit v1.2.1 From 71da8ffaef9220c10d2b95ca0ae06bc08fefa594 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 5 Dec 2016 16:36:05 -0600 Subject: Populate selected item in filtered search input --- app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 | 3 ++- app/assets/javascripts/filtered_search/dropdown_author.js.es6 | 5 ++++- app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 | 3 ++- 3 files changed, 8 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index fcaacac1b50..e791de5ad41 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -12,7 +12,8 @@ const dataValueSet = this.setDataValueIfSelected(e.detail.selected); if (!dataValueSet) { - console.log('set value'); + const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); } this.dismissDropdown(); diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index e16b313b743..75eb1c06fbd 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -9,7 +9,10 @@ } itemClicked(e) { - console.log('author clicked'); + const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); + + this.dismissDropdown(); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 00df89ff063..8c75bd30e97 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -12,7 +12,8 @@ const dataValueSet = this.setDataValueIfSelected(e.detail.selected); if (!dataValueSet) { - console.log('set value'); + const milestoneName = `%${e.detail.selected.querySelector('.btn-link').innerText.trim()}`; + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName)); } this.dismissDropdown(); -- cgit v1.2.1 From bcae21b1badaa3a7aedfc44f67908909b34afb7d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 11:34:00 -0600 Subject: Remove border radius of list item buttons --- app/assets/stylesheets/framework/filters.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 130d06b601c..0882af57482 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -86,6 +86,7 @@ padding: 8px 16px; text-overflow: ellipsis; overflow-y: hidden; + border-radius: 0; &:hover, &:focus { -- cgit v1.2.1 From ab2808531dcd768a03f4a9fd90ec0ca67d013278 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 11:37:54 -0600 Subject: Remove unnecessary dismissCurrentDropdown --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 7 ------- 1 file changed, 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 7e6144b571d..c509a3c3b62 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -154,7 +154,6 @@ const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding; - this.dismissCurrentDropdown(); this.currentDropdown = 'hint'; if (!dropdownHint) { @@ -165,12 +164,6 @@ } } - dismissCurrentDropdown() { - if (this.currentDropdown === 'hint') { - dropdownHint.destroy(); - } - } - setDropdown() { const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value); -- cgit v1.2.1 From 60c9240bc27ea1c5de1acb2a4cc686d9e2a85555 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 12:46:16 -0600 Subject: Fixed bug where labels with multiple spaces wouldn't get tokenized correctly --- .../javascripts/filtered_search/filtered_search_tokenizer.es6 | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index b686a43cf32..17fdfe0f550 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -40,18 +40,21 @@ let lastQuotation = ''; let incompleteToken = false; + // Iterate through each word (broken up by spaces) inputs.forEach((i) => { if (incompleteToken) { + // Continue previous token as it had an escaped + // quote in the beginning const prevToken = tokens.last(); prevToken.value += ` ${i}`; - // Remove last quotation + // Remove last quotation from the value const lastQuotationRegex = new RegExp(lastQuotation, 'g'); prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); tokens[tokens.length - 1] = prevToken; // Check to see if this quotation completes the token value - if (i.indexOf(lastQuotation)) { + if (i.indexOf(lastQuotation) !== -1) { lastToken = tokens.last(); incompleteToken = !incompleteToken; } -- cgit v1.2.1 From da8ab2bc086b6b7c2775d44198a6b3bc04794c3d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 12:52:23 -0600 Subject: Add escape quotations for selected labels from dropdown --- .../javascripts/filtered_search/dropdown_label.js.es6 | 18 ++++++++++++++++-- .../filtered_search/filtered_search_manager.js.es6 | 7 ++++++- 2 files changed, 22 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index ef92ecd3bd1..cd1ccb541e6 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -12,8 +12,22 @@ const dataValueSet = this.setDataValueIfSelected(e.detail.selected); if (!dataValueSet) { - const labelName = `~${e.detail.selected.querySelector('.label-title').innerText.trim()}`; - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(labelName)); + let labelTitle = e.detail.selected.querySelector('.label-title').innerText.trim(); + + // Encapsulate label with quotes if it has spaces + if (labelTitle.indexOf(' ') !== -1) { + if (labelTitle.indexOf('"') !== -1) { + // Use single quotes if label title contains double quotes + labelTitle = `'${labelTitle}'`; + } else { + // Known side effect: Label's with both single and double quotes + // won't escape properly + labelTitle = `"${labelTitle}"`; + } + } + + const labelName = `~${labelTitle}`; + gl.FilteredSearchManager.addWordToInput(labelName); } this.dismissDropdown(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index c509a3c3b62..04374525d4c 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -97,7 +97,12 @@ const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue); if (lastToken.hasOwnProperty('key')) { - document.querySelector('.filtered-search').value = filteredSearchValue.slice(0, -1 * (lastToken.value.length)); + console.log(lastToken); + // Spaces inside the token means that the token value will be escaped by quotes + const hasQuotes = lastToken.value.indexOf(' ') !== -1; + + const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length; + document.querySelector('.filtered-search').value = filteredSearchValue.slice(0, -1 * (lengthToRemove)); } document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word; -- cgit v1.2.1 From 5cd90ef9489797c858bfb7eec7be0f5773d4d417 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 12:57:07 -0600 Subject: Add escaping for milestone values --- .../javascripts/filtered_search/dropdown_label.js.es6 | 17 ++--------------- .../filtered_search/dropdown_milestone.js.es6 | 3 ++- .../filtered_search/filtered_search_dropdown.js.es6 | 18 ++++++++++++++++++ 3 files changed, 22 insertions(+), 16 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index cd1ccb541e6..d4a50422c3b 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -12,21 +12,8 @@ const dataValueSet = this.setDataValueIfSelected(e.detail.selected); if (!dataValueSet) { - let labelTitle = e.detail.selected.querySelector('.label-title').innerText.trim(); - - // Encapsulate label with quotes if it has spaces - if (labelTitle.indexOf(' ') !== -1) { - if (labelTitle.indexOf('"') !== -1) { - // Use single quotes if label title contains double quotes - labelTitle = `'${labelTitle}'`; - } else { - // Known side effect: Label's with both single and double quotes - // won't escape properly - labelTitle = `"${labelTitle}"`; - } - } - - const labelName = `~${labelTitle}`; + const labelTitle = e.detail.selected.querySelector('.label-title').innerText.trim(); + const labelName = `~${this.getEscapedText(labelTitle)}`; gl.FilteredSearchManager.addWordToInput(labelName); } diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 8c75bd30e97..965a8c8a58d 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -12,7 +12,8 @@ const dataValueSet = this.setDataValueIfSelected(e.detail.selected); if (!dataValueSet) { - const milestoneName = `%${e.detail.selected.querySelector('.btn-link').innerText.trim()}`; + const milestoneTitle = e.detail.selected.querySelector('.btn-link').innerText.trim(); + const milestoneName = `%${this.getEscapedText(milestoneTitle)}`; gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName)); } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index a345b368238..cc7f61c23e5 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -18,6 +18,24 @@ this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this)); } + getEscapedText(text) { + let escapedText = text; + + // Encapsulate value with quotes if it has spaces + if (text.indexOf(' ') !== -1) { + if (text.indexOf('"') !== -1) { + // Use single quotes if value contains double quotes + escapedText = `'${text}'`; + } else { + // Known side effect: values's with both single and double quotes + // won't escape properly + escapedText = `"${text}"`; + } + } + + return escapedText; + } + getSelectedText(selectedToken) { // TODO: Get last word from FilteredSearchTokenizer const lastWord = this.input.value.split(' ').last(); -- cgit v1.2.1 From 00ed5aafd227a7d4f9be6448f1bcdacff6ee6dfa Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 15:13:31 -0600 Subject: Make keep typing dropdown item static --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 4 ---- 1 file changed, 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index b7161d00eb9..b09136586c8 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -3,10 +3,6 @@ ((global) => { const dropdownData = [{ - icon: 'fa-search', - hint: 'Keep typing and press Enter', - tag: '', - },{ icon: 'fa-pencil', hint: 'author:', tag: '<author>' -- cgit v1.2.1 From d91d586aa60c8194a675e936832667cfe12729be Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 16:12:00 -0600 Subject: Add filter by last token --- app/assets/javascripts/droplab/droplab_filter.js | 13 +++++- .../filtered_search/dropdown_author.js.es6 | 8 ++++ .../filtered_search_dropdown.js.es6 | 13 ++++-- .../filtered_search/filtered_search_tokenizer.es6 | 49 ++++++++++++++++++++++ 4 files changed, 77 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_filter.js b/app/assets/javascripts/droplab/droplab_filter.js index 88e69c02422..5ae81afaf89 100644 --- a/app/assets/javascripts/droplab/droplab_filter.js +++ b/app/assets/javascripts/droplab/droplab_filter.js @@ -10,13 +10,22 @@ droplab.plugin(function init(DropLab) { var matches = []; // will only work on dynamically set data // and if a config text property is set - if(!data || !config.hasOwnProperty('text')){ + if(!data || (!config.hasOwnProperty('text') && !config.hasOwnProperty('filter'))){ return; } - matches = data.map(function(o){ + + var filterFunction = function(o){ // cheap string search o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1; return o; + }; + + if (config.hasOwnProperty('filter') && config.filter !== undefined) { + filterFunction = config.filter; + } + + matches = data.map(function(o) { + return filterFunction(o, value); }); list.render(matches); } diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index 75eb1c06fbd..64c310ba7ad 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -19,6 +19,14 @@ super.renderContent(); droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); } + + filterMethod(item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutPrefix = value.slice(1); + + item.droplab_hidden = item['username'].indexOf(valueWithoutPrefix) === -1; + return item; + } } global.DropdownAuthor = DropdownAuthor; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index cc7f61c23e5..bbfe26e6a21 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -50,12 +50,17 @@ getFilterConfig(filterKeyword) { const config = {}; - const filterConfig = { - text: filterKeyword, - }; + const filterConfig = {}; - config[this.hookId] = filterKeyword ? filterConfig : {}; + if (filterKeyword) { + filterConfig.text = filterKeyword; + } + + if (this.filterMethod) { + filterConfig.filter = this.filterMethod; + } + config[this.hookId] = filterConfig; return config; } diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index 17fdfe0f550..d6df83a3fb9 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -29,6 +29,55 @@ } } + static getLastTokenObject(input) { + const token = FilteredSearchTokenizer.getLastToken(input); + const colonIndex = token.indexOf(':'); + + const key = colonIndex !== -1 ? token.slice(0, colonIndex) : ''; + const value = colonIndex !== -1 ? token.slice(colonIndex) : token; + + return { + key, + value, + } + } + + static getLastToken(input) { + let completeToken = false; + let completeQuotation = true; + let lastQuotation = ''; + let i = input.length; + + const doubleQuote = '"'; + const singleQuote = '\''; + while(!completeToken && i >= 0) { + const isDoubleQuote = input[i] === doubleQuote; + const isSingleQuote = input[i] === singleQuote; + + // If the second quotation is found + if ((lastQuotation === doubleQuote && input[i] === doubleQuote) || + (lastQuotation === singleQuote && input[i] === singleQuote)) { + completeQuotation = true; + } + + // Save the first quotation + if ((input[i] === doubleQuote && lastQuotation === '') || + (input[i] === singleQuote && lastQuotation === '')) { + lastQuotation = input[i]; + completeQuotation = false; + } + + if (completeQuotation && input[i] === ' ') { + completeToken = true; + } else { + i--; + } + } + + // Adjust by 1 because of empty space + return input.slice(i + 1); + } + static processTokens(input) { let tokens = []; let searchToken = ''; -- cgit v1.2.1 From 6d2d2b2bd1448bb46b586d5dbe0edc88f020967c Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 16:20:14 -0600 Subject: Add filtering to the remaining dropdowns --- app/assets/javascripts/filtered_search/dropdown_label.js.es6 | 8 ++++++++ app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 | 8 ++++++++ 2 files changed, 16 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index d4a50422c3b..c5493f7a887 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -24,6 +24,14 @@ super.renderContent(); droplab.setData(this.hookId, 'labels.json'); } + + filterMethod(item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutPrefix = value.slice(1); + + item.droplab_hidden = item['title'].indexOf(valueWithoutPrefix) === -1; + return item; + } } global.DropdownLabel = DropdownLabel; diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 965a8c8a58d..8317ce5824c 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -24,6 +24,14 @@ super.renderContent(); droplab.setData(this.hookId, 'milestones.json'); } + + filterMethod(item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutPrefix = value.slice(1); + + item.droplab_hidden = item['title'].indexOf(valueWithoutPrefix) === -1; + return item; + } } global.DropdownMilestone = DropdownMilestone; -- cgit v1.2.1 From b16a38c8a2c9b1090e3b28c47516e9161130ee10 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 6 Dec 2016 16:23:04 -0600 Subject: Add filterMethod to hint dropdown --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index b09136586c8..0bee2eb2986 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -42,6 +42,18 @@ super.renderContent(); droplab.setData(this.hookId, dropdownData); } + + filterMethod(item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + + if (value === '') { + item.droplab_hidden = false; + } else { + item.droplab_hidden = item['hint'].indexOf(value) === -1; + } + + return item; + } } global.DropdownHint = DropdownHint; -- cgit v1.2.1 From 6d2a8b5b140a26f5e83ae7b6497cf14bc9a065ee Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 7 Dec 2016 12:33:02 -0600 Subject: Add font to dropdown offset calculation --- .../filtered_search/filtered_search_manager.js.es6 | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 04374525d4c..7e399427cef 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -108,18 +108,22 @@ document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word; } - loadDropdown(dropdownName = '') { + loadDropdown(dropdownName = '', hideDropdown) { dropdownName = dropdownName.toLowerCase(); const filterIconPadding = 27; const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; const filteredSearch = document.querySelector('.filtered-search'); + if (!this.font) { + this.font = window.getComputedStyle(filteredSearch).font; + } + if (match && this.currentDropdown !== match.key) { console.log(`🦄 load ${match.key} dropdown`); const dynamicDropdownPadding = 12; - const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding + dynamicDropdownPadding; + const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding; this.dismissCurrentDropdown(); this.currentDropdown = match.key; @@ -157,8 +161,9 @@ } else if (!match && this.currentDropdown !== 'hint') { console.log('🦄 load hint dropdown'); - const dropdownOffset = gl.text.getTextWidth(filteredSearch.value) + filterIconPadding; - + const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding; + console.log(dropdownOffset) + this.dismissCurrentDropdown(); this.currentDropdown = 'hint'; if (!dropdownHint) { -- cgit v1.2.1 From 158e90d13527897b2bdd49733c537898a387f2cb Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 7 Dec 2016 12:33:33 -0600 Subject: Add padding for clear button --- app/assets/stylesheets/framework/filters.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 0882af57482..205cecb4906 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -36,6 +36,7 @@ .form-control { padding-left: 25px; + padding-right: 25px; &:focus ~ .fa-filter { color: #444; -- cgit v1.2.1 From 15454eb503bda8ffa9579e08ebe3f3f7114b7643 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 7 Dec 2016 12:51:25 -0600 Subject: Add ability to search for filter dropdowns without filter symbol --- .../javascripts/filtered_search/dropdown_assignee.js.es6 | 15 +++++++++++++++ .../javascripts/filtered_search/dropdown_author.js.es6 | 11 +++++++++-- .../javascripts/filtered_search/dropdown_label.js.es6 | 8 ++++++-- .../javascripts/filtered_search/dropdown_milestone.js.es6 | 9 +++++++-- 4 files changed, 37 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index e791de5ad41..63fbe30ee84 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -23,6 +23,21 @@ super.renderContent(); droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); } + + filterMethod(item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutColon = value.slice(1).toLowerCase(); + const valueWithoutPrefix = valueWithoutColon.slice(1); + + const username = item.username.toLowerCase(); + const name = item.name.toLowerCase(); + + const noUsernameMatch = username.indexOf(valueWithoutPrefix) === -1 && username.indexOf(valueWithoutColon) === -1; + const noNameMatch = name.indexOf(valueWithoutColon) === -1; + + item.droplab_hidden = noUsernameMatch && noNameMatch; + return item; + } } global.DropdownAssignee = DropdownAssignee; diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index 64c310ba7ad..37e2e80533b 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -22,9 +22,16 @@ filterMethod(item, query) { const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutPrefix = value.slice(1); + const valueWithoutColon = value.slice(1).toLowerCase(); + const valueWithoutPrefix = valueWithoutColon.slice(1); - item.droplab_hidden = item['username'].indexOf(valueWithoutPrefix) === -1; + const username = item.username.toLowerCase(); + const name = item.name.toLowerCase(); + + const noUsernameMatch = username.indexOf(valueWithoutPrefix) === -1 && username.indexOf(valueWithoutColon) === -1; + const noNameMatch = name.indexOf(valueWithoutColon) === -1; + + item.droplab_hidden = noUsernameMatch && noNameMatch; return item; } } diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index c5493f7a887..e2c1305597a 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -27,9 +27,13 @@ filterMethod(item, query) { const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutPrefix = value.slice(1); + const valueWithoutColon = value.slice(1).toLowerCase(); + const valueWithoutPrefix = valueWithoutColon.slice(1); - item.droplab_hidden = item['title'].indexOf(valueWithoutPrefix) === -1; + const title = item.title.toLowerCase(); + const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1; + + item.droplab_hidden = noTitleMatch; return item; } } diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 8317ce5824c..cd185d31917 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -27,9 +27,14 @@ filterMethod(item, query) { const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutPrefix = value.slice(1); + const valueWithoutColon = value.slice(1).toLowerCase(); + const valueWithoutPrefix = valueWithoutColon.slice(1); - item.droplab_hidden = item['title'].indexOf(valueWithoutPrefix) === -1; + const title = item.title.toLowerCase(); + + const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1; + + item.droplab_hidden = noTitleMatch; return item; } } -- cgit v1.2.1 From bbad61b97c483a2d4e2a153c2e1b10d21edaa1e0 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 7 Dec 2016 12:54:29 -0600 Subject: Fix Droplab --- app/assets/javascripts/droplab/droplab.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 6befa0976d4..84cd89297ff 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -212,7 +212,8 @@ require('./window')(function(w){ var self = this; window.addEventListener('click', function(e){ var thisTag = e.target; - if(thisTag.tagName === 'LI' || thisTag.tagName === 'A'){ + if(thisTag.tagName === 'LI' || thisTag.tagName === 'A' + || thisTag.tagName === 'BUTTON'){ // climb up the tree to find the UL thisTag = utils.closest(thisTag, 'UL'); } @@ -556,7 +557,7 @@ var camelize = function(str) { }; var closest = function(thisTag, stopTag) { - while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){ + while(thisTag !== null && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){ thisTag = thisTag.parentNode; } return thisTag; -- cgit v1.2.1 From ceb79e3c3cb595ac851fb32c99264c1f43dd9c75 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 7 Dec 2016 12:55:03 -0600 Subject: Reset filters after clear search --- .../filtered_search_dropdown.js.es6 | 38 +++++++++++++++++++++- .../filtered_search/filtered_search_manager.js.es6 | 29 ++++++++++------- 2 files changed, 55 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index bbfe26e6a21..edffd7fb8e2 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -71,6 +71,20 @@ this.unbindEvents(); } + show() { + const currentHook = this.getCurrentHook(); + if (currentHook) { + currentHook.list.show(); + } + } + + hide() { + const currentHook = this.getCurrentHook(); + if (currentHook) { + currentHook.list.hide(); + } + } + dismissDropdown() { this.input.focus(); // Propogate input change to FilteredSearchManager @@ -104,7 +118,7 @@ droplab.setConfig(this.getFilterConfig(this.filterKeyword)); } - render() { + render(hide) { this.setAsDropdown(); const firstTimeInitialized = this.getCurrentHook() === undefined; @@ -115,6 +129,28 @@ droplab.changeHookList(this.hookId, `#${this.listId}`); this.renderContent(); } + + if (hide) { + this.hide(); + } else { + this.show(); + } + } + + resetFilters() { + const currentHook = this.getCurrentHook(); + + if (currentHook) { + const list = currentHook.list; + + if (list.data) { + const data = list.data.map((item) => { + item.droplab_hidden = false; + }); + + list.render(data); + } + } } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 7e399427cef..841738ff627 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,13 +1,5 @@ /* eslint-disable no-param-reassign */ ((global) => { - function clearSearch(e) { - e.stopPropagation(); - e.preventDefault(); - - document.querySelector('.filtered-search').value = ''; - document.querySelector('.clear-search').classList.add('hidden'); - } - function toggleClearSearchButton(e) { const clearSearchButton = document.querySelector('.clear-search'); @@ -170,7 +162,13 @@ dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown); } dropdownHint.setOffset(dropdownOffset); - dropdownHint.render(); + dropdownHint.render(hideDropdown); + } + } + + dismissCurrentDropdown() { + if (this.currentDropdown === 'hint') { + dropdownHint.destroy(); } } @@ -198,7 +196,17 @@ filteredSearchInput.addEventListener('input', this.setDropdown.bind(this)); filteredSearchInput.addEventListener('input', toggleClearSearchButton); filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this)); - document.querySelector('.clear-search').addEventListener('click', clearSearch); + document.querySelector('.clear-search').addEventListener('click', this.clearSearch.bind(this)); + } + + clearSearch(e) { + e.stopPropagation(); + e.preventDefault(); + + document.querySelector('.filtered-search').value = ''; + document.querySelector('.clear-search').classList.add('hidden'); + dropdownHint.resetFilters(); + this.loadDropdown('hint', true); } checkDropdownToken(e) { @@ -208,7 +216,6 @@ // Check for dropdown token if (lastToken[lastToken.length - 1] === ':') { const token = lastToken.slice(0, -1); - } } -- cgit v1.2.1 From 367a15882a07a2f48dd7887fea642baf3920b6b7 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 8 Dec 2016 15:36:54 -0600 Subject: Update droplab --- app/assets/javascripts/droplab/droplab.js | 190 ++++++++++++++------- app/assets/javascripts/droplab/droplab_ajax.js | 89 +++++----- app/assets/javascripts/droplab/droplab_filter.js | 77 ++++++--- .../filtered_search/dropdown_assignee.js.es6 | 13 +- .../filtered_search/dropdown_author.js.es6 | 13 +- .../filtered_search/dropdown_hint.js.es6 | 22 ++- .../filtered_search/dropdown_label.js.es6 | 30 ++-- .../filtered_search/dropdown_milestone.js.es6 | 30 ++-- .../filtered_search_dropdown.js.es6 | 60 ++++--- .../filtered_search/filtered_search_manager.js.es6 | 42 +++-- 10 files changed, 354 insertions(+), 212 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 84cd89297ff..4d83b609a73 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -53,6 +53,7 @@ Object.assign(DropDown.prototype, { this.list.addEventListener('click', function(e) { // climb up the tree to find the LI var selected = utils.closest(e.target, 'LI'); + if(selected) { e.preventDefault(); self.hide(); @@ -158,17 +159,22 @@ require('./window')(function(w){ this.ready = false; this.hooks = []; this.queuedData = []; - this.plugins = []; this.config = {}; + this.loadWrapper; if(typeof hook !== 'undefined'){ this.addHook(hook); } - this.addEvents(); }; + Object.assign(DropLab.prototype, { - plugin: function (plugin) { - this.plugins.push(plugin) + load: function() { + this.loadWrapper(); + }, + + loadWrapper: function(){ + var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']')); + this.addHooks(dropdownTriggers).init(); }, addData: function () { @@ -181,6 +187,14 @@ require('./window')(function(w){ this.applyArgs(args, '_setData'); }, + destroy: function() { + this.hooks.forEach(function(h){ + h.destroy(); + }); + this.hooks = []; + this.removeEvents(); + }, + applyArgs: function(args, methodName) { if(this.ready) { this[methodName].apply(this, args); @@ -210,7 +224,7 @@ require('./window')(function(w){ addEvents: function() { var self = this; - window.addEventListener('click', function(e){ + this.windowClickedWrapper = function(e){ var thisTag = e.target; if(thisTag.tagName === 'LI' || thisTag.tagName === 'A' || thisTag.tagName === 'BUTTON'){ @@ -222,10 +236,16 @@ require('./window')(function(w){ self.hooks.forEach(function(hook) { hook.list.hide(); }); - }); + }.bind(this); + w.addEventListener('click', this.windowClickedWrapper); + }, + + removeEvents: function(){ + w.removeEventListener('click', this.windowClickedWrapper); + w.removeEventListener('load', this.loadWrapper); }, - changeHookList: function(trigger, list) { + changeHookList: function(trigger, list, plugins, config) { trigger = document.querySelector('[data-id="'+trigger+'"]'); list = document.querySelector(list); this.hooks.every(function(hook, i) { @@ -234,19 +254,16 @@ require('./window')(function(w){ hook.list.list.innerHTML = hook.list.initialState; hook.list.hide(); - hook.trigger.removeEventListener('mousedown', hook.events.mousedown); - hook.trigger.removeEventListener('input', hook.events.input); - hook.trigger.removeEventListener('keyup', hook.events.keyup); - hook.trigger.removeEventListener('keydown', hook.events.keydown); + hook.destroy(); this.hooks.splice(i, 1); - this.addHook(trigger, list); + this.addHook(trigger, list, plugins, config); return false; } return true }.bind(this)); }, - addHook: function(hook, list) { + addHook: function(hook, list, plugins, config) { if(!(hook instanceof HTMLElement) && typeof hook === 'string'){ hook = document.querySelector(hook); } @@ -256,17 +273,17 @@ require('./window')(function(w){ if(hook) { if(hook.tagName === 'A' || hook.tagName === 'BUTTON') { - this.hooks.push(new HookButton(hook, list)); + this.hooks.push(new HookButton(hook, list, plugins, config)); } else if(hook.tagName === 'INPUT') { - this.hooks.push(new HookInput(hook, list)); + this.hooks.push(new HookInput(hook, list, plugins, config)); } } return this; }, - addHooks: function(hooks) { + addHooks: function(hooks, plugins, config) { hooks.forEach(function(hook) { - this.addHook(hook, null); + this.addHook(hook, null, plugins, config); }.bind(this)); return this; }, @@ -276,9 +293,7 @@ require('./window')(function(w){ }, init: function () { - this.plugins.forEach(function(plugin) { - plugin(DropLab); - }) + this.addEvents(); var readyEvent = new CustomEvent('ready.dl', { detail: { dropdown: this, @@ -301,15 +316,18 @@ require('./window')(function(w){ },{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){ var DropDown = require('./dropdown'); -var Hook = function(trigger, list){ +var Hook = function(trigger, list, plugins, config){ this.trigger = trigger; this.list = new DropDown(list); this.type = 'Hook'; this.event = 'click'; + this.plugins = plugins || []; + this.config = config || {}; this.id = trigger.dataset.id; }; Object.assign(Hook.prototype, { + addEvents: function(){}, constructor: Hook, @@ -321,31 +339,61 @@ module.exports = Hook; var CustomEvent = require('./custom_event_polyfill'); var Hook = require('./hook'); -var HookButton = function(trigger, list) { - Hook.call(this, trigger, list); +var HookButton = function(trigger, list, plugins, config) { + Hook.call(this, trigger, list, plugins, config); this.type = 'button'; this.event = 'click'; this.addEvents(); + this.addPlugins(); }; HookButton.prototype = Object.create(Hook.prototype); Object.assign(HookButton.prototype, { + addPlugins: function() { + this.plugins.forEach(function(plugin) { + plugin.init(this); + }); + }, + + clicked: function(e){ + var buttonEvent = new CustomEvent('click.dl', { + detail: { + hook: this, + }, + bubbles: true, + cancelable: true + }); + this.list.show(); + e.target.dispatchEvent(buttonEvent); + }, + addEvents: function(){ - var self = this; - this.trigger.addEventListener('click', function(e){ - var buttonEvent = new CustomEvent('click.dl', { - detail: { - hook: self, - }, - bubbles: true, - cancelable: true - }); - self.list.show(); - e.target.dispatchEvent(buttonEvent); + this.clickedWrapper = this.clicked.bind(this); + this.trigger.addEventListener('click', this.clickedWrapper); + }, + + removeEvents: function(){ + this.trigger.removeEventListener('click', this.clickedWrapper); + }, + + restoreInitialState: function() { + this.list.list.innerHTML = this.list.initialState; + }, + + removePlugins: function() { + this.plugins.forEach(function(plugin) { + plugin.destroy(); }); }, + destroy: function() { + this.restoreInitialState(); + this.removeEvents(); + this.removePlugins(); + }, + + constructor: HookButton, }); @@ -356,18 +404,26 @@ module.exports = HookButton; var CustomEvent = require('./custom_event_polyfill'); var Hook = require('./hook'); -var HookInput = function(trigger, list) { - Hook.call(this, trigger, list); +var HookInput = function(trigger, list, plugins, config) { + Hook.call(this, trigger, list, plugins, config); this.type = 'input'; this.event = 'input'; + this.addPlugins(); this.addEvents(); }; Object.assign(HookInput.prototype, { + addPlugins: function() { + var self = this; + this.plugins.forEach(function(plugin) { + plugin.init(self); + }); + }, + addEvents: function(){ var self = this; - function mousedown(e) { + this.mousedown = function mousedown(e) { var mouseEvent = new CustomEvent('mousedown.dl', { detail: { hook: self, @@ -379,7 +435,7 @@ Object.assign(HookInput.prototype, { e.target.dispatchEvent(mouseEvent); } - function input(e) { + this.input = function input(e) { var inputEvent = new CustomEvent('input.dl', { detail: { hook: self, @@ -392,11 +448,11 @@ Object.assign(HookInput.prototype, { self.list.show(); } - function keyup(e) { + this.keyup = function keyup(e) { keyEvent(e, 'keyup.dl'); } - function keydown(e) { + this.keydown = function keydown(e) { keyEvent(e, 'keydown.dl'); } @@ -416,15 +472,38 @@ Object.assign(HookInput.prototype, { } this.events = this.events || {}; - this.events.mousedown = mousedown; - this.events.input = input; - this.events.keyup = keyup; - this.events.keydown = keydown; - this.trigger.addEventListener('mousedown', mousedown); - this.trigger.addEventListener('input', input); - this.trigger.addEventListener('keyup', keyup); - this.trigger.addEventListener('keydown', keydown); + this.events.mousedown = this.mousedown; + this.events.input = this.input; + this.events.keyup = this.keyup; + this.events.keydown = this.keydown; + this.trigger.addEventListener('mousedown', this.mousedown); + this.trigger.addEventListener('input', this.input); + this.trigger.addEventListener('keyup', this.keyup); + this.trigger.addEventListener('keydown', this.keydown); }, + + removeEvents: function(){ + this.trigger.removeEventListener('mousedown', this.mousedown); + this.trigger.removeEventListener('input', this.input); + this.trigger.removeEventListener('keyup', this.keyup); + this.trigger.removeEventListener('keydown', this.keydown); + }, + + restoreInitialState: function() { + this.list.list.innerHTML = this.list.initialState; + }, + + removePlugins: function() { + this.plugins.forEach(function(plugin) { + plugin.destroy(); + }); + }, + + destroy: function() { + this.restoreInitialState(); + this.removeEvents(); + this.removePlugins(); + } }); module.exports = HookInput; @@ -433,21 +512,14 @@ module.exports = HookInput; var DropLab = require('./droplab')(); var DATA_TRIGGER = require('./constants').DATA_TRIGGER; var keyboard = require('./keyboard')(); - var setup = function() { - var droplab = DropLab(); - require('./window')(function(w) { - w.addEventListener('load', function() { - var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']')); - droplab.addHooks(dropdownTriggers).init(); - }); - }); - return droplab; + window.DropLab = DropLab; }; + module.exports = setup(); -},{"./constants":1,"./droplab":4,"./keyboard":9,"./window":11}],9:[function(require,module,exports){ +},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){ require('./window')(function(w){ module.exports = function(){ var currentKey; @@ -557,7 +629,7 @@ var camelize = function(str) { }; var closest = function(thisTag, stopTag) { - while(thisTag !== null && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){ + while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){ thisTag = thisTag.parentNode; } return thisTag; diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index 2dff5b83fae..b81663c281d 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -1,52 +1,59 @@ /* eslint-disable */ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o { class DropdownAssignee extends gl.FilteredSearchDropdown { - constructor(dropdown, input) { - super(dropdown, input); + constructor(droplab, dropdown, input) { + super(droplab, dropdown, input); this.listId = 'js-dropdown-assignee'; } @@ -20,8 +20,13 @@ } renderContent() { - super.renderContent(); - droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); + // TODO: Pass elements instead of querySelectors + this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], { + droplabAjax: { + endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users=', + method: 'setData', + } + }); } filterMethod(item, query) { diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index 37e2e80533b..c02f1e25407 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -3,8 +3,8 @@ ((global) => { class DropdownAuthor extends gl.FilteredSearchDropdown { - constructor(dropdown, input) { - super(dropdown, input); + constructor(droplab, dropdown, input) { + super(droplab, dropdown, input); this.listId = 'js-dropdown-author'; } @@ -16,8 +16,13 @@ } renderContent() { - super.renderContent(); - droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users='); + // TODO: Pass elements instead of querySelectors + this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjax], { + droplabAjax: { + endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users=', + method: 'setData', + } + }); } filterMethod(item, query) { diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 0bee2eb2986..481faa7fd49 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -21,10 +21,9 @@ }]; class DropdownHint extends gl.FilteredSearchDropdown { - constructor(dropdown, input, filterKeyword) { - super(dropdown, input); + constructor(droplab, dropdown, input) { + super(droplab, dropdown, input); this.listId = 'js-dropdown-hint'; - this.filterKeyword = filterKeyword; } itemClicked(e) { @@ -39,8 +38,13 @@ } renderContent() { - super.renderContent(); - droplab.setData(this.hookId, dropdownData); + this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], { + droplabFilter: { + template: 'hint', + filterFunction: this.filterMethod, + } + }); + this.droplab.setData(this.hookId, dropdownData); } filterMethod(item, query) { @@ -54,6 +58,14 @@ return item; } + + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabFilter], { + droplabFilter: { + template: 'hint', + } + }).init(); + } } global.DropdownHint = DropdownHint; diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index e2c1305597a..af47ad2a1f8 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -3,9 +3,10 @@ ((global) => { class DropdownLabel extends gl.FilteredSearchDropdown { - constructor(dropdown, input) { - super(dropdown, input); + constructor(droplab, dropdown, input) { + super(droplab, dropdown, input); this.listId = 'js-dropdown-label'; + this.filterSymbol = '~'; } itemClicked(e) { @@ -21,20 +22,17 @@ } renderContent() { - super.renderContent(); - droplab.setData(this.hookId, 'labels.json'); - } - - filterMethod(item, query) { - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); - const valueWithoutPrefix = valueWithoutColon.slice(1); - - const title = item.title.toLowerCase(); - const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1; - - item.droplab_hidden = noTitleMatch; - return item; + // TODO: Pass elements instead of querySelectors + // TODO: Don't bind filterWithSymbol to (this), just pass the symbol + this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], { + droplabAjax: { + endpoint: 'labels.json', + method: 'setData', + }, + droplabFilter: { + filterFunction: this.filterWithSymbol.bind(this), + } + }); } } diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index cd185d31917..9810767eb66 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -3,9 +3,10 @@ ((global) => { class DropdownMilestone extends gl.FilteredSearchDropdown { - constructor(dropdown, input) { - super(dropdown, input); + constructor(droplab, dropdown, input) { + super(droplab, dropdown, input); this.listId = 'js-dropdown-milestone'; + this.filterSymbol = '%'; } itemClicked(e) { @@ -21,21 +22,16 @@ } renderContent() { - super.renderContent(); - droplab.setData(this.hookId, 'milestones.json'); - } - - filterMethod(item, query) { - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); - const valueWithoutPrefix = valueWithoutColon.slice(1); - - const title = item.title.toLowerCase(); - - const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1; - - item.droplab_hidden = noTitleMatch; - return item; + // TODO: Pass elements instead of querySelectors + this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], { + droplabAjax: { + endpoint: 'milestones.json', + method: 'setData', + }, + droplabFilter: { + filterFunction: this.filterWithSymbol.bind(this), + } + }); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index edffd7fb8e2..80c3407b7fa 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -3,7 +3,8 @@ const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger'; class FilteredSearchDropdown { - constructor(dropdown, input) { + constructor(droplab, dropdown, input) { + this.droplab = droplab; this.hookId = 'filtered-search'; this.input = input; this.dropdown = dropdown; @@ -66,25 +67,11 @@ destroy() { this.input.setAttribute(DATA_DROPDOWN_TRIGGER, ''); - droplab.setConfig(this.getFilterConfig()); - droplab.setData(this.hookId, []); + this.droplab.setConfig(this.getFilterConfig()); + this.droplab.setData(this.hookId, []); this.unbindEvents(); } - show() { - const currentHook = this.getCurrentHook(); - if (currentHook) { - currentHook.list.show(); - } - } - - hide() { - const currentHook = this.getCurrentHook(); - if (currentHook) { - currentHook.list.hide(); - } - } - dismissDropdown() { this.input.focus(); // Propogate input change to FilteredSearchManager @@ -111,30 +98,24 @@ } getCurrentHook() { - return droplab.hooks.filter(h => h.id === this.hookId)[0]; + return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; } renderContent() { - droplab.setConfig(this.getFilterConfig(this.filterKeyword)); + // Overriden by dropdown sub class } - render(hide) { + render(forceRenderContent) { this.setAsDropdown(); const firstTimeInitialized = this.getCurrentHook() === undefined; - if (firstTimeInitialized) { + if (firstTimeInitialized || forceRenderContent) { this.renderContent(); } else if(this.getCurrentHook().list.list.id !== this.listId) { - droplab.changeHookList(this.hookId, `#${this.listId}`); + // this.droplab.changeHookList(this.hookId, `#${this.listId}`); this.renderContent(); } - - if (hide) { - this.hide(); - } else { - this.show(); - } } resetFilters() { @@ -152,6 +133,29 @@ } } } + + hide() { + const currentHook = this.getCurrentHook(); + if (currentHook) { + currentHook.list.hide(); + } + } + + filterWithSymbol(item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutColon = value.slice(1).toLowerCase(); + const prefix = valueWithoutColon[0]; + const valueWithoutPrefix = valueWithoutColon.slice(1); + + const title = item.title.toLowerCase(); + + // Eg. this.filterSymbol = ~ for labels + const matchWithoutPrefix = prefix === this.filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; + const match = title.indexOf(valueWithoutColon) !== -1; + + item.droplab_hidden = !match && !matchWithoutPrefix; + return item; + } } global.FilteredSearchDropdown = FilteredSearchDropdown; diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 841738ff627..af8e145fa7f 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -101,11 +101,18 @@ } loadDropdown(dropdownName = '', hideDropdown) { + let firstLoad = false; + const filteredSearch = document.querySelector('.filtered-search'); + + if(!this.droplab) { + firstLoad = true; + this.droplab = new DropLab(); + } + dropdownName = dropdownName.toLowerCase(); const filterIconPadding = 27; const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; - const filteredSearch = document.querySelector('.filtered-search'); if (!this.font) { this.font = window.getComputedStyle(filteredSearch).font; @@ -116,34 +123,38 @@ const dynamicDropdownPadding = 12; const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding; + const dropdownAuthorElement = document.querySelector('#js-dropdown-author'); + const dropdownAssigneeElement = document.querySelector('#js-dropdown-assignee'); + const dropdownMilestoneElement = document.querySelector('#js-dropdown-milestone'); + const dropdownLabelElemenet = document.querySelector('#js-dropdown-label'); this.dismissCurrentDropdown(); this.currentDropdown = match.key; if (match.key === 'author') { if (!dropdownAuthor) { - dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), filteredSearch); + dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch); } dropdownAuthor.setOffset(dropdownOffset); dropdownAuthor.render(); } else if (match.key === 'assignee') { if (!dropdownAssignee) { - dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), filteredSearch); + dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch); } dropdownAssignee.setOffset(dropdownOffset); dropdownAssignee.render(); } else if (match.key === 'milestone') { if (!dropdownMilestone) { - dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), filteredSearch); + dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch); } dropdownMilestone.setOffset(dropdownOffset); dropdownMilestone.render(); } else if (match.key === 'label') { if (!dropdownLabel) { - dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), filteredSearch); + dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch); } dropdownLabel.setOffset(dropdownOffset); @@ -154,22 +165,29 @@ console.log('🦄 load hint dropdown'); const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding; - console.log(dropdownOffset) + const dropdownHintElement = document.querySelector('#js-dropdown-hint'); + this.dismissCurrentDropdown(); this.currentDropdown = 'hint'; - if (!dropdownHint) { - dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown); + dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch); + } + + if (firstLoad) { + dropdownHint.configure(); } + dropdownHint.setOffset(dropdownOffset); - dropdownHint.render(hideDropdown); + dropdownHint.render(firstLoad); } } dismissCurrentDropdown() { - if (this.currentDropdown === 'hint') { - dropdownHint.destroy(); - } + // if (this.currentDropdown === 'hint') { + // dropdownHint.hide(); + // } else if (this.currentDropdown === 'author') { + // // dropdownAuthor.hide(); + // } } setDropdown() { -- cgit v1.2.1 From 3cf0ee6c1f13d111da933cdea98b46582c7c4306 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 8 Dec 2016 15:42:58 -0600 Subject: Fix turbolinks issue by cleaning up droplab on page:change --- .../filtered_search/filtered_search_manager.js.es6 | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index af8e145fa7f..f28ce6b4366 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -81,6 +81,25 @@ this.bindEvents(); loadSearchParamsFromURL(); this.setDropdown(); + + document.addEventListener('page:change', this.cleanup); + } + + cleanup() { + console.log('cleanup') + + if (this.droplab) { + this.droplab.destroy(); + this.droplab = null; + } + + dropdownHint = null; + dropdownAuthor = null; + dropdownAssignee = null; + dropdownMilestone = null; + dropdownLabel = null; + + document.removeEventListener('page:change', this.cleanup); } static addWordToInput(word, addSpace) { -- cgit v1.2.1 From c5029c65450522359ec8b869c1433ed89db3c303 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 8 Dec 2016 16:40:46 -0600 Subject: Add basic ajax filtering for author --- .../javascripts/droplab/droplab_ajax_filter.js | 109 +++++++++++++++++++++ .../filtered_search/dropdown_author.js.es6 | 34 ++++--- 2 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 app/assets/javascripts/droplab/droplab_ajax_filter.js (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js new file mode 100644 index 00000000000..b346f22f1c2 --- /dev/null +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -0,0 +1,109 @@ +/* eslint-disable */ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o -1; + if (invalidKeyPressed || this.loading) { + return; + } + + if (this.timeout) { + clearTimeout(this.timeout); + } + + this.timeout = setTimeout(this.trigger.bind(this), 200); + }, + + trigger: function trigger() { + var config = this.hook.config.droplabAjaxFilter; + var searchValue = this.trigger.value; + + if (!config || !config.endpoint || !config.searchKey) { + return; + } + + if (config.searchValueFunction) { + searchValue = config.searchValueFunction(); + } + + if (searchValue === config.searchKey) { + return this.list.show(); + } + + this.loading = true; + this.hook.list.setData([]); + + var params = config.params || {}; + params[config.searchKey] = searchValue; + var self = this; + this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { + self.hook.list.addData.call(self.hook.list, data[0]); + self.notLoading(); + }); + }, + + _loadUrlData: function _loadUrlData(url) { + return new Promise(function(resolve, reject) { + var xhr = new XMLHttpRequest; + xhr.open('GET', url, true); + xhr.onreadystatechange = function () { + if(xhr.readyState === XMLHttpRequest.DONE) { + if (xhr.status === 200) { + var data = JSON.parse(xhr.responseText); + return resolve([data, xhr]); + } else { + return reject([xhr.responseText, xhr.status]); + } + } + }; + xhr.send(); + }); + }, + + buildParams: function(params) { + if (!params) return ''; + var paramsArray = Object.keys(params).map(function(param) { + return param + '=' + (params[param] || ''); + }); + return '?' + paramsArray.join('&'); + }, + + destroy: function destroy() { + if (this.timeout) { + clearTimeout(this.timeout); + } + + this.hook.trigger.removeEventListener('keydown.dl', this.debounceTrigger); + this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper); + } + }; +}); +},{"../window":2}],2:[function(require,module,exports){ +module.exports = function(callback) { + return (function() { + callback(this); + }).call(null); +}; + +},{}]},{},[1])(1) +}); \ No newline at end of file diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index c02f1e25407..cb3a6b6ab6d 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -17,27 +17,33 @@ renderContent() { // TODO: Pass elements instead of querySelectors - this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjax], { - droplabAjax: { - endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users=', - method: 'setData', + this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjaxFilter], { + droplabAjaxFilter: { + endpoint: '/autocomplete/users.json', + searchKey: 'search', + params: { + per_page: 20, + active: true, + project_id: 2, + current_user: true, + }, + searchValueFunction: this.getSearchInput, } }); } - filterMethod(item, query) { + getSearchInput() { + const query = document.querySelector('.filtered-search').value; const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); + const valueWithoutColon = value.slice(1); + const hasPrefix = valueWithoutColon[0] === '@'; const valueWithoutPrefix = valueWithoutColon.slice(1); - const username = item.username.toLowerCase(); - const name = item.name.toLowerCase(); - - const noUsernameMatch = username.indexOf(valueWithoutPrefix) === -1 && username.indexOf(valueWithoutColon) === -1; - const noNameMatch = name.indexOf(valueWithoutColon) === -1; - - item.droplab_hidden = noUsernameMatch && noNameMatch; - return item; + if (hasPrefix) { + return valueWithoutPrefix; + } else { + return valueWithoutColon; + } } } -- cgit v1.2.1 From ed4e525a3bd05dfb32aa3c2baa9bf19688319b1a Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 11:44:09 -0600 Subject: Code cleanup --- app/assets/javascripts/droplab/droplab.js | 11 +- .../javascripts/droplab/droplab_ajax_filter.js | 13 +- .../filtered_search/dropdown_assignee.js.es6 | 41 +++-- .../filtered_search/dropdown_author.js.es6 | 31 ++-- .../filtered_search/dropdown_hint.js.es6 | 30 ++-- .../filtered_search/dropdown_label.js.es6 | 26 +-- .../filtered_search/dropdown_milestone.js.es6 | 25 +-- .../filtered_search_dropdown.js.es6 | 65 ++----- .../filtered_search/filtered_search_manager.js.es6 | 194 +++++++++------------ 9 files changed, 202 insertions(+), 234 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 4d83b609a73..b17f156acb4 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -39,6 +39,10 @@ var DropDown = function(list, trigger) { this.getItems(); this.addEvents(); this.initialState = list.innerHTML; + + if (this.initialState.indexOf('{{') == -1) { + debugger + } }; Object.assign(DropDown.prototype, { @@ -138,6 +142,10 @@ Object.assign(DropDown.prototype, { this.list.style.display = 'none'; this.hidden = true; }, + + destroy: function() { + this.hide(); + } }); module.exports = DropDown; @@ -247,7 +255,7 @@ require('./window')(function(w){ changeHookList: function(trigger, list, plugins, config) { trigger = document.querySelector('[data-id="'+trigger+'"]'); - list = document.querySelector(list); + // list = document.querySelector(list); this.hooks.every(function(hook, i) { if(hook.trigger === trigger) { // Restore initial State @@ -503,6 +511,7 @@ Object.assign(HookInput.prototype, { this.restoreInitialState(); this.removeEvents(); this.removePlugins(); + this.list.destroy(); } }); diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index b346f22f1c2..c345fda1075 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -8,14 +8,12 @@ require('../window')(function(w){ this.hook = hook; this.notLoading(); - this.hook.trigger.addEventListener('keydown.dl', this.debounceTrigger.bind(this)); + this.debounceTriggerWrapper = this.debounceTrigger.bind(this); + this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper); + this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper); this.trigger(); }, - debounceTriggerWrapper() { - return this.debounceTrigger.bind(this.hook); - }, - notLoading: function notLoading() { this.loading = false; }, @@ -57,7 +55,8 @@ require('../window')(function(w){ params[config.searchKey] = searchValue; var self = this; this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { - self.hook.list.addData.call(self.hook.list, data[0]); + self.hook.restoreInitialState.call(self.hook); + self.hook.list.setData.call(self.hook.list, data[0]); self.notLoading(); }); }, @@ -93,7 +92,7 @@ require('../window')(function(w){ clearTimeout(this.timeout); } - this.hook.trigger.removeEventListener('keydown.dl', this.debounceTrigger); + this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper); this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper); } }; diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index 7609546a3a6..b2b03b637e7 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -6,6 +6,19 @@ constructor(droplab, dropdown, input) { super(droplab, dropdown, input); this.listId = 'js-dropdown-assignee'; + this.config = { + droplabAjaxFilter: { + endpoint: '/autocomplete/users.json', + searchKey: 'search', + params: { + per_page: 20, + active: true, + project_id: 2, + current_user: true, + }, + searchValueFunction: this.getSearchInput, + } + }; } itemClicked(e) { @@ -21,27 +34,25 @@ renderContent() { // TODO: Pass elements instead of querySelectors - this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], { - droplabAjax: { - endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users=', - method: 'setData', - } - }); + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); } - filterMethod(item, query) { + getSearchInput() { + const query = document.querySelector('.filtered-search').value; const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); + const valueWithoutColon = value.slice(1); + const hasPrefix = valueWithoutColon[0] === '@'; const valueWithoutPrefix = valueWithoutColon.slice(1); - const username = item.username.toLowerCase(); - const name = item.name.toLowerCase(); - - const noUsernameMatch = username.indexOf(valueWithoutPrefix) === -1 && username.indexOf(valueWithoutColon) === -1; - const noNameMatch = name.indexOf(valueWithoutColon) === -1; + if (hasPrefix) { + return valueWithoutPrefix; + } else { + return valueWithoutColon; + } + } - item.droplab_hidden = noUsernameMatch && noNameMatch; - return item; + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index cb3a6b6ab6d..9bd49ab1a78 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -6,18 +6,7 @@ constructor(droplab, dropdown, input) { super(droplab, dropdown, input); this.listId = 'js-dropdown-author'; - } - - itemClicked(e) { - const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); - - this.dismissDropdown(); - } - - renderContent() { - // TODO: Pass elements instead of querySelectors - this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjaxFilter], { + this.config = { droplabAjaxFilter: { endpoint: '/autocomplete/users.json', searchKey: 'search', @@ -29,7 +18,19 @@ }, searchValueFunction: this.getSearchInput, } - }); + }; + } + + itemClicked(e) { + const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); + + this.dismissDropdown(); + } + + renderContent() { + // TODO: Pass elements instead of querySelectors + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); } getSearchInput() { @@ -45,6 +46,10 @@ return valueWithoutColon; } } + + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); + } } global.DropdownAuthor = DropdownAuthor; diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 481faa7fd49..f885267880a 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -24,26 +24,30 @@ constructor(droplab, dropdown, input) { super(droplab, dropdown, input); this.listId = 'js-dropdown-hint'; + this.config = { + droplabFilter: { + template: 'hint', + filterFunction: this.filterMethod, + } + }; } itemClicked(e) { - const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim(); - const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim(); + const selected = e.detail.selected; + if (!selected.hasAttribute('data-value')) { + const token = selected.querySelector('.js-filter-hint').innerText.trim(); + const tag = selected.querySelector('.js-filter-tag').innerText.trim(); - if (tag.length) { - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); + if (tag.length) { + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); + } } this.dismissDropdown(); } renderContent() { - this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], { - droplabFilter: { - template: 'hint', - filterFunction: this.filterMethod, - } - }); + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config); this.droplab.setData(this.hookId, dropdownData); } @@ -60,11 +64,7 @@ } configure() { - this.droplab.addHook(this.input, this.dropdown, [droplabFilter], { - droplabFilter: { - template: 'hint', - } - }).init(); + this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index af47ad2a1f8..24a795808ca 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -6,7 +6,15 @@ constructor(droplab, dropdown, input) { super(droplab, dropdown, input); this.listId = 'js-dropdown-label'; - this.filterSymbol = '~'; + this.config = { + droplabAjax: { + endpoint: 'labels.json', + method: 'setData', + }, + droplabFilter: { + filterFunction: this.filterWithSymbol.bind(this, '~'), + } + }; } itemClicked(e) { @@ -22,17 +30,11 @@ } renderContent() { - // TODO: Pass elements instead of querySelectors - // TODO: Don't bind filterWithSymbol to (this), just pass the symbol - this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], { - droplabAjax: { - endpoint: 'labels.json', - method: 'setData', - }, - droplabFilter: { - filterFunction: this.filterWithSymbol.bind(this), - } - }); + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); + } + + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 9810767eb66..458a9b1c5c1 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -6,7 +6,15 @@ constructor(droplab, dropdown, input) { super(droplab, dropdown, input); this.listId = 'js-dropdown-milestone'; - this.filterSymbol = '%'; + this.config = { + droplabAjax: { + endpoint: 'milestones.json', + method: 'setData', + }, + droplabFilter: { + filterFunction: this.filterWithSymbol.bind(this, '%'), + } + }; } itemClicked(e) { @@ -22,16 +30,11 @@ } renderContent() { - // TODO: Pass elements instead of querySelectors - this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], { - droplabAjax: { - endpoint: 'milestones.json', - method: 'setData', - }, - droplabFilter: { - filterFunction: this.filterWithSymbol.bind(this), - } - }); + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); + } + + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 80c3407b7fa..2f92c7b2e2a 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -12,11 +12,16 @@ } bindEvents() { - this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this)); + this.itemClickedWrapper = this.itemClicked.bind(this); + this.dropdown.addEventListener('click.dl', this.itemClickedWrapper); } unbindEvents() { - this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this)); + this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper); + } + + getCurrentHook() { + return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; } getEscapedText(text) { @@ -49,34 +54,8 @@ // Overridden by dropdown sub class } - getFilterConfig(filterKeyword) { - const config = {}; - const filterConfig = {}; - - if (filterKeyword) { - filterConfig.text = filterKeyword; - } - - if (this.filterMethod) { - filterConfig.filter = this.filterMethod; - } - - config[this.hookId] = filterConfig; - return config; - } - - destroy() { - this.input.setAttribute(DATA_DROPDOWN_TRIGGER, ''); - this.droplab.setConfig(this.getFilterConfig()); - this.droplab.setData(this.hookId, []); - this.unbindEvents(); - } - - dismissDropdown() { - this.input.focus(); - // Propogate input change to FilteredSearchManager - // so that it can determine which dropdowns to open - this.input.dispatchEvent(new Event('input')); + renderContent() { + // Overriden by dropdown sub class } setAsDropdown() { @@ -97,13 +76,12 @@ return dataValue !== null; } - getCurrentHook() { - return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; - } - - renderContent() { - // Overriden by dropdown sub class - } + dismissDropdown() { + this.input.focus(); + // Propogate input change to FilteredSearchManager + // so that it can determine which dropdowns to open + this.input.dispatchEvent(new Event('input')); + } render(forceRenderContent) { this.setAsDropdown(); @@ -134,14 +112,7 @@ } } - hide() { - const currentHook = this.getCurrentHook(); - if (currentHook) { - currentHook.list.hide(); - } - } - - filterWithSymbol(item, query) { + filterWithSymbol(filterSymbol, item, query) { const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); const valueWithoutColon = value.slice(1).toLowerCase(); const prefix = valueWithoutColon[0]; @@ -149,8 +120,8 @@ const title = item.title.toLowerCase(); - // Eg. this.filterSymbol = ~ for labels - const matchWithoutPrefix = prefix === this.filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; + // Eg. filterSymbol = ~ for labels + const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; const match = title.indexOf(valueWithoutColon) !== -1; item.droplab_hidden = !match && !matchWithoutPrefix; diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index f28ce6b4366..9846f3ba50d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -69,20 +69,19 @@ } } - let dropdownHint; - let dropdownAuthor; - let dropdownAssignee; - let dropdownMilestone; - let dropdownLabel; - class FilteredSearchManager { constructor() { this.tokenizer = gl.FilteredSearchTokenizer; + this.filteredSearchInput = document.querySelector('.filtered-search'); + this.clearSearchButton = document.querySelector('.clear-search'); + + this.setupMapping(); this.bindEvents(); loadSearchParamsFromURL(); this.setDropdown(); - document.addEventListener('page:change', this.cleanup); + this.cleanupWrapper = this.cleanup.bind(this); + document.addEventListener('page:fetch', this.cleanupWrapper); } cleanup() { @@ -93,124 +92,105 @@ this.droplab = null; } - dropdownHint = null; - dropdownAuthor = null; - dropdownAssignee = null; - dropdownMilestone = null; - dropdownLabel = null; + this.setupMapping(); + + document.removeEventListener('page:fetch', this.cleanupWrapper); + } - document.removeEventListener('page:change', this.cleanup); + setupMapping() { + this.mapping = { + author: { + reference: null, + gl: 'DropdownAuthor', + element: document.querySelector('#js-dropdown-author'), + }, + assignee: { + reference: null, + gl: 'DropdownAssignee', + element: document.querySelector('#js-dropdown-assignee'), + }, + milestone: { + reference: null, + gl: 'DropdownMilestone', + element: document.querySelector('#js-dropdown-milestone'), + }, + label: { + reference: null, + gl: 'DropdownLabel', + element: document.querySelector('#js-dropdown-label'), + }, + hint: { + reference: null, + gl: 'DropdownHint', + element: document.querySelector('#js-dropdown-hint'), + }, + } } static addWordToInput(word, addSpace) { - const filteredSearchValue = document.querySelector('.filtered-search').value; + const filteredSearchInput = document.querySelector('.filtered-search') + const filteredSearchValue = filteredSearchInput.value; const hasExistingValue = filteredSearchValue.length !== 0; - const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue); + if (lastToken.hasOwnProperty('key')) { console.log(lastToken); // Spaces inside the token means that the token value will be escaped by quotes const hasQuotes = lastToken.value.indexOf(' ') !== -1; - const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length; - document.querySelector('.filtered-search').value = filteredSearchValue.slice(0, -1 * (lengthToRemove)); + filteredSearchInput.value = filteredSearchValue.slice(0, -1 * (lengthToRemove)); } - document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word; + filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word; } - loadDropdown(dropdownName = '', hideDropdown) { - let firstLoad = false; - const filteredSearch = document.querySelector('.filtered-search'); - - if(!this.droplab) { - firstLoad = true; - this.droplab = new DropLab(); - } - - dropdownName = dropdownName.toLowerCase(); - + load(key, firstLoad = false) { + console.log(`🦄 load ${key} dropdown`); + const glClass = this.mapping[key].gl; + const element = this.mapping[key].element; const filterIconPadding = 27; - const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]; + const dropdownOffset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; - if (!this.font) { - this.font = window.getComputedStyle(filteredSearch).font; + if (!this.mapping[key].reference) { + this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput); } - if (match && this.currentDropdown !== match.key) { - console.log(`🦄 load ${match.key} dropdown`); - - const dynamicDropdownPadding = 12; - const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding; - const dropdownAuthorElement = document.querySelector('#js-dropdown-author'); - const dropdownAssigneeElement = document.querySelector('#js-dropdown-assignee'); - const dropdownMilestoneElement = document.querySelector('#js-dropdown-milestone'); - const dropdownLabelElemenet = document.querySelector('#js-dropdown-label'); - - this.dismissCurrentDropdown(); - this.currentDropdown = match.key; - - if (match.key === 'author') { - if (!dropdownAuthor) { - dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch); - } - - dropdownAuthor.setOffset(dropdownOffset); - dropdownAuthor.render(); - } else if (match.key === 'assignee') { - if (!dropdownAssignee) { - dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch); - } - - dropdownAssignee.setOffset(dropdownOffset); - dropdownAssignee.render(); - } else if (match.key === 'milestone') { - if (!dropdownMilestone) { - dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch); - } + if (firstLoad) { + this.mapping[key].reference.configure(); + } - dropdownMilestone.setOffset(dropdownOffset); - dropdownMilestone.render(); - } else if (match.key === 'label') { - if (!dropdownLabel) { - dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch); - } + this.mapping[key].reference.setOffset(dropdownOffset); + this.mapping[key].reference.render(firstLoad); - dropdownLabel.setOffset(dropdownOffset); - dropdownLabel.render(); - } + this.currentDropdown = key; + } - } else if (!match && this.currentDropdown !== 'hint') { - console.log('🦄 load hint dropdown'); + loadDropdown(dropdownName = '') { + let firstLoad = false; - const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding; - const dropdownHintElement = document.querySelector('#js-dropdown-hint'); + if(!this.droplab) { + firstLoad = true; + this.droplab = new DropLab(); + } - this.dismissCurrentDropdown(); - this.currentDropdown = 'hint'; - if (!dropdownHint) { - dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch); - } + if (!this.font) { + this.font = window.getComputedStyle(this.filteredSearchInput).font; + } - if (firstLoad) { - dropdownHint.configure(); - } + const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0]; + const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key); + const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; - dropdownHint.setOffset(dropdownOffset); - dropdownHint.render(firstLoad); + if (shouldOpenFilterDropdown || shouldOpenHintDropdown) { + const key = match && match.hasOwnProperty('key') ? match.key : 'hint'; + this.load(key, firstLoad); } - } - dismissCurrentDropdown() { - // if (this.currentDropdown === 'hint') { - // dropdownHint.hide(); - // } else if (this.currentDropdown === 'author') { - // // dropdownAuthor.hide(); - // } + gl.droplab = this.droplab; } setDropdown() { - const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value); + const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); if (typeof lastToken === 'string') { // Token is not fully initialized yet @@ -228,32 +208,20 @@ } bindEvents() { - const filteredSearchInput = document.querySelector('.filtered-search'); - - filteredSearchInput.addEventListener('input', this.setDropdown.bind(this)); - filteredSearchInput.addEventListener('input', toggleClearSearchButton); - filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this)); - document.querySelector('.clear-search').addEventListener('click', this.clearSearch.bind(this)); + this.filteredSearchInput.addEventListener('input', this.setDropdown.bind(this)); + this.filteredSearchInput.addEventListener('input', toggleClearSearchButton); + this.filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this)); + this.clearSearchButton.addEventListener('click', this.clearSearch.bind(this)); } clearSearch(e) { e.stopPropagation(); e.preventDefault(); - document.querySelector('.filtered-search').value = ''; - document.querySelector('.clear-search').classList.add('hidden'); + this.filteredSearchInput.value = ''; + this.clearSearchButton.classList.add('hidden'); dropdownHint.resetFilters(); - this.loadDropdown('hint', true); - } - - checkDropdownToken(e) { - const input = e.target.value; - const { lastToken } = this.tokenizer.processTokens(input); - - // Check for dropdown token - if (lastToken[lastToken.length - 1] === ':') { - const token = lastToken.slice(0, -1); - } + this.loadDropdown('hint'); } checkForEnter(e) { -- cgit v1.2.1 From c18285cec0dadc0af8fa062a10d6cd581efb0b66 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 12:11:29 -0600 Subject: Fixed issue where dropdown would not open after clicking on a dropdown item --- app/assets/javascripts/droplab/droplab.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index b17f156acb4..6b326338050 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -234,8 +234,7 @@ require('./window')(function(w){ var self = this; this.windowClickedWrapper = function(e){ var thisTag = e.target; - if(thisTag.tagName === 'LI' || thisTag.tagName === 'A' - || thisTag.tagName === 'BUTTON'){ + if(thisTag.tagName !== 'UL'){ // climb up the tree to find the UL thisTag = utils.closest(thisTag, 'UL'); } -- cgit v1.2.1 From f0608878ce8fd8dfaa91a285eff6d3db11f509c3 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 13:15:09 -0600 Subject: Fix bug where dropdowns would not dismiss properly --- app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 | 2 +- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 9 ++++++--- app/assets/javascripts/filtered_search/dropdown_label.js.es6 | 3 ++- app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 | 2 +- .../javascripts/filtered_search/filtered_search_dropdown.js.es6 | 7 +++++-- 5 files changed, 15 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index b2b03b637e7..850cca670e4 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -29,7 +29,7 @@ gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); } - this.dismissDropdown(); + this.dismissDropdown(!dataValueSet); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index f885267880a..ea384af09a9 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -34,16 +34,19 @@ itemClicked(e) { const selected = e.detail.selected; - if (!selected.hasAttribute('data-value')) { + + if (selected.hasAttribute('data-value')) { + this.dismissDropdown(); + } else { const token = selected.querySelector('.js-filter-hint').innerText.trim(); const tag = selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); } + this.dismissDropdown(); + this.dispatchInputEvent(); } - - this.dismissDropdown(); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index 24a795808ca..c79df0aee4a 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -26,7 +26,8 @@ gl.FilteredSearchManager.addWordToInput(labelName); } - this.dismissDropdown(); + // debugger + this.dismissDropdown(!dataValueSet); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 458a9b1c5c1..10535097747 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -26,7 +26,7 @@ gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName)); } - this.dismissDropdown(); + this.dismissDropdown(!dataValueSet); } renderContent() { diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 2f92c7b2e2a..cd46e430e01 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -77,11 +77,15 @@ } dismissDropdown() { + this.getCurrentHook().list.hide(); this.input.focus(); + } + + dispatchInputEvent() { // Propogate input change to FilteredSearchManager // so that it can determine which dropdowns to open this.input.dispatchEvent(new Event('input')); - } + } render(forceRenderContent) { this.setAsDropdown(); @@ -91,7 +95,6 @@ if (firstTimeInitialized || forceRenderContent) { this.renderContent(); } else if(this.getCurrentHook().list.list.id !== this.listId) { - // this.droplab.changeHookList(this.hookId, `#${this.listId}`); this.renderContent(); } } -- cgit v1.2.1 From ddc42a61f064757d69d4c61f784dacbcd1334d4d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 13:15:38 -0600 Subject: Fix bug where token values with 2 double quotes were not treated as a complete value --- .../filtered_search/filtered_search_tokenizer.es6 | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index d6df83a3fb9..5ad433f4a09 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -119,19 +119,26 @@ const keyMatch = validTokenKeys.filter(v => v.key === tokenKey)[0]; const symbolMatch = validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; + const doubleQuoteOccurrences = tokenValue.split('"').length - 1; + const singleQuoteOccurrences = tokenValue.split('\'').length - 1; + const doubleQuoteIndex = tokenValue.indexOf('"'); const singleQuoteIndex = tokenValue.indexOf('\''); const doubleQuoteExist = doubleQuoteIndex !== -1; const singleQuoteExist = singleQuoteIndex !== -1; - if ((doubleQuoteExist && !singleQuoteExist) || - (doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex)) { + const doubleQuoteExistOnly = doubleQuoteExist && !singleQuoteExist; + const doubleQuoteIsBeforeSingleQuote = doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex; + + const singleQuoteExistOnly = singleQuoteExist && !doubleQuoteExist; + const singleQuoteIsBeforeDoubleQuote = doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex; + + if ((doubleQuoteExistOnly || doubleQuoteIsBeforeSingleQuote) && doubleQuoteOccurrences % 2 !== 0) { // " is found and is in front of ' (if any) lastQuotation = '"'; incompleteToken = true; - } else if ((singleQuoteExist && !doubleQuoteExist) || - (doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex)) { + } else if ((singleQuoteExistOnly || singleQuoteIsBeforeDoubleQuote) && singleQuoteOccurrences % 2 !== 0) { // ' is found and is in front of " (if any) lastQuotation = '\''; incompleteToken = true; -- cgit v1.2.1 From 002d17f1b7e4d298f45cb7d0dc944e20cbd734b5 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 13:17:19 -0600 Subject: Fix clear button --- app/assets/javascripts/droplab/droplab.js | 51 ++++++++++++---------- .../filtered_search/dropdown_assignee.js.es6 | 4 +- .../filtered_search/dropdown_author.js.es6 | 4 +- .../filtered_search/dropdown_label.js.es6 | 3 +- .../filtered_search/dropdown_milestone.js.es6 | 3 +- .../filtered_search_dropdown.js.es6 | 35 +++++---------- .../filtered_search/filtered_search_manager.js.es6 | 17 ++++++-- .../filtered_search/filtered_search_tokenizer.es6 | 10 ++--- 8 files changed, 66 insertions(+), 61 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 6b326338050..42ddb7a4a56 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -51,26 +51,28 @@ Object.assign(DropDown.prototype, { return this.items; }, + clickEvent: function(e) { + // climb up the tree to find the LI + var selected = utils.closest(e.target, 'LI'); + + if(selected) { + e.preventDefault(); + this.hide(); + var listEvent = new CustomEvent('click.dl', { + detail: { + list: this, + selected: selected, + data: e.target.dataset, + }, + }); + this.list.dispatchEvent(listEvent); + } + }, + addEvents: function() { - var self = this; + this.clickWrapper = this.clickEvent.bind(this); // event delegation. - this.list.addEventListener('click', function(e) { - // climb up the tree to find the LI - var selected = utils.closest(e.target, 'LI'); - - if(selected) { - e.preventDefault(); - self.hide(); - var listEvent = new CustomEvent('click.dl', { - detail: { - list: self, - selected: selected, - data: e.target.dataset, - }, - }); - self.list.dispatchEvent(listEvent); - } - }); + this.list.addEventListener('click', this.clickWrapper); }, toggle: function() { @@ -93,6 +95,7 @@ Object.assign(DropDown.prototype, { // call render manually on data; render: function(data){ + // debugger // empty the list first var sampleItem; var newChildren = []; @@ -134,17 +137,23 @@ Object.assign(DropDown.prototype, { }, show: function() { + // debugger this.list.style.display = 'block'; this.hidden = false; }, hide: function() { + // debugger this.list.style.display = 'none'; this.hidden = true; }, destroy: function() { - this.hide(); + if (!this.hidden) { + this.hide(); + } + + this.list.removeEventListener('click', this.clickWrapper); } }); @@ -257,10 +266,6 @@ require('./window')(function(w){ // list = document.querySelector(list); this.hooks.every(function(hook, i) { if(hook.trigger === trigger) { - // Restore initial State - hook.list.list.innerHTML = hook.list.initialState; - hook.list.hide(); - hook.destroy(); this.hooks.splice(i, 1); this.addHook(trigger, list, plugins, config); diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index 850cca670e4..3420397edda 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -32,9 +32,9 @@ this.dismissDropdown(!dataValueSet); } - renderContent() { - // TODO: Pass elements instead of querySelectors + renderContent(forceShowList = false) { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); + super.renderContent(forceShowList); } getSearchInput() { diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index 9bd49ab1a78..f1401f6f9d2 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -28,9 +28,9 @@ this.dismissDropdown(); } - renderContent() { - // TODO: Pass elements instead of querySelectors + renderContent(forceShowList) { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); + super.renderContent(forceShowList); } getSearchInput() { diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index c79df0aee4a..4c9926c1f78 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -30,8 +30,9 @@ this.dismissDropdown(!dataValueSet); } - renderContent() { + renderContent(forceShowList) { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); + super.renderContent(forceShowList); } configure() { diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 10535097747..33967ddff24 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -29,8 +29,9 @@ this.dismissDropdown(!dataValueSet); } - renderContent() { + renderContent(forceShowList = false) { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); + super.renderContent(forceShowList); } configure() { diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index cd46e430e01..163dac65842 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -4,6 +4,7 @@ class FilteredSearchDropdown { constructor(droplab, dropdown, input) { + console.log('constructor'); this.droplab = droplab; this.hookId = 'filtered-search'; this.input = input; @@ -54,8 +55,10 @@ // Overridden by dropdown sub class } - renderContent() { - // Overriden by dropdown sub class + renderContent(forceShowList = false) { + if (forceShowList && this.getCurrentHook().list.hidden) { + this.getCurrentHook().list.show(); + } } setAsDropdown() { @@ -77,7 +80,6 @@ } dismissDropdown() { - this.getCurrentHook().list.hide(); this.input.focus(); } @@ -87,31 +89,16 @@ this.input.dispatchEvent(new Event('input')); } - render(forceRenderContent) { + render(forceRenderContent = false, forceShowList = false) { this.setAsDropdown(); - const firstTimeInitialized = this.getCurrentHook() === undefined; - - if (firstTimeInitialized || forceRenderContent) { - this.renderContent(); - } else if(this.getCurrentHook().list.list.id !== this.listId) { - this.renderContent(); - } - } - - resetFilters() { const currentHook = this.getCurrentHook(); + const firstTimeInitialized = currentHook === undefined; - if (currentHook) { - const list = currentHook.list; - - if (list.data) { - const data = list.data.map((item) => { - item.droplab_hidden = false; - }); - - list.render(data); - } + if (firstTimeInitialized || forceRenderContent) { + this.renderContent(forceShowList); + } else if(currentHook.list.list.id !== this.listId) { + this.renderContent(forceShowList); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 9846f3ba50d..4f5d144bff3 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -150,6 +150,7 @@ const element = this.mapping[key].element; const filterIconPadding = 27; const dropdownOffset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; + let forceShowList = false; if (!this.mapping[key].reference) { this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput); @@ -159,8 +160,13 @@ this.mapping[key].reference.configure(); } + if (this.currentDropdown === 'hint') { + // Clicked from hint dropdown + forceShowList = true; + } + this.mapping[key].reference.setOffset(dropdownOffset); - this.mapping[key].reference.render(firstLoad); + this.mapping[key].reference.render(firstLoad, forceShowList); this.currentDropdown = key; } @@ -207,6 +213,12 @@ } } + // dismissCurrentDropdown() { + // if (this.currentDropdown === 'hint') { + // this.mapping['hint'].hide(); + // } + // } + bindEvents() { this.filteredSearchInput.addEventListener('input', this.setDropdown.bind(this)); this.filteredSearchInput.addEventListener('input', toggleClearSearchButton); @@ -220,8 +232,7 @@ this.filteredSearchInput.value = ''; this.clearSearchButton.classList.add('hidden'); - dropdownHint.resetFilters(); - this.loadDropdown('hint'); + this.setDropdown(); } checkForEnter(e) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index 5ad433f4a09..4abb5e94d81 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -3,11 +3,11 @@ class FilteredSearchTokenizer { // TODO: Remove when going to pro static printTokens(tokens, searchToken, lastToken) { - // console.log('tokens:'); - // tokens.forEach(token => console.log(token)); - // console.log(`search: ${searchToken}`); - // console.log('last token:'); - // console.log(lastToken); + console.log('tokens:'); + tokens.forEach(token => console.log(token)); + console.log(`search: ${searchToken}`); + console.log('last token:'); + console.log(lastToken); } static parseToken(input) { -- cgit v1.2.1 From 0eb9f53715a8fbbe8ede0043aad5a9c9377716e5 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 15:20:41 -0600 Subject: Prevent droplab from opening dropdown by cleaning it --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 4f5d144bff3..91de7783cc1 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -240,6 +240,10 @@ if (e.keyCode === 13) { e.stopPropagation(); e.preventDefault(); + + // Prevent droplab from opening dropdown + this.droplab.destroy(); + this.search(); } } -- cgit v1.2.1 From e5b061b801ee7b806dd401c97a5b268e3f34859a Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 15:36:44 -0600 Subject: Reposition dropdown when backspace is hit --- .../filtered_search/filtered_search_manager.js.es6 | 45 ++++++++++++++++------ 1 file changed, 33 insertions(+), 12 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 91de7783cc1..d21ae70cdb9 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -94,6 +94,7 @@ this.setupMapping(); + this.unbindEvents(); document.removeEventListener('page:fetch', this.cleanupWrapper); } @@ -144,12 +145,17 @@ filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word; } + updateDropdownOffset(key) { + const filterIconPadding = 27; + const offset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; + + this.mapping[key].reference.setOffset(offset); + } + load(key, firstLoad = false) { console.log(`🦄 load ${key} dropdown`); const glClass = this.mapping[key].gl; const element = this.mapping[key].element; - const filterIconPadding = 27; - const dropdownOffset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; let forceShowList = false; if (!this.mapping[key].reference) { @@ -165,7 +171,7 @@ forceShowList = true; } - this.mapping[key].reference.setOffset(dropdownOffset); + this.updateDropdownOffset(key); this.mapping[key].reference.render(firstLoad, forceShowList); this.currentDropdown = key; @@ -213,17 +219,25 @@ } } - // dismissCurrentDropdown() { - // if (this.currentDropdown === 'hint') { - // this.mapping['hint'].hide(); - // } - // } - bindEvents() { - this.filteredSearchInput.addEventListener('input', this.setDropdown.bind(this)); + this.setDropdownWrapper = this.setDropdown.bind(this); + this.checkForEnterWrapper = this.checkForEnter.bind(this); + this.clearSearchWrapper = this.clearSearch.bind(this); + this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); + + this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper); this.filteredSearchInput.addEventListener('input', toggleClearSearchButton); - this.filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this)); - this.clearSearchButton.addEventListener('click', this.clearSearch.bind(this)); + this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper); + this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper); + this.clearSearchButton.addEventListener('click', this.clearSearchWrapper); + } + + unbindEvents() { + this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper); + this.filteredSearchInput.removeEventListener('input', toggleClearSearchButton); + this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper); + this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper); + this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper); } clearSearch(e) { @@ -235,6 +249,13 @@ this.setDropdown(); } + checkForBackspace(e) { + if (e.keyCode === 8) { + // Reposition dropdown so that it is aligned with cursor + this.updateDropdownOffset(this.currentDropdown); + } + } + checkForEnter(e) { // Enter KeyCode if (e.keyCode === 13) { -- cgit v1.2.1 From 88ed015915e63c07181122c461523d3e1610e98e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 15:47:56 -0600 Subject: Fix clear button so that it resets the dropdowns properly --- .../javascripts/filtered_search/filtered_search_dropdown.js.es6 | 4 ++++ .../javascripts/filtered_search/filtered_search_manager.js.es6 | 8 ++++++++ 2 files changed, 12 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 163dac65842..03835b6522b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -117,6 +117,10 @@ item.droplab_hidden = !match && !matchWithoutPrefix; return item; } + + hideDropdown() { + this.getCurrentHook().list.hide(); + } } global.FilteredSearchDropdown = FilteredSearchDropdown; diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index d21ae70cdb9..0654d7d816a 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -246,7 +246,15 @@ this.filteredSearchInput.value = ''; this.clearSearchButton.classList.add('hidden'); + + // Force dropdown to hide + this.mapping[this.currentDropdown].reference.hideDropdown(); + + // Re-Load dropdown this.setDropdown(); + + // Reposition dropdown so that it is aligned with cursor + this.updateDropdownOffset(this.currentDropdown); } checkForBackspace(e) { -- cgit v1.2.1 From 98a95633f558f4f4762d4e523ef0c495d6f79f68 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 9 Dec 2016 16:02:43 -0600 Subject: Reset filters when clear search is clicked --- .../javascripts/filtered_search/filtered_search_dropdown.js.es6 | 9 +++++++++ .../javascripts/filtered_search/filtered_search_manager.js.es6 | 3 +++ 2 files changed, 12 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 03835b6522b..5186c15cb67 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -121,6 +121,15 @@ hideDropdown() { this.getCurrentHook().list.hide(); } + + resetFilters() { + const hook = this.getCurrentHook(); + const data = hook.list.data; + const results = data.map(function(o) { + o.droplab_hidden = false; + }); + hook.list.render(results); + } } global.FilteredSearchDropdown = FilteredSearchDropdown; diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 0654d7d816a..c7e01fc710d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -247,6 +247,9 @@ this.filteredSearchInput.value = ''; this.clearSearchButton.classList.add('hidden'); + // Reset Filters + this.mapping[this.currentDropdown].reference.resetFilters(); + // Force dropdown to hide this.mapping[this.currentDropdown].reference.hideDropdown(); -- cgit v1.2.1 From 7b202460f7333e1a9997f1ee79eca71975cc676f Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 11:13:17 -0600 Subject: Fix ajax bug --- app/assets/javascripts/droplab/droplab.js | 7 +------ app/assets/javascripts/droplab/droplab_ajax_filter.js | 9 +++++++-- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 42ddb7a4a56..359cd82bbcd 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -31,18 +31,13 @@ if ( typeof CustomEvent === "function" ) { var CustomEvent = require('./custom_event_polyfill'); var utils = require('./utils'); -var DropDown = function(list, trigger) { +var DropDown = function(list) { this.hidden = true; this.list = list; - this.trigger = trigger; this.items = []; this.getItems(); this.addEvents(); this.initialState = list.innerHTML; - - if (this.initialState.indexOf('{{') == -1) { - debugger - } }; Object.assign(DropDown.prototype, { diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index c345fda1075..0d6a7892bdc 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -5,6 +5,7 @@ require('../window')(function(w){ w.droplabAjaxFilter = { init: function(hook) { + this.destroyed = false; this.hook = hook; this.notLoading(); @@ -49,14 +50,16 @@ require('../window')(function(w){ } this.loading = true; + this.hook.list.setData([]); var params = config.params || {}; params[config.searchKey] = searchValue; var self = this; this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { - self.hook.restoreInitialState.call(self.hook); - self.hook.list.setData.call(self.hook.list, data[0]); + if (!self.destroyed) { + self.hook.list.setData.call(self.hook.list, data[0]); + } self.notLoading(); }); }, @@ -92,6 +95,8 @@ require('../window')(function(w){ clearTimeout(this.timeout); } + this.destroyed = true; + this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper); this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper); } -- cgit v1.2.1 From 99ffd0d44e0c813f9c4216b01fa321a5409ed360 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 13:35:39 -0600 Subject: Remove ajax clear setData for smoother ux --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index 0d6a7892bdc..7603556d2ef 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -51,8 +51,6 @@ require('../window')(function(w){ this.loading = true; - this.hook.list.setData([]); - var params = config.params || {}; params[config.searchKey] = searchValue; var self = this; -- cgit v1.2.1 From 85f1793590b31171bac3c1e1f5d4420d96302551 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 13:47:36 -0600 Subject: Pass project ID through the DOM --- app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 | 2 +- app/assets/javascripts/filtered_search/dropdown_author.js.es6 | 2 +- .../javascripts/filtered_search/filtered_search_dropdown.js.es6 | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index 3420397edda..ff3fd3a4e2b 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -13,7 +13,7 @@ params: { per_page: 20, active: true, - project_id: 2, + project_id: this.getProjectId(), current_user: true, }, searchValueFunction: this.getSearchInput, diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index f1401f6f9d2..517cbab8ee7 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -13,7 +13,7 @@ params: { per_page: 20, active: true, - project_id: 2, + project_id: this.getProjectId(), current_user: true, }, searchValueFunction: this.getSearchInput, diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 5186c15cb67..478c4e6bf92 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -21,6 +21,10 @@ this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper); } + getProjectId() { + return this.input.getAttribute('data-project-id'); + } + getCurrentHook() { return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; } -- cgit v1.2.1 From 575d4491cac225544081135820a1fa53a72d4709 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 13:55:41 -0600 Subject: Fixed bug where filters were not being reset after being cleared --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index c7e01fc710d..5d38a23d9fd 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -247,15 +247,16 @@ this.filteredSearchInput.value = ''; this.clearSearchButton.classList.add('hidden'); - // Reset Filters - this.mapping[this.currentDropdown].reference.resetFilters(); - // Force dropdown to hide + // Force current dropdown to hide this.mapping[this.currentDropdown].reference.hideDropdown(); // Re-Load dropdown this.setDropdown(); + // Reset filters for current dropdown + this.mapping[this.currentDropdown].reference.resetFilters(); + // Reposition dropdown so that it is aligned with cursor this.updateDropdownOffset(this.currentDropdown); } -- cgit v1.2.1 From a7ecbf7c79a4789d10493ad3bdb9b02cfd124334 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 14:04:16 -0600 Subject: Add missing space for extracting params --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 5d38a23d9fd..055f229cd45 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -33,6 +33,7 @@ if (validCondition) { inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; + inputValue += ' '; } else { // Sanitize value since URL converts spaces into + // Replace before decode so that we know what was originally + versus the encoded + -- cgit v1.2.1 From cf3504ed602aa1b979f13a394192dde50b8cffed Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 14:14:21 -0600 Subject: Make ajax filter more consistent and only filter when typed --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index 7603556d2ef..f2720a0371b 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -12,7 +12,7 @@ require('../window')(function(w){ this.debounceTriggerWrapper = this.debounceTrigger.bind(this); this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper); this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper); - this.trigger(); + this.trigger(true); }, notLoading: function notLoading() { @@ -22,6 +22,7 @@ require('../window')(function(w){ debounceTrigger: function debounceTrigger(e) { var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93]; var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1; + var focusEvent = false; if (invalidKeyPressed || this.loading) { return; } @@ -30,10 +31,14 @@ require('../window')(function(w){ clearTimeout(this.timeout); } - this.timeout = setTimeout(this.trigger.bind(this), 200); + if (e.type === 'focus') { + focusEvent = true; + } + + this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200); }, - trigger: function trigger() { + trigger: function trigger(getEntireList = false) { var config = this.hook.config.droplabAjaxFilter; var searchValue = this.trigger.value; @@ -45,6 +50,10 @@ require('../window')(function(w){ searchValue = config.searchValueFunction(); } + if (getEntireList) { + searchValue = ''; + } + if (searchValue === config.searchKey) { return this.list.show(); } -- cgit v1.2.1 From efb668208ae25393cd5535ea769c537c55a54313 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 15:37:26 -0600 Subject: Add loading message for droplab_ajax --- app/assets/javascripts/droplab/droplab_ajax.js | 15 +++++++++++++++ .../javascripts/filtered_search/dropdown_label.js.es6 | 4 ++++ .../javascripts/filtered_search/dropdown_milestone.js.es6 | 4 ++++ app/assets/stylesheets/framework/filters.scss | 4 ++++ 4 files changed, 27 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index b81663c281d..629260006f3 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -23,6 +23,7 @@ require('../window')(function(w){ }, init: function init(hook) { + var self = this; var config = hook.config.droplabAjax; if (!config || !config.endpoint || !config.method) { @@ -33,7 +34,21 @@ require('../window')(function(w){ return; } + if (config.loadingTemplate) { + var dynamicList = hook.list.list.querySelector('[data-dynamic]'); + + var loadingTemplate = document.createElement('div'); + loadingTemplate.innerHTML = config.loadingTemplate; + loadingTemplate.setAttribute('data-loading-template', true); + + this.listTemplate = dynamicList.outerHTML; + dynamicList.outerHTML = loadingTemplate.outerHTML; + } + this._loadUrlData(config.endpoint).then(function(d) { + if (config.loadingTemplate) { + hook.list.list.querySelector('[data-loading-template]').outerHTML = self.listTemplate; + } hook.list[config.method].call(hook.list, d); }).catch(function(e) { if(e.message) { diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index 4c9926c1f78..0912336b6cf 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -10,6 +10,10 @@ droplabAjax: { endpoint: 'labels.json', method: 'setData', + loadingTemplate: ` +

          + +
          `, }, droplabFilter: { filterFunction: this.filterWithSymbol.bind(this, '~'), diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 33967ddff24..73d67573868 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -10,6 +10,10 @@ droplabAjax: { endpoint: 'milestones.json', method: 'setData', + loadingTemplate: ` +
          + +
          `, }, droplabFilter: { filterFunction: this.filterWithSymbol.bind(this, '%'), diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 205cecb4906..b6c137d647a 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -121,3 +121,7 @@ .hint-dropdown { width: 250px; } + +.filter-dropdown-loading { + padding: 8px 16px; +} -- cgit v1.2.1 From 5066366162cc1da1004bc0d3df4a6377d68dbce4 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 15:37:47 -0600 Subject: Add loading template to droplab_ajax_filter --- .../javascripts/droplab/droplab_ajax_filter.js | 24 +++++++++++++++++++++- .../filtered_search/dropdown_assignee.js.es6 | 4 ++++ .../filtered_search/dropdown_author.js.es6 | 4 ++++ 3 files changed, 31 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index f2720a0371b..8d024c4b6d7 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -50,6 +50,18 @@ require('../window')(function(w){ searchValue = config.searchValueFunction(); } + if (config.loadingTemplate && this.hook.list.data === undefined || + this.hook.list.data.length === 0) { + var dynamicList = this.hook.list.list.querySelector('[data-dynamic]'); + + var loadingTemplate = document.createElement('div'); + loadingTemplate.innerHTML = config.loadingTemplate; + loadingTemplate.setAttribute('data-loading-template', true); + + this.listTemplate = dynamicList.outerHTML; + dynamicList.outerHTML = loadingTemplate.outerHTML; + } + if (getEntireList) { searchValue = ''; } @@ -64,8 +76,18 @@ require('../window')(function(w){ params[config.searchKey] = searchValue; var self = this; this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { + if (config.loadingTemplate && self.hook.list.data === undefined || + self.hook.list.data.length === 0) { + self.hook.list.list.querySelector('[data-loading-template]').outerHTML = self.listTemplate; + } + if (!self.destroyed) { - self.hook.list.setData.call(self.hook.list, data[0]); + if (data[0].length === 0) { + self.hook.list.hide(); + } else { + self.hook.list.show(); + self.hook.list.setData.call(self.hook.list, data[0]); + } } self.notLoading(); }); diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index ff3fd3a4e2b..edc717304b2 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -17,6 +17,10 @@ current_user: true, }, searchValueFunction: this.getSearchInput, + loadingTemplate: ` +
          + +
          `, } }; } diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index 517cbab8ee7..8d95a879c79 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -17,6 +17,10 @@ current_user: true, }, searchValueFunction: this.getSearchInput, + loadingTemplate: ` +
          + +
          `, } }; } -- cgit v1.2.1 From 0791116f5f6a6f3622af6d1caa9ba9da1818275f Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 15:40:12 -0600 Subject: Refactor loadingTemplate to abstract class --- app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 | 5 +---- app/assets/javascripts/filtered_search/dropdown_author.js.es6 | 5 +---- app/assets/javascripts/filtered_search/dropdown_label.js.es6 | 5 +---- app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 | 5 +---- .../javascripts/filtered_search/filtered_search_dropdown.js.es6 | 3 +++ 5 files changed, 7 insertions(+), 16 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 index edc717304b2..0ce4eebedc9 100644 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 @@ -17,10 +17,7 @@ current_user: true, }, searchValueFunction: this.getSearchInput, - loadingTemplate: ` -
          - -
          `, + loadingTemplate: this.loadingTemplate, } }; } diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 index 8d95a879c79..3dc649cc17d 100644 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 @@ -17,10 +17,7 @@ current_user: true, }, searchValueFunction: this.getSearchInput, - loadingTemplate: ` -
          - -
          `, + loadingTemplate: this.loadingTemplate, } }; } diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 index 0912336b6cf..bf009454de5 100644 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 @@ -10,10 +10,7 @@ droplabAjax: { endpoint: 'labels.json', method: 'setData', - loadingTemplate: ` -
          - -
          `, + loadingTemplate: this.loadingTemplate, }, droplabFilter: { filterFunction: this.filterWithSymbol.bind(this, '~'), diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 index 73d67573868..7f5822aed84 100644 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 @@ -10,10 +10,7 @@ droplabAjax: { endpoint: 'milestones.json', method: 'setData', - loadingTemplate: ` -
          - -
          `, + loadingTemplate: this.loadingTemplate, }, droplabFilter: { filterFunction: this.filterWithSymbol.bind(this, '%'), diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 478c4e6bf92..6b713a7017e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -9,6 +9,9 @@ this.hookId = 'filtered-search'; this.input = input; this.dropdown = dropdown; + this.loadingTemplate = `
          + +
          `; this.bindEvents(); } -- cgit v1.2.1 From f67316a7cb19374812bfc61dc98ece3110538e1b Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 16:04:58 -0600 Subject: Hide list if it is dynamic and there are no items to render --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index 8d024c4b6d7..bdd9b059bb3 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -82,12 +82,16 @@ require('../window')(function(w){ } if (!self.destroyed) { - if (data[0].length === 0) { + var hookListChildren = self.hook.list.list.children; + var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic'); + + if (onlyDynamicList && data[0].length === 0) { self.hook.list.hide(); - } else { + } else if (onlyDynamicList && data[0].length !== 0) { self.hook.list.show(); - self.hook.list.setData.call(self.hook.list, data[0]); } + + self.hook.list.setData.call(self.hook.list, data[0]); } self.notLoading(); }); -- cgit v1.2.1 From 7eb888e60e506ab25ba3593cde53dc94c19b9d7e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 16:06:45 -0600 Subject: Only return data response for droplab ajax filter --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index bdd9b059bb3..943ee9fa0a4 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -85,13 +85,13 @@ require('../window')(function(w){ var hookListChildren = self.hook.list.list.children; var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic'); - if (onlyDynamicList && data[0].length === 0) { + if (onlyDynamicList && data.length === 0) { self.hook.list.hide(); - } else if (onlyDynamicList && data[0].length !== 0) { + } else if (onlyDynamicList && data.length !== 0) { self.hook.list.show(); } - self.hook.list.setData.call(self.hook.list, data[0]); + self.hook.list.setData.call(self.hook.list, data); } self.notLoading(); }); @@ -105,7 +105,7 @@ require('../window')(function(w){ if(xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); - return resolve([data, xhr]); + return resolve(data); } else { return reject([xhr.responseText, xhr.status]); } -- cgit v1.2.1 From acfe967eb587078672953971673e2cd2c02b43ee Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 10 Dec 2016 18:53:56 -0600 Subject: Add mobile viewport --- app/assets/stylesheets/framework/mobile.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 7eb9962ba33..db3bf9f86c4 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -23,12 +23,16 @@ margin-right: 0; } - .issues-details-filters, + .issues-details-filters:not(.filtered-search-block), .dash-projects-filters, .check-all-holder { display: none; } + .issues-holder .issue-check { + display: none; + } + .rss-btn { display: none; } -- cgit v1.2.1 From 5c0802deae6a3a87e7a497d3250cbeb98e61045b Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sun, 11 Dec 2016 18:05:33 -0600 Subject: Add check in case the data attribute does not exist --- app/assets/javascripts/droplab/droplab_ajax.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index 629260006f3..ebb518eeef4 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -47,7 +47,11 @@ require('../window')(function(w){ this._loadUrlData(config.endpoint).then(function(d) { if (config.loadingTemplate) { - hook.list.list.querySelector('[data-loading-template]').outerHTML = self.listTemplate; + var dataLoadingTemplate = hook.list.list.querySelector('[data-loading-template]'); + + if (dataLoadingTemplate) { + dataLoadingTemplate.outerHTML = self.listTemplate; + } } hook.list[config.method].call(hook.list, d); }).catch(function(e) { -- cgit v1.2.1 From 46a1f36986aa61597f54d14c76b1d2258b0933e5 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sun, 11 Dec 2016 18:05:55 -0600 Subject: Refactor dropdown filters --- .../filtered_search/dropdown_assignee.js.es6 | 61 ---------------------- .../filtered_search/dropdown_author.js.es6 | 57 -------------------- .../filtered_search/dropdown_hint.js.es6 | 2 +- .../filtered_search/dropdown_label.js.es6 | 45 ---------------- .../filtered_search/dropdown_milestone.js.es6 | 44 ---------------- .../filtered_search/dropdown_non_user.js.es6 | 44 ++++++++++++++++ .../filtered_search/dropdown_user.js.es6 | 57 ++++++++++++++++++++ .../filtered_search/filtered_search_manager.js.es6 | 16 ++++-- 8 files changed, 113 insertions(+), 213 deletions(-) delete mode 100644 app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 delete mode 100644 app/assets/javascripts/filtered_search/dropdown_author.js.es6 delete mode 100644 app/assets/javascripts/filtered_search/dropdown_label.js.es6 delete mode 100644 app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 create mode 100644 app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 create mode 100644 app/assets/javascripts/filtered_search/dropdown_user.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 deleted file mode 100644 index 0ce4eebedc9..00000000000 --- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 +++ /dev/null @@ -1,61 +0,0 @@ -/* eslint-disable no-param-reassign */ -/*= require filtered_search/filtered_search_dropdown */ - -((global) => { - class DropdownAssignee extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input) { - super(droplab, dropdown, input); - this.listId = 'js-dropdown-assignee'; - this.config = { - droplabAjaxFilter: { - endpoint: '/autocomplete/users.json', - searchKey: 'search', - params: { - per_page: 20, - active: true, - project_id: this.getProjectId(), - current_user: true, - }, - searchValueFunction: this.getSearchInput, - loadingTemplate: this.loadingTemplate, - } - }; - } - - itemClicked(e) { - const dataValueSet = this.setDataValueIfSelected(e.detail.selected); - - if (!dataValueSet) { - const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); - } - - this.dismissDropdown(!dataValueSet); - } - - renderContent(forceShowList = false) { - this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); - super.renderContent(forceShowList); - } - - getSearchInput() { - const query = document.querySelector('.filtered-search').value; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1); - const hasPrefix = valueWithoutColon[0] === '@'; - const valueWithoutPrefix = valueWithoutColon.slice(1); - - if (hasPrefix) { - return valueWithoutPrefix; - } else { - return valueWithoutColon; - } - } - - configure() { - this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); - } - } - - global.DropdownAssignee = DropdownAssignee; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 b/app/assets/javascripts/filtered_search/dropdown_author.js.es6 deleted file mode 100644 index 3dc649cc17d..00000000000 --- a/app/assets/javascripts/filtered_search/dropdown_author.js.es6 +++ /dev/null @@ -1,57 +0,0 @@ -/* eslint-disable no-param-reassign */ -/*= require filtered_search/filtered_search_dropdown */ - -((global) => { - class DropdownAuthor extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input) { - super(droplab, dropdown, input); - this.listId = 'js-dropdown-author'; - this.config = { - droplabAjaxFilter: { - endpoint: '/autocomplete/users.json', - searchKey: 'search', - params: { - per_page: 20, - active: true, - project_id: this.getProjectId(), - current_user: true, - }, - searchValueFunction: this.getSearchInput, - loadingTemplate: this.loadingTemplate, - } - }; - } - - itemClicked(e) { - const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); - - this.dismissDropdown(); - } - - renderContent(forceShowList) { - this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); - super.renderContent(forceShowList); - } - - getSearchInput() { - const query = document.querySelector('.filtered-search').value; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1); - const hasPrefix = valueWithoutColon[0] === '@'; - const valueWithoutPrefix = valueWithoutColon.slice(1); - - if (hasPrefix) { - return valueWithoutPrefix; - } else { - return valueWithoutColon; - } - } - - configure() { - this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); - } - } - - global.DropdownAuthor = DropdownAuthor; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index ea384af09a9..d445a796f43 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -23,7 +23,7 @@ class DropdownHint extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input) { super(droplab, dropdown, input); - this.listId = 'js-dropdown-hint'; + this.listId = dropdown.id; this.config = { droplabFilter: { template: 'hint', diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6 deleted file mode 100644 index bf009454de5..00000000000 --- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-disable no-param-reassign */ -/*= require filtered_search/filtered_search_dropdown */ - -((global) => { - class DropdownLabel extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input) { - super(droplab, dropdown, input); - this.listId = 'js-dropdown-label'; - this.config = { - droplabAjax: { - endpoint: 'labels.json', - method: 'setData', - loadingTemplate: this.loadingTemplate, - }, - droplabFilter: { - filterFunction: this.filterWithSymbol.bind(this, '~'), - } - }; - } - - itemClicked(e) { - const dataValueSet = this.setDataValueIfSelected(e.detail.selected); - - if (!dataValueSet) { - const labelTitle = e.detail.selected.querySelector('.label-title').innerText.trim(); - const labelName = `~${this.getEscapedText(labelTitle)}`; - gl.FilteredSearchManager.addWordToInput(labelName); - } - - // debugger - this.dismissDropdown(!dataValueSet); - } - - renderContent(forceShowList) { - this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); - super.renderContent(forceShowList); - } - - configure() { - this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); - } - } - - global.DropdownLabel = DropdownLabel; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 deleted file mode 100644 index 7f5822aed84..00000000000 --- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable no-param-reassign */ -/*= require filtered_search/filtered_search_dropdown */ - -((global) => { - class DropdownMilestone extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input) { - super(droplab, dropdown, input); - this.listId = 'js-dropdown-milestone'; - this.config = { - droplabAjax: { - endpoint: 'milestones.json', - method: 'setData', - loadingTemplate: this.loadingTemplate, - }, - droplabFilter: { - filterFunction: this.filterWithSymbol.bind(this, '%'), - } - }; - } - - itemClicked(e) { - const dataValueSet = this.setDataValueIfSelected(e.detail.selected); - - if (!dataValueSet) { - const milestoneTitle = e.detail.selected.querySelector('.btn-link').innerText.trim(); - const milestoneName = `%${this.getEscapedText(milestoneTitle)}`; - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName)); - } - - this.dismissDropdown(!dataValueSet); - } - - renderContent(forceShowList = false) { - this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); - super.renderContent(forceShowList); - } - - configure() { - this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); - } - } - - global.DropdownMilestone = DropdownMilestone; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 new file mode 100644 index 00000000000..05c9284bc96 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -0,0 +1,44 @@ +/* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + +((global) => { + class DropdownNonUser extends gl.FilteredSearchDropdown { + constructor(droplab, dropdown, input, endpoint, symbol) { + super(droplab, dropdown, input); + this.listId = dropdown.id; + this.config = { + droplabAjax: { + endpoint: endpoint, + method: 'setData', + loadingTemplate: this.loadingTemplate, + }, + droplabFilter: { + filterFunction: this.filterWithSymbol.bind(this, symbol), + } + }; + } + + itemClicked(e) { + const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + + if (!dataValueSet) { + const title = e.detail.selected.querySelector('.js-data-value').innerText.trim(); + const name = `%${this.getEscapedText(title)}`; + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name)); + } + + this.dismissDropdown(!dataValueSet); + } + + renderContent(forceShowList = false) { + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); + super.renderContent(forceShowList); + } + + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); + } + } + + global.DropdownNonUser = DropdownNonUser; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 new file mode 100644 index 00000000000..1a597bbbc9d --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -0,0 +1,57 @@ +/* eslint-disable no-param-reassign */ +/*= require filtered_search/filtered_search_dropdown */ + +((global) => { + class DropdownUser extends gl.FilteredSearchDropdown { + constructor(droplab, dropdown, input) { + super(droplab, dropdown, input); + this.listId = dropdown.id; + this.config = { + droplabAjaxFilter: { + endpoint: '/autocomplete/users.json', + searchKey: 'search', + params: { + per_page: 20, + active: true, + project_id: this.getProjectId(), + current_user: true, + }, + searchValueFunction: this.getSearchInput, + loadingTemplate: this.loadingTemplate, + }, + }; + } + + itemClicked(e) { + const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + + if (!dataValueSet) { + const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); + gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); + } + + this.dismissDropdown(!dataValueSet); + } + + renderContent(forceShowList = false) { + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config); + super.renderContent(forceShowList); + } + + getSearchInput() { + const query = document.querySelector('.filtered-search').value; + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutColon = value.slice(1); + const hasPrefix = valueWithoutColon[0] === '@'; + const valueWithoutPrefix = valueWithoutColon.slice(1); + + return hasPrefix ? valueWithoutPrefix : valueWithoutColon; + } + + configure() { + this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); + } + } + + global.DropdownUser = DropdownUser; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 055f229cd45..c92d669114e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -103,22 +103,24 @@ this.mapping = { author: { reference: null, - gl: 'DropdownAuthor', + gl: 'DropdownUser', element: document.querySelector('#js-dropdown-author'), }, assignee: { reference: null, - gl: 'DropdownAssignee', + gl: 'DropdownUser', element: document.querySelector('#js-dropdown-assignee'), }, milestone: { reference: null, - gl: 'DropdownMilestone', + gl: 'DropdownNonUser', + extraArguments: ['milestones.json', '%'], element: document.querySelector('#js-dropdown-milestone'), }, label: { reference: null, - gl: 'DropdownLabel', + gl: 'DropdownNonUser', + extraArguments: ['labels.json', '~'], element: document.querySelector('#js-dropdown-label'), }, hint: { @@ -160,7 +162,11 @@ let forceShowList = false; if (!this.mapping[key].reference) { - this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput); + var dl = this.droplab; + const defaultArguments = [null, dl, element, this.filteredSearchInput]; + const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []); + + this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); } if (firstLoad) { -- cgit v1.2.1 From f4db75728e8c16876cb3f74e12d4d707ab8f47c1 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sun, 11 Dec 2016 18:11:58 -0600 Subject: Refactor filtered_search_dropdown --- .../filtered_search/dropdown_non_user.js.es6 | 39 ++++++++++++++++++++-- .../filtered_search/dropdown_user.js.es6 | 4 +++ .../filtered_search_dropdown.js.es6 | 39 ---------------------- 3 files changed, 41 insertions(+), 41 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 05c9284bc96..f03c27c3ec0 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -6,6 +6,7 @@ constructor(droplab, dropdown, input, endpoint, symbol) { super(droplab, dropdown, input); this.listId = dropdown.id; + this.symbol = symbol; this.config = { droplabAjax: { endpoint: endpoint, @@ -13,7 +14,7 @@ loadingTemplate: this.loadingTemplate, }, droplabFilter: { - filterFunction: this.filterWithSymbol.bind(this, symbol), + filterFunction: this.filterWithSymbol.bind(this, this.symbol), } }; } @@ -23,13 +24,47 @@ if (!dataValueSet) { const title = e.detail.selected.querySelector('.js-data-value').innerText.trim(); - const name = `%${this.getEscapedText(title)}`; + const name = `${this.symbol}${this.getEscapedText(title)}`; gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name)); } this.dismissDropdown(!dataValueSet); } + getEscapedText(text) { + let escapedText = text; + + // Encapsulate value with quotes if it has spaces + if (text.indexOf(' ') !== -1) { + if (text.indexOf('"') !== -1) { + // Use single quotes if value contains double quotes + escapedText = `'${text}'`; + } else { + // Known side effect: values's with both single and double quotes + // won't escape properly + escapedText = `"${text}"`; + } + } + + return escapedText; + } + + filterWithSymbol(filterSymbol, item, query) { + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutColon = value.slice(1).toLowerCase(); + const prefix = valueWithoutColon[0]; + const valueWithoutPrefix = valueWithoutColon.slice(1); + + const title = item.title.toLowerCase(); + + // Eg. filterSymbol = ~ for labels + const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; + const match = title.indexOf(valueWithoutColon) !== -1; + + item.droplab_hidden = !match && !matchWithoutPrefix; + return item; + } + renderContent(forceShowList = false) { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); super.renderContent(forceShowList); diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 1a597bbbc9d..6827ab1658a 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -38,6 +38,10 @@ super.renderContent(forceShowList); } + getProjectId() { + return this.input.getAttribute('data-project-id'); + } + getSearchInput() { const query = document.querySelector('.filtered-search').value; const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 6b713a7017e..c63ba1acf0b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -4,7 +4,6 @@ class FilteredSearchDropdown { constructor(droplab, dropdown, input) { - console.log('constructor'); this.droplab = droplab; this.hookId = 'filtered-search'; this.input = input; @@ -24,32 +23,10 @@ this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper); } - getProjectId() { - return this.input.getAttribute('data-project-id'); - } - getCurrentHook() { return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; } - getEscapedText(text) { - let escapedText = text; - - // Encapsulate value with quotes if it has spaces - if (text.indexOf(' ') !== -1) { - if (text.indexOf('"') !== -1) { - // Use single quotes if value contains double quotes - escapedText = `'${text}'`; - } else { - // Known side effect: values's with both single and double quotes - // won't escape properly - escapedText = `"${text}"`; - } - } - - return escapedText; - } - getSelectedText(selectedToken) { // TODO: Get last word from FilteredSearchTokenizer const lastWord = this.input.value.split(' ').last(); @@ -109,22 +86,6 @@ } } - filterWithSymbol(filterSymbol, item, query) { - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); - const prefix = valueWithoutColon[0]; - const valueWithoutPrefix = valueWithoutColon.slice(1); - - const title = item.title.toLowerCase(); - - // Eg. filterSymbol = ~ for labels - const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; - const match = title.indexOf(valueWithoutColon) !== -1; - - item.droplab_hidden = !match && !matchWithoutPrefix; - return item; - } - hideDropdown() { this.getCurrentHook().list.hide(); } -- cgit v1.2.1 From 513cdda31667f0058b24e8f66d87ddfcf89b7fb4 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 09:21:38 -0600 Subject: Refactor filtered search manager --- .../filtered_search/dropdown_hint.js.es6 | 2 +- .../filtered_search/dropdown_non_user.js.es6 | 2 +- .../filtered_search/dropdown_user.js.es6 | 2 +- .../filtered_search_dropdown.js.es6 | 2 +- .../filtered_search_dropdown_manager.js.es6 | 174 +++++++++++++++++++++ .../filtered_search/filtered_search_manager.js.es6 | 160 +------------------ 6 files changed, 185 insertions(+), 157 deletions(-) create mode 100644 app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index d445a796f43..53952e6bc63 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -42,7 +42,7 @@ const tag = selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token)); + gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(token)); } this.dismissDropdown(); this.dispatchInputEvent(); diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index f03c27c3ec0..e4df39cfde1 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -25,7 +25,7 @@ if (!dataValueSet) { const title = e.detail.selected.querySelector('.js-data-value').innerText.trim(); const name = `${this.symbol}${this.getEscapedText(title)}`; - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name)); + gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(name)); } this.dismissDropdown(!dataValueSet); diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 6827ab1658a..d3c3be9b914 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -27,7 +27,7 @@ if (!dataValueSet) { const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); - gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username)); + gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(username)); } this.dismissDropdown(!dataValueSet); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index c63ba1acf0b..38ecbbf552d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -57,7 +57,7 @@ const dataValue = selected.getAttribute('data-value'); if (dataValue) { - gl.FilteredSearchManager.addWordToInput(dataValue); + gl.FilteredSearchDropdownManager.addWordToInput(dataValue); } return dataValue !== null; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 new file mode 100644 index 00000000000..67a474985c0 --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -0,0 +1,174 @@ +/* eslint-disable no-param-reassign */ +((global) => { + class FilteredSearchDropdownManager { + constructor() { + this.tokenizer = gl.FilteredSearchTokenizer; + this.filteredSearchInput = document.querySelector('.filtered-search'); + + this.cleanupWrapper = this.cleanup.bind(this); + document.addEventListener('page:fetch', this.cleanupWrapper); + } + + cleanup() { + if (this.droplab) { + this.droplab.destroy(); + this.droplab = null; + } + + this.setupMapping(); + + document.removeEventListener('page:fetch', this.cleanupWrapper); + } + + setupMapping() { + this.mapping = { + author: { + reference: null, + gl: 'DropdownUser', + element: document.querySelector('#js-dropdown-author'), + }, + assignee: { + reference: null, + gl: 'DropdownUser', + element: document.querySelector('#js-dropdown-assignee'), + }, + milestone: { + reference: null, + gl: 'DropdownNonUser', + extraArguments: ['milestones.json', '%'], + element: document.querySelector('#js-dropdown-milestone'), + }, + label: { + reference: null, + gl: 'DropdownNonUser', + extraArguments: ['labels.json', '~'], + element: document.querySelector('#js-dropdown-label'), + }, + hint: { + reference: null, + gl: 'DropdownHint', + element: document.querySelector('#js-dropdown-hint'), + }, + } + } + + static addWordToInput(word, addSpace) { + const filteredSearchInput = document.querySelector('.filtered-search') + const filteredSearchValue = filteredSearchInput.value; + const hasExistingValue = filteredSearchValue.length !== 0; + const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue); + + if (lastToken.hasOwnProperty('key')) { + console.log(lastToken); + // Spaces inside the token means that the token value will be escaped by quotes + const hasQuotes = lastToken.value.indexOf(' ') !== -1; + const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length; + filteredSearchInput.value = filteredSearchValue.slice(0, -1 * (lengthToRemove)); + } + + filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word; + } + + updateCurrentDropdownOffset() { + this.updateDropdownOffset(this.currentDropdown); + } + + updateDropdownOffset(key) { + const filterIconPadding = 27; + const offset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; + + this.mapping[key].reference.setOffset(offset); + } + + load(key, firstLoad = false) { + console.log(`🦄 load ${key} dropdown`); + const glClass = this.mapping[key].gl; + const element = this.mapping[key].element; + let forceShowList = false; + + if (!this.mapping[key].reference) { + var dl = this.droplab; + const defaultArguments = [null, dl, element, this.filteredSearchInput]; + const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []); + + this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); + } + + if (firstLoad) { + this.mapping[key].reference.configure(); + } + + if (this.currentDropdown === 'hint') { + // Clicked from hint dropdown + forceShowList = true; + } + + this.updateDropdownOffset(key); + this.mapping[key].reference.render(firstLoad, forceShowList); + + this.currentDropdown = key; + } + + loadDropdown(dropdownName = '') { + let firstLoad = false; + + if(!this.droplab) { + firstLoad = true; + this.droplab = new DropLab(); + } + + if (!this.font) { + this.font = window.getComputedStyle(this.filteredSearchInput).font; + } + + const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0]; + const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key); + const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; + + if (shouldOpenFilterDropdown || shouldOpenHintDropdown) { + const key = match && match.hasOwnProperty('key') ? match.key : 'hint'; + this.load(key, firstLoad); + } + + gl.droplab = this.droplab; + } + + setDropdown() { + const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); + + if (typeof lastToken === 'string') { + // Token is not fully initialized yet + // because it has no value + // Eg. token = 'label:' + const { tokenKey } = this.tokenizer.parseToken(lastToken); + this.loadDropdown(tokenKey); + } else if (lastToken.hasOwnProperty('key')) { + // Token has been initialized into an object + // because it has a value + this.loadDropdown(lastToken.key); + } else { + this.loadDropdown('hint'); + } + } + + resetDropdowns() { + // Force current dropdown to hide + this.mapping[this.currentDropdown].reference.hideDropdown(); + + // Re-Load dropdown + this.setDropdown(); + + // Reset filters for current dropdown + this.mapping[this.currentDropdown].reference.resetFilters(); + + // Reposition dropdown so that it is aligned with cursor + this.updateDropdownOffset(this.currentDropdown); + } + + destroyDroplab() { + this.droplab.destroy(); + } + } + + global.FilteredSearchDropdownManager = FilteredSearchDropdownManager; +})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index c92d669114e..d9ea44b3a13 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -75,159 +75,24 @@ this.tokenizer = gl.FilteredSearchTokenizer; this.filteredSearchInput = document.querySelector('.filtered-search'); this.clearSearchButton = document.querySelector('.clear-search'); + this.dropdownManager = new gl.FilteredSearchDropdownManager(); - this.setupMapping(); + this.dropdownManager.setupMapping(); this.bindEvents(); loadSearchParamsFromURL(); - this.setDropdown(); + this.dropdownManager.setDropdown(); this.cleanupWrapper = this.cleanup.bind(this); document.addEventListener('page:fetch', this.cleanupWrapper); } cleanup() { - console.log('cleanup') - - if (this.droplab) { - this.droplab.destroy(); - this.droplab = null; - } - - this.setupMapping(); - this.unbindEvents(); document.removeEventListener('page:fetch', this.cleanupWrapper); } - setupMapping() { - this.mapping = { - author: { - reference: null, - gl: 'DropdownUser', - element: document.querySelector('#js-dropdown-author'), - }, - assignee: { - reference: null, - gl: 'DropdownUser', - element: document.querySelector('#js-dropdown-assignee'), - }, - milestone: { - reference: null, - gl: 'DropdownNonUser', - extraArguments: ['milestones.json', '%'], - element: document.querySelector('#js-dropdown-milestone'), - }, - label: { - reference: null, - gl: 'DropdownNonUser', - extraArguments: ['labels.json', '~'], - element: document.querySelector('#js-dropdown-label'), - }, - hint: { - reference: null, - gl: 'DropdownHint', - element: document.querySelector('#js-dropdown-hint'), - }, - } - } - - static addWordToInput(word, addSpace) { - const filteredSearchInput = document.querySelector('.filtered-search') - const filteredSearchValue = filteredSearchInput.value; - const hasExistingValue = filteredSearchValue.length !== 0; - const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue); - - if (lastToken.hasOwnProperty('key')) { - console.log(lastToken); - // Spaces inside the token means that the token value will be escaped by quotes - const hasQuotes = lastToken.value.indexOf(' ') !== -1; - const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length; - filteredSearchInput.value = filteredSearchValue.slice(0, -1 * (lengthToRemove)); - } - - filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word; - } - - updateDropdownOffset(key) { - const filterIconPadding = 27; - const offset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; - - this.mapping[key].reference.setOffset(offset); - } - - load(key, firstLoad = false) { - console.log(`🦄 load ${key} dropdown`); - const glClass = this.mapping[key].gl; - const element = this.mapping[key].element; - let forceShowList = false; - - if (!this.mapping[key].reference) { - var dl = this.droplab; - const defaultArguments = [null, dl, element, this.filteredSearchInput]; - const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []); - - this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); - } - - if (firstLoad) { - this.mapping[key].reference.configure(); - } - - if (this.currentDropdown === 'hint') { - // Clicked from hint dropdown - forceShowList = true; - } - - this.updateDropdownOffset(key); - this.mapping[key].reference.render(firstLoad, forceShowList); - - this.currentDropdown = key; - } - - loadDropdown(dropdownName = '') { - let firstLoad = false; - - if(!this.droplab) { - firstLoad = true; - this.droplab = new DropLab(); - } - - if (!this.font) { - this.font = window.getComputedStyle(this.filteredSearchInput).font; - } - - const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0]; - const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key); - const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; - - if (shouldOpenFilterDropdown || shouldOpenHintDropdown) { - const key = match && match.hasOwnProperty('key') ? match.key : 'hint'; - this.load(key, firstLoad); - } - - gl.droplab = this.droplab; - } - - setDropdown() { - const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); - - if (typeof lastToken === 'string') { - // Token is not fully initialized yet - // because it has no value - // Eg. token = 'label:' - const { tokenKey } = this.tokenizer.parseToken(lastToken); - this.loadDropdown(tokenKey); - } else if (lastToken.hasOwnProperty('key')) { - // Token has been initialized into an object - // because it has a value - this.loadDropdown(lastToken.key); - } else { - this.loadDropdown('hint'); - } - } - bindEvents() { - this.setDropdownWrapper = this.setDropdown.bind(this); + this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager); this.checkForEnterWrapper = this.checkForEnter.bind(this); this.clearSearchWrapper = this.clearSearch.bind(this); this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); @@ -254,24 +119,13 @@ this.filteredSearchInput.value = ''; this.clearSearchButton.classList.add('hidden'); - - // Force current dropdown to hide - this.mapping[this.currentDropdown].reference.hideDropdown(); - - // Re-Load dropdown - this.setDropdown(); - - // Reset filters for current dropdown - this.mapping[this.currentDropdown].reference.resetFilters(); - - // Reposition dropdown so that it is aligned with cursor - this.updateDropdownOffset(this.currentDropdown); + this.dropdownManager.resetDropdowns(); } checkForBackspace(e) { if (e.keyCode === 8) { // Reposition dropdown so that it is aligned with cursor - this.updateDropdownOffset(this.currentDropdown); + this.dropdownManager.updateCurrentDropdownOffset(); } } @@ -282,7 +136,7 @@ e.preventDefault(); // Prevent droplab from opening dropdown - this.droplab.destroy(); + this.dropdownManager.destroyDroplab(); this.search(); } -- cgit v1.2.1 From 6c811d478d60246a8c2abf4b1bc4fd252d344ed9 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 09:47:21 -0600 Subject: Remove show() as it is automatically called on setData when there is data --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index 943ee9fa0a4..6e1eb080e3b 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -87,8 +87,6 @@ require('../window')(function(w){ if (onlyDynamicList && data.length === 0) { self.hook.list.hide(); - } else if (onlyDynamicList && data.length !== 0) { - self.hook.list.show(); } self.hook.list.setData.call(self.hook.list, data); -- cgit v1.2.1 From 2bbc44cb7edb81d1e83836574573b365f0b4d1cb Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 09:55:27 -0600 Subject: Refactor itemClicked --- .../javascripts/filtered_search/dropdown_non_user.js.es6 | 11 +++-------- app/assets/javascripts/filtered_search/dropdown_user.js.es6 | 11 +++-------- .../filtered_search/filtered_search_dropdown.js.es6 | 11 +++++++++-- 3 files changed, 15 insertions(+), 18 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index e4df39cfde1..752a9a6e242 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -20,15 +20,10 @@ } itemClicked(e) { - const dataValueSet = this.setDataValueIfSelected(e.detail.selected); - - if (!dataValueSet) { + super.itemClicked(e, (selected) => { const title = e.detail.selected.querySelector('.js-data-value').innerText.trim(); - const name = `${this.symbol}${this.getEscapedText(title)}`; - gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(name)); - } - - this.dismissDropdown(!dataValueSet); + return `${this.symbol}${this.getEscapedText(title)}`; + }); } getEscapedText(text) { diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index d3c3be9b914..749fb9d90aa 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -23,14 +23,9 @@ } itemClicked(e) { - const dataValueSet = this.setDataValueIfSelected(e.detail.selected); - - if (!dataValueSet) { - const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim(); - gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(username)); - } - - this.dismissDropdown(!dataValueSet); + super.itemClicked(e, (selected) => { + return selected.querySelector('.dropdown-light-content').innerText.trim(); + }); } renderContent(forceShowList = false) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 38ecbbf552d..990d56188cb 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -35,8 +35,15 @@ return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); } - itemClicked(e) { - // Overridden by dropdown sub class + itemClicked(e, getValueFunction) { + const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + + if (!dataValueSet) { + const value = getValueFunction(e.detail.selected) + gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(value)); + } + + this.dismissDropdown(); } renderContent(forceShowList = false) { -- cgit v1.2.1 From 5589ab1e0be2d682a8be424289d17b4e566caba0 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 10:28:22 -0600 Subject: Refactor and add comments --- .../filtered_search/dropdown_hint.js.es6 | 3 +- .../filtered_search/dropdown_non_user.js.es6 | 17 ++++----- .../filtered_search/dropdown_user.js.es6 | 3 +- .../filtered_search_dropdown.js.es6 | 39 ++++++++++---------- .../filtered_search_dropdown_manager.js.es6 | 41 ++++++++++++---------- .../filtered_search/filtered_search_manager.js.es6 | 9 ++--- .../filtered_search/filtered_search_tokenizer.es6 | 12 ------- 7 files changed, 58 insertions(+), 66 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 53952e6bc63..43a0b1da0fe 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -23,7 +23,6 @@ class DropdownHint extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input) { super(droplab, dropdown, input); - this.listId = dropdown.id; this.config = { droplabFilter: { template: 'hint', @@ -66,7 +65,7 @@ return item; } - configure() { + init() { this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 752a9a6e242..0969df65836 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -5,7 +5,6 @@ class DropdownNonUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input, endpoint, symbol) { super(droplab, dropdown, input); - this.listId = dropdown.id; this.symbol = symbol; this.config = { droplabAjax: { @@ -28,15 +27,17 @@ getEscapedText(text) { let escapedText = text; + const hasSpace = text.indexOf(' ') !== -1; + const hasDoubleQuote = text.indexOf('"') !== -1; + const hasSingleQuote = text.indexOf('\'') !== -1; // Encapsulate value with quotes if it has spaces - if (text.indexOf(' ') !== -1) { - if (text.indexOf('"') !== -1) { - // Use single quotes if value contains double quotes + // Known side effect: values's with both single and double quotes + // won't escape properly + if (hasSpace) { + if (hasDoubleQuote) { escapedText = `'${text}'`; - } else { - // Known side effect: values's with both single and double quotes - // won't escape properly + } else if (hasSingleQuote) { escapedText = `"${text}"`; } } @@ -65,7 +66,7 @@ super.renderContent(forceShowList); } - configure() { + init() { this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 749fb9d90aa..8bc274e0b12 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -5,7 +5,6 @@ class DropdownUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input) { super(droplab, dropdown, input); - this.listId = dropdown.id; this.config = { droplabAjaxFilter: { endpoint: '/autocomplete/users.json', @@ -47,7 +46,7 @@ return hasPrefix ? valueWithoutPrefix : valueWithoutColon; } - configure() { + init() { this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init(); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 990d56188cb..85d684e3058 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -46,14 +46,8 @@ this.dismissDropdown(); } - renderContent(forceShowList = false) { - if (forceShowList && this.getCurrentHook().list.hidden) { - this.getCurrentHook().list.show(); - } - } - setAsDropdown() { - this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`); + this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.dropdown.id}`); } setOffset(offset = 0) { @@ -67,17 +61,14 @@ gl.FilteredSearchDropdownManager.addWordToInput(dataValue); } + // Return boolean based on whether it was set return dataValue !== null; } - dismissDropdown() { - this.input.focus(); - } - - dispatchInputEvent() { - // Propogate input change to FilteredSearchManager - // so that it can determine which dropdowns to open - this.input.dispatchEvent(new Event('input')); + renderContent(forceShowList = false) { + if (forceShowList && this.getCurrentHook().list.hidden) { + this.getCurrentHook().list.show(); + } } render(forceRenderContent = false, forceShowList = false) { @@ -88,11 +79,23 @@ if (firstTimeInitialized || forceRenderContent) { this.renderContent(forceShowList); - } else if(currentHook.list.list.id !== this.listId) { + } else if(currentHook.list.list.id !== this.dropdown.id) { this.renderContent(forceShowList); } } + dismissDropdown() { + // Focusing on the input will dismiss dropdown + // (default droplab functionality) + this.input.focus(); + } + + dispatchInputEvent() { + // Propogate input change to FilteredSearchDropdownManager + // so that it can determine which dropdowns to open + this.input.dispatchEvent(new Event('input')); + } + hideDropdown() { this.getCurrentHook().list.hide(); } @@ -100,9 +103,7 @@ resetFilters() { const hook = this.getCurrentHook(); const data = hook.list.data; - const results = data.map(function(o) { - o.droplab_hidden = false; - }); + const results = data.map(o => o.droplab_hidden = false); hook.list.render(results); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index 67a474985c0..a0764c275e5 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -5,6 +5,8 @@ this.tokenizer = gl.FilteredSearchTokenizer; this.filteredSearchInput = document.querySelector('.filtered-search'); + this.setupMapping(); + this.cleanupWrapper = this.cleanup.bind(this); document.addEventListener('page:fetch', this.cleanupWrapper); } @@ -52,21 +54,22 @@ } } - static addWordToInput(word, addSpace) { - const filteredSearchInput = document.querySelector('.filtered-search') - const filteredSearchValue = filteredSearchInput.value; - const hasExistingValue = filteredSearchValue.length !== 0; - const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue); + static addWordToInput(word, addSpace = false) { + const input = document.querySelector('.filtered-search') + const value = input.value; + const hasExistingValue = value.length !== 0; + const { lastToken } = gl.FilteredSearchTokenizer.processTokens(value); if (lastToken.hasOwnProperty('key')) { - console.log(lastToken); // Spaces inside the token means that the token value will be escaped by quotes const hasQuotes = lastToken.value.indexOf(' ') !== -1; + + // Add 2 length to account for the length of the front and back quotes const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length; - filteredSearchInput.value = filteredSearchValue.slice(0, -1 * (lengthToRemove)); + input.value = value.slice(0, -1 * (lengthToRemove)); } - filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word; + input.value += hasExistingValue && addSpace ? ` ${word}` : word; } updateCurrentDropdownOffset() { @@ -74,6 +77,10 @@ } updateDropdownOffset(key) { + if (!this.font) { + this.font = window.getComputedStyle(this.filteredSearchInput).font; + } + const filterIconPadding = 27; const offset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; @@ -87,19 +94,20 @@ let forceShowList = false; if (!this.mapping[key].reference) { - var dl = this.droplab; + const dl = this.droplab; const defaultArguments = [null, dl, element, this.filteredSearchInput]; const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []); + // Passing glArguments to `new gl[glClass]()` this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); } if (firstLoad) { - this.mapping[key].reference.configure(); + this.mapping[key].reference.init(); } if (this.currentDropdown === 'hint') { - // Clicked from hint dropdown + // Force the dropdown to show if it was clicked from the hint dropdown forceShowList = true; } @@ -117,15 +125,12 @@ this.droplab = new DropLab(); } - if (!this.font) { - this.font = window.getComputedStyle(this.filteredSearchInput).font; - } - const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0]; const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key); const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; if (shouldOpenFilterDropdown || shouldOpenHintDropdown) { + // `hint` is not listed as a tokenKey (since it is not a real `filter`) const key = match && match.hasOwnProperty('key') ? match.key : 'hint'; this.load(key, firstLoad); } @@ -137,14 +142,12 @@ const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); if (typeof lastToken === 'string') { - // Token is not fully initialized yet - // because it has no value + // Token is not fully initialized yet because it has no value // Eg. token = 'label:' const { tokenKey } = this.tokenizer.parseToken(lastToken); this.loadDropdown(tokenKey); } else if (lastToken.hasOwnProperty('key')) { - // Token has been initialized into an object - // because it has a value + // Token has been initialized into an object because it has a value this.loadDropdown(lastToken.key); } else { this.loadDropdown('hint'); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index d9ea44b3a13..d3bccc4b14c 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ ((global) => { + // TODO: Encapsulate inside class? function toggleClearSearchButton(e) { const clearSearchButton = document.querySelector('.clear-search'); @@ -25,6 +26,7 @@ let conditionIndex = 0; const validCondition = gl.FilteredSearchTokenKeys.get() .filter(v => v.conditions && v.conditions.filter((c, index) => { + // TODO: Add comment here if (c.url === p) { conditionIndex = index; } @@ -32,6 +34,7 @@ })[0])[0]; if (validCondition) { + // Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get() inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; inputValue += ' '; } else { @@ -77,7 +80,6 @@ this.clearSearchButton = document.querySelector('.clear-search'); this.dropdownManager = new gl.FilteredSearchDropdownManager(); - this.dropdownManager.setupMapping(); this.bindEvents(); loadSearchParamsFromURL(); this.dropdownManager.setDropdown(); @@ -130,7 +132,6 @@ } checkForEnter(e) { - // Enter KeyCode if (e.keyCode === 13) { e.stopPropagation(); e.preventDefault(); @@ -143,7 +144,6 @@ } search() { - console.log('search'); let path = '?scope=all&utf8=✓'; // Check current state @@ -152,9 +152,10 @@ const defaultState = 'opened'; let currentState = defaultState; - const { tokens, searchToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value); + const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); if (stateIndex !== -1) { + // TODO: Add comment here const remaining = currentPath.slice(stateIndex + 6); const separatorIndex = remaining.indexOf('&'); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index 4abb5e94d81..ac45d3b7986 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -1,15 +1,6 @@ /* eslint-disable no-param-reassign */ ((global) => { class FilteredSearchTokenizer { - // TODO: Remove when going to pro - static printTokens(tokens, searchToken, lastToken) { - console.log('tokens:'); - tokens.forEach(token => console.log(token)); - console.log(`search: ${searchToken}`); - console.log('last token:'); - console.log(lastToken); - } - static parseToken(input) { const colonIndex = input.indexOf(':'); let tokenKey; @@ -163,9 +154,6 @@ searchToken = searchTerms.trim(); - // TODO: Remove when going to PRO - gl.FilteredSearchTokenizer.printTokens(tokens, searchToken, lastToken); - return { tokens, searchToken, -- cgit v1.2.1 From aebee11884d2176a45cb17efa97bf3fdbc95449a Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 10:55:43 -0600 Subject: Fix bug where labels with spaces weren't being escaped when selected --- app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 0969df65836..84abaa920d6 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -29,7 +29,6 @@ let escapedText = text; const hasSpace = text.indexOf(' ') !== -1; const hasDoubleQuote = text.indexOf('"') !== -1; - const hasSingleQuote = text.indexOf('\'') !== -1; // Encapsulate value with quotes if it has spaces // Known side effect: values's with both single and double quotes @@ -37,7 +36,8 @@ if (hasSpace) { if (hasDoubleQuote) { escapedText = `'${text}'`; - } else if (hasSingleQuote) { + } else { + // Encapsulate singleQuotes or if it hasSpace escapedText = `"${text}"`; } } -- cgit v1.2.1 From 262ad96aa9413e2ff1380930703e9e3a649bb855 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 10:55:55 -0600 Subject: Remove unnecessary function --- .../filtered_search/filtered_search_dropdown.js.es6 | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 85d684e3058..a9dbb0f7ccb 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -27,20 +27,12 @@ return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; } - getSelectedText(selectedToken) { - // TODO: Get last word from FilteredSearchTokenizer - const lastWord = this.input.value.split(' ').last(); - const lastWordIndex = selectedToken.indexOf(lastWord); - - return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); - } - itemClicked(e, getValueFunction) { const dataValueSet = this.setDataValueIfSelected(e.detail.selected); if (!dataValueSet) { - const value = getValueFunction(e.detail.selected) - gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(value)); + const value = getValueFunction(e.detail.selected); + gl.FilteredSearchDropdownManager.addWordToInput(value); } this.dismissDropdown(); -- cgit v1.2.1 From 274f3e23e35ddf3116cd7c227b94ce68378c76af Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 11:06:45 -0600 Subject: Add comments to resolve todos --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index d3bccc4b14c..14e2e698f93 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -26,7 +26,7 @@ let conditionIndex = 0; const validCondition = gl.FilteredSearchTokenKeys.get() .filter(v => v.conditions && v.conditions.filter((c, index) => { - // TODO: Add comment here + // Return TokenKeys that have conditions that much the URL if (c.url === p) { conditionIndex = index; } @@ -155,8 +155,8 @@ const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); if (stateIndex !== -1) { - // TODO: Add comment here - const remaining = currentPath.slice(stateIndex + 6); + // Get currentState from url params if available + const remaining = currentPath.slice(stateIndex + 'state='.length); const separatorIndex = remaining.indexOf('&'); currentState = separatorIndex === -1 ? remaining : remaining.slice(0, separatorIndex); -- cgit v1.2.1 From 8925c9604f95b66a9b8a4579e321961312bfc78d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 11:08:15 -0600 Subject: Add additional check before setting outerHTML --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index 6e1eb080e3b..c6c062d0886 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -78,7 +78,11 @@ require('../window')(function(w){ this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { if (config.loadingTemplate && self.hook.list.data === undefined || self.hook.list.data.length === 0) { - self.hook.list.list.querySelector('[data-loading-template]').outerHTML = self.listTemplate; + const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]'); + + if (dataLoadingTemplate) { + dataLoadingTemplate.outerHTML = self.listTemplate; + } } if (!self.destroyed) { -- cgit v1.2.1 From 16e3fe3f15971bc34c48d65c902ce83a156e350d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 11:19:44 -0600 Subject: Fix missing method from refactoring --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 43a0b1da0fe..1aef27163c6 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -41,13 +41,20 @@ const tag = selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { - gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedText(token)); + gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedTextWithoutEscaping(token)); } this.dismissDropdown(); this.dispatchInputEvent(); } } + getSelectedTextWithoutEscaping(selectedToken) { + const lastWord = this.input.value.split(' ').last(); + const lastWordIndex = selectedToken.indexOf(lastWord); + + return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); + } + renderContent() { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config); this.droplab.setData(this.hookId, dropdownData); -- cgit v1.2.1 From 6eafd748493e1125e1f5dea698dd3ca6affe15c5 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:25:31 -0600 Subject: Fix code styling issues --- .../javascripts/filtered_search/dropdown_hint.js.es6 | 2 +- .../filtered_search/filtered_search_dropdown.js.es6 | 9 +++++---- .../filtered_search_dropdown_manager.js.es6 | 20 ++++++++++---------- 3 files changed, 16 insertions(+), 15 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 1aef27163c6..a79779e4977 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -32,7 +32,7 @@ } itemClicked(e) { - const selected = e.detail.selected; + const { selected } = e.detail; if (selected.hasAttribute('data-value')) { this.dismissDropdown(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index a9dbb0f7ccb..130e6bba341 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -24,14 +24,15 @@ } getCurrentHook() { - return this.droplab.hooks.filter(h => h.id === this.hookId)[0]; + return this.droplab.hooks.filter(h => h.id === this.hookId)[0] || null; } itemClicked(e, getValueFunction) { - const dataValueSet = this.setDataValueIfSelected(e.detail.selected); + const { selected } = e.detail; + const dataValueSet = this.setDataValueIfSelected(selected); if (!dataValueSet) { - const value = getValueFunction(e.detail.selected); + const value = getValueFunction(selected); gl.FilteredSearchDropdownManager.addWordToInput(value); } @@ -67,7 +68,7 @@ this.setAsDropdown(); const currentHook = this.getCurrentHook(); - const firstTimeInitialized = currentHook === undefined; + const firstTimeInitialized = currentHook === null; if (firstTimeInitialized || forceRenderContent) { this.renderContent(forceShowList); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index a0764c275e5..59166840c50 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -55,7 +55,7 @@ } static addWordToInput(word, addSpace = false) { - const input = document.querySelector('.filtered-search') + const input = document.querySelector('.filtered-search'); const value = input.value; const hasExistingValue = value.length !== 0; const { lastToken } = gl.FilteredSearchTokenizer.processTokens(value); @@ -88,22 +88,22 @@ } load(key, firstLoad = false) { - console.log(`🦄 load ${key} dropdown`); - const glClass = this.mapping[key].gl; - const element = this.mapping[key].element; + const mappingKey = this.mapping[key]; + const glClass = mappingKey.gl; + const element = mappingKey.element; let forceShowList = false; - if (!this.mapping[key].reference) { + if (!mappingKey.reference) { const dl = this.droplab; const defaultArguments = [null, dl, element, this.filteredSearchInput]; - const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []); + const glArguments = defaultArguments.concat(mappingKey.extraArguments || []); // Passing glArguments to `new gl[glClass]()` - this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); + mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); } if (firstLoad) { - this.mapping[key].reference.init(); + mappingKey.reference.init(); } if (this.currentDropdown === 'hint') { @@ -112,7 +112,7 @@ } this.updateDropdownOffset(key); - this.mapping[key].reference.render(firstLoad, forceShowList); + mappingKey.reference.render(firstLoad, forceShowList); this.currentDropdown = key; } @@ -120,7 +120,7 @@ loadDropdown(dropdownName = '') { let firstLoad = false; - if(!this.droplab) { + if (!this.droplab) { firstLoad = true; this.droplab = new DropLab(); } -- cgit v1.2.1 From d8b8b9c88d0fbe4cfa1fae0796feaa82136cc747 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:27:10 -0600 Subject: Add support for delete key --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 14e2e698f93..ebbd7e3129e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -125,7 +125,9 @@ } checkForBackspace(e) { - if (e.keyCode === 8) { + // 8 = Backspace Key + // 46 = Delete Key + if (e.keyCode === 8 || e.keyCode === 46) { // Reposition dropdown so that it is aligned with cursor this.dropdownManager.updateCurrentDropdownOffset(); } -- cgit v1.2.1 From 214b6495ca1853c9653a0ff109e0163dbc1d1cb6 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:28:17 -0600 Subject: Remove unnecessary stopPropagation --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 2 -- 1 file changed, 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index ebbd7e3129e..e068b5d2ebf 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -115,7 +115,6 @@ } clearSearch(e) { - e.stopPropagation(); e.preventDefault(); this.filteredSearchInput.value = ''; @@ -135,7 +134,6 @@ checkForEnter(e) { if (e.keyCode === 13) { - e.stopPropagation(); e.preventDefault(); // Prevent droplab from opening dropdown -- cgit v1.2.1 From f0935c4da5bcd84fac51f7a0d61ee0c8d8181679 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:29:51 -0600 Subject: Fix regex for + --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index e068b5d2ebf..a89627384e9 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -40,7 +40,7 @@ } else { // Sanitize value since URL converts spaces into + // Replace before decode so that we know what was originally + versus the encoded + - const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value; + const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value; const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0]; if (match) { -- cgit v1.2.1 From a30fbbddfb03a63305ff1bd273d7dd98c976936a Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:31:22 -0600 Subject: Reduce over-verboseness --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index a89627384e9..77a9de96c8a 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -47,13 +47,11 @@ const sanitizedKey = key.slice(0, key.indexOf('_')); const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; const symbol = match.symbol; - - const preferredQuotations = '"'; - let quotationsToUse = preferredQuotations; + let quotationsToUse; if (valueHasSpace) { // Prefer ", but use ' if required - quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\''; + quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\''; } inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`; -- cgit v1.2.1 From 5116db243a2f1705462e792cbb71f666cfca98f0 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:34:01 -0600 Subject: Convert to single quotes --- app/assets/javascripts/lib/utils/text_utility.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index e47eccc3a33..db24bcf682b 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -27,8 +27,8 @@ * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 */ // re-use canvas object for better performance - var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement("canvas")); - var context = canvas.getContext("2d"); + var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement('canvas')); + var context = canvas.getContext('2d'); context.font = font; var metrics = context.measureText(text); return metrics.width; -- cgit v1.2.1 From 78fe37b169602d898ffbd756189706559aad84f2 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:37:49 -0600 Subject: Move functions into class --- .../filtered_search/filtered_search_manager.js.es6 | 164 ++++++++++----------- 1 file changed, 81 insertions(+), 83 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 77a9de96c8a..00b7dc195bb 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,76 +1,5 @@ /* eslint-disable no-param-reassign */ ((global) => { - // TODO: Encapsulate inside class? - function toggleClearSearchButton(e) { - const clearSearchButton = document.querySelector('.clear-search'); - - if (e.target.value) { - clearSearchButton.classList.remove('hidden'); - } else { - clearSearchButton.classList.add('hidden'); - } - } - - function loadSearchParamsFromURL() { - // We can trust that each param has one & since values containing & will be encoded - // Remove the first character of search as it is always ? - const params = window.location.search.slice(1).split('&'); - let inputValue = ''; - - params.forEach((p) => { - const split = p.split('='); - const key = decodeURIComponent(split[0]); - const value = split[1]; - - // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get() - let conditionIndex = 0; - const validCondition = gl.FilteredSearchTokenKeys.get() - .filter(v => v.conditions && v.conditions.filter((c, index) => { - // Return TokenKeys that have conditions that much the URL - if (c.url === p) { - conditionIndex = index; - } - return c.url === p; - })[0])[0]; - - if (validCondition) { - // Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get() - inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; - inputValue += ' '; - } else { - // Sanitize value since URL converts spaces into + - // Replace before decode so that we know what was originally + versus the encoded + - const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value; - const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0]; - - if (match) { - const sanitizedKey = key.slice(0, key.indexOf('_')); - const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; - const symbol = match.symbol; - let quotationsToUse; - - if (valueHasSpace) { - // Prefer ", but use ' if required - quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\''; - } - - inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`; - inputValue += ' '; - } else if (!match && key === 'search') { - inputValue += sanitizedValue; - inputValue += ' '; - } - } - }); - - // Trim the last space value - document.querySelector('.filtered-search').value = inputValue.trim(); - - if (inputValue.trim()) { - document.querySelector('.clear-search').classList.remove('hidden'); - } - } - class FilteredSearchManager { constructor() { this.tokenizer = gl.FilteredSearchTokenizer; @@ -79,7 +8,7 @@ this.dropdownManager = new gl.FilteredSearchDropdownManager(); this.bindEvents(); - loadSearchParamsFromURL(); + this.loadSearchParamsFromURL(); this.dropdownManager.setDropdown(); this.cleanupWrapper = this.cleanup.bind(this); @@ -93,12 +22,13 @@ bindEvents() { this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager); + this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this); this.checkForEnterWrapper = this.checkForEnter.bind(this); this.clearSearchWrapper = this.clearSearch.bind(this); this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper); - this.filteredSearchInput.addEventListener('input', toggleClearSearchButton); + this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper); this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper); this.clearSearchButton.addEventListener('click', this.clearSearchWrapper); @@ -106,21 +36,12 @@ unbindEvents() { this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper); - this.filteredSearchInput.removeEventListener('input', toggleClearSearchButton); + this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper); this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper); this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper); } - clearSearch(e) { - e.preventDefault(); - - this.filteredSearchInput.value = ''; - this.clearSearchButton.classList.add('hidden'); - - this.dropdownManager.resetDropdowns(); - } - checkForBackspace(e) { // 8 = Backspace Key // 46 = Delete Key @@ -141,6 +62,83 @@ } } + toggleClearSearchButton(e) { + if (e.target.value) { + this.clearSearchButton.classList.remove('hidden'); + } else { + this.clearSearchButton.classList.add('hidden'); + } + } + + clearSearch(e) { + e.preventDefault(); + + this.filteredSearchInput.value = ''; + this.clearSearchButton.classList.add('hidden'); + + this.dropdownManager.resetDropdowns(); + } + + loadSearchParamsFromURL() { + // We can trust that each param has one & since values containing & will be encoded + // Remove the first character of search as it is always ? + const params = window.location.search.slice(1).split('&'); + let inputValue = ''; + + params.forEach((p) => { + const split = p.split('='); + const key = decodeURIComponent(split[0]); + const value = split[1]; + + // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get() + let conditionIndex = 0; + const validCondition = gl.FilteredSearchTokenKeys.get() + .filter(v => v.conditions && v.conditions.filter((c, index) => { + // Return TokenKeys that have conditions that much the URL + if (c.url === p) { + conditionIndex = index; + } + return c.url === p; + })[0])[0]; + + if (validCondition) { + // Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get() + inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; + inputValue += ' '; + } else { + // Sanitize value since URL converts spaces into + + // Replace before decode so that we know what was originally + versus the encoded + + const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value; + const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0]; + + if (match) { + const sanitizedKey = key.slice(0, key.indexOf('_')); + const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; + const symbol = match.symbol; + let quotationsToUse; + + if (valueHasSpace) { + // Prefer ", but use ' if required + quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\''; + } + + inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`; + inputValue += ' '; + } else if (!match && key === 'search') { + inputValue += sanitizedValue; + inputValue += ' '; + } + } + }); + + // Trim the last space value + this.filteredSearchInput.value = inputValue.trim(); + + if (inputValue.trim()) { + this.clearSearchButton.classList.remove('hidden'); + } + } + search() { let path = '?scope=all&utf8=✓'; -- cgit v1.2.1 From e9886b5704ae60a0e3517205de3958e9c0044a99 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:42:00 -0600 Subject: Convert string concatenations with an array join --- .../filtered_search/filtered_search_manager.js.es6 | 25 ++++++++++------------ 1 file changed, 11 insertions(+), 14 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 00b7dc195bb..d0e39b6390d 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -83,7 +83,7 @@ // We can trust that each param has one & since values containing & will be encoded // Remove the first character of search as it is always ? const params = window.location.search.slice(1).split('&'); - let inputValue = ''; + let inputValues = []; params.forEach((p) => { const split = p.split('='); @@ -103,8 +103,7 @@ if (validCondition) { // Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get() - inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`; - inputValue += ' '; + inputValues.push(`${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`); } else { // Sanitize value since URL converts spaces into + // Replace before decode so that we know what was originally + versus the encoded + @@ -122,25 +121,23 @@ quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\''; } - inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`; - inputValue += ' '; + inputValues.push(valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`); } else if (!match && key === 'search') { - inputValue += sanitizedValue; - inputValue += ' '; + inputValues.push(sanitizedValue); } } }); // Trim the last space value - this.filteredSearchInput.value = inputValue.trim(); + this.filteredSearchInput.value = inputValues.join(' '); - if (inputValue.trim()) { + if (inputValues.length > 0) { this.clearSearchButton.classList.remove('hidden'); } } search() { - let path = '?scope=all&utf8=✓'; + let paths = []; // Check current state const currentPath = window.location.search; @@ -158,7 +155,7 @@ currentState = separatorIndex === -1 ? remaining : remaining.slice(0, separatorIndex); } - path += `&state=${currentState}`; + paths.push(`state=${currentState}`); tokens.forEach((token) => { const match = gl.FilteredSearchTokenKeys.get().filter(t => t.key === token.key)[0]; let tokenPath = ''; @@ -177,14 +174,14 @@ tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value)}`; } - path += `&${tokenPath}`; + paths.push(tokenPath); }); if (searchToken) { - path += `&search=${encodeURIComponent(searchToken)}`; + paths.push(`search=${encodeURIComponent(searchToken)}`); } - window.location = path; + window.location = `?scope=all&utf8=✓&${paths.join('&')}`; } } -- cgit v1.2.1 From 98cb6101ec45e8758a9e85a3a24fcde9803ece18 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 21:07:42 -0600 Subject: Refactor static data to get information from other variables instead --- app/assets/javascripts/filtered_search/dropdown_user.js.es6 | 4 ++-- .../javascripts/filtered_search/filtered_search_dropdown.js.es6 | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 8bc274e0b12..69b1ec3ea04 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -15,7 +15,7 @@ project_id: this.getProjectId(), current_user: true, }, - searchValueFunction: this.getSearchInput, + searchValueFunction: this.getSearchInput.bind(this), loadingTemplate: this.loadingTemplate, }, }; @@ -37,7 +37,7 @@ } getSearchInput() { - const query = document.querySelector('.filtered-search').value; + const query = this.input.value; const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); const valueWithoutColon = value.slice(1); const hasPrefix = valueWithoutColon[0] === '@'; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 130e6bba341..a5d8b0969c6 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -5,7 +5,7 @@ class FilteredSearchDropdown { constructor(droplab, dropdown, input) { this.droplab = droplab; - this.hookId = 'filtered-search'; + this.hookId = input.getAttribute('data-id'); this.input = input; this.dropdown = dropdown; this.loadingTemplate = `
          -- cgit v1.2.1 From 091a3e66e9f2616eefca0f3aba090063116629e2 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 21:15:50 -0600 Subject: Add getParameterByName --- .../filtered_search/filtered_search_manager.js.es6 | 18 ++---------------- app/assets/javascripts/lib/utils/common_utils.js.es6 | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 16 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index d0e39b6390d..2237a21ca60 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -138,24 +138,10 @@ search() { let paths = []; - - // Check current state - const currentPath = window.location.search; - const stateIndex = currentPath.indexOf('state='); - const defaultState = 'opened'; - let currentState = defaultState; - const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); - - if (stateIndex !== -1) { - // Get currentState from url params if available - const remaining = currentPath.slice(stateIndex + 'state='.length); - const separatorIndex = remaining.indexOf('&'); - - currentState = separatorIndex === -1 ? remaining : remaining.slice(0, separatorIndex); - } - + const currentState = gl.utils.getParameterByName('state') || 'opened'; paths.push(`state=${currentState}`); + tokens.forEach((token) => { const match = gl.FilteredSearchTokenKeys.get().filter(t => t.key === token.key)[0]; let tokenPath = ''; diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index b8d637a9827..f0186c1390f 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -124,6 +124,22 @@ return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname; }; + gl.utils.getParameterByName = function(name) { + var url = window.location.href; + var param = name.replace(/[[\]]/g, '\\$&'); + var regex = new RegExp(`[?&]${param}(=([^&#]*)|&|#|$)`); + var results = regex.exec(url); + + if (!results) { + return null; + } + + if (!results[2]) { + return ''; + } + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + }; + gl.utils.isMetaKey = function(e) { return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; }; -- cgit v1.2.1 From bcb00bdc487ad0d0e95c4a46a7d9437dcefc4e33 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 21:19:16 -0600 Subject: Use turbolinks instead of window.location --- app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 2237a21ca60..e087d0fd45b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -167,7 +167,7 @@ paths.push(`search=${encodeURIComponent(searchToken)}`); } - window.location = `?scope=all&utf8=✓&${paths.join('&')}`; + Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`); } } -- cgit v1.2.1 From 49231ccef2fb0bd0cd10d636864d1d50ea70cbdc Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 21:24:55 -0600 Subject: Refactor getUrlParamsArray() --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 4 +--- app/assets/javascripts/lib/utils/common_utils.js.es6 | 6 ++++++ 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index e087d0fd45b..3e57215d608 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -80,9 +80,7 @@ } loadSearchParamsFromURL() { - // We can trust that each param has one & since values containing & will be encoded - // Remove the first character of search as it is always ? - const params = window.location.search.slice(1).split('&'); + const params = gl.utils.getUrlParamsArray(); let inputValues = []; params.forEach((p) => { diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index f0186c1390f..7a18f760e1b 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -124,6 +124,12 @@ return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname; }; + gl.utils.getUrlParamsArray = function () { + // We can trust that each param has one & since values containing & will be encoded + // Remove the first character of search as it is always ? + return window.location.search.slice(1).split('&'); + } + gl.utils.getParameterByName = function(name) { var url = window.location.href; var param = name.replace(/[[\]]/g, '\\$&'); -- cgit v1.2.1 From bf16e91f2494912d44bc3a52d99ab36d3b33cd47 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 22:15:31 -0600 Subject: Refactor FilteredSearchTokenKeys model --- .../filtered_search_dropdown_manager.js.es6 | 2 +- .../filtered_search/filtered_search_manager.js.es6 | 48 ++++------- .../filtered_search_token_keys.js.es6 | 97 ++++++++++++++-------- .../filtered_search/filtered_search_tokenizer.es6 | 5 +- 4 files changed, 81 insertions(+), 71 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index 59166840c50..682857d1899 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -125,7 +125,7 @@ this.droplab = new DropLab(); } - const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0]; + const match = gl.FilteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase()); const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key); const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 3e57215d608..d7fb3a0c204 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -85,42 +85,32 @@ params.forEach((p) => { const split = p.split('='); - const key = decodeURIComponent(split[0]); + const keyParam = decodeURIComponent(split[0]); const value = split[1]; - // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get() - let conditionIndex = 0; - const validCondition = gl.FilteredSearchTokenKeys.get() - .filter(v => v.conditions && v.conditions.filter((c, index) => { - // Return TokenKeys that have conditions that much the URL - if (c.url === p) { - conditionIndex = index; - } - return c.url === p; - })[0])[0]; + // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys + const condition = gl.FilteredSearchTokenKeys.searchByConditionUrl(p); - if (validCondition) { - // Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get() - inputValues.push(`${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`); + if (condition) { + inputValues.push(`${condition.tokenKey}:${condition.value}`); } else { // Sanitize value since URL converts spaces into + // Replace before decode so that we know what was originally + versus the encoded + const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value; - const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0]; + const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam); if (match) { - const sanitizedKey = key.slice(0, key.indexOf('_')); - const valueHasSpace = sanitizedValue.indexOf(' ') !== -1; + const sanitizedKey = keyParam.slice(0, keyParam.indexOf('_')); const symbol = match.symbol; - let quotationsToUse; + let quotationsToUse = ''; - if (valueHasSpace) { + if (sanitizedValue.indexOf(' ') !== -1) { // Prefer ", but use ' if required quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\''; } - inputValues.push(valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`); - } else if (!match && key === 'search') { + inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`); + } else if (!match && keyParam === 'search') { inputValues.push(sanitizedValue); } } @@ -141,21 +131,17 @@ paths.push(`state=${currentState}`); tokens.forEach((token) => { - const match = gl.FilteredSearchTokenKeys.get().filter(t => t.key === token.key)[0]; + const condition = gl.FilteredSearchTokenKeys.searchByConditionKeyValue(token.key, token.value.toLowerCase()); + const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key); let tokenPath = ''; - if (token.wildcard && match.conditions) { - const condition = match.conditions - .filter(c => c.keyword === token.value.toLowerCase())[0]; - - if (condition) { - tokenPath = `${condition.url}`; - } + if (token.wildcard && condition) { + tokenPath = condition.url; } else if (!token.wildcard) { // Remove the wildcard token - tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value.slice(1))}`; + tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value.slice(1))}`; } else { - tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value)}`; + tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value)}`; } paths.push(tokenPath); diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 index 8d38a29a354..97eab6be8df 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 @@ -1,43 +1,68 @@ /* eslint-disable no-param-reassign */ ((global) => { + const tokenKeys = [{ + key: 'author', + type: 'string', + param: 'username', + symbol: '@', + }, { + key: 'assignee', + type: 'string', + param: 'username', + symbol: '@', + }, { + key: 'milestone', + type: 'string', + param: 'title', + symbol: '%', + }, { + key: 'label', + type: 'array', + param: 'name[]', + symbol: '~', + }]; + + const conditions = [{ + url: 'assignee_id=0', + tokenKey: 'assignee', + value: 'none', + }, { + url: 'milestone_title=No+Milestone', + tokenKey: 'milestone', + value: 'none', + }, { + url: 'milestone_title=%23upcoming', + tokenKey: 'milestone', + value: 'upcoming', + }, { + url: 'label_name[]=No+Label', + tokenKey: 'label', + value: 'none', + }]; + class FilteredSearchTokenKeys { static get() { - return [{ - key: 'author', - type: 'string', - param: 'username', - symbol: '@', - }, { - key: 'assignee', - type: 'string', - param: 'username', - symbol: '@', - conditions: [{ - keyword: 'none', - url: 'assignee_id=0', - }], - }, { - key: 'milestone', - type: 'string', - param: 'title', - symbol: '%', - conditions: [{ - keyword: 'none', - url: 'milestone_title=No+Milestone', - }, { - keyword: 'upcoming', - url: 'milestone_title=%23upcoming', - }], - }, { - key: 'label', - type: 'array', - param: 'name[]', - symbol: '~', - conditions: [{ - keyword: 'none', - url: 'label_name[]=No+Label', - }], - }]; + return tokenKeys; + } + + static searchByKey(key) { + return tokenKeys.find(tokenKey => tokenKey.key === key) || null; + } + + static searchBySymbol(symbol) { + return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null; + } + + static searchByKeyParam(keyParam) { + return tokenKeys.find(tokenKey => keyParam === `${tokenKey.key}_${tokenKey.param}`) || null; + } + + static searchByConditionUrl(url) { + return conditions.find(condition => condition.url === url) || null; + } + + static searchByConditionKeyValue(key, value) { + return conditions.find(condition => condition.tokenKey === key && condition.value === value) || null; } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index ac45d3b7986..365171252a1 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -73,7 +73,6 @@ let tokens = []; let searchToken = ''; let lastToken = ''; - const validTokenKeys = gl.FilteredSearchTokenKeys.get(); const inputs = input.split(' '); let searchTerms = ''; @@ -107,8 +106,8 @@ if (colonIndex !== -1) { const { tokenKey, tokenValue, tokenSymbol } = gl.FilteredSearchTokenizer.parseToken(i); - const keyMatch = validTokenKeys.filter(v => v.key === tokenKey)[0]; - const symbolMatch = validTokenKeys.filter(v => v.symbol === tokenSymbol)[0]; + const keyMatch = gl.FilteredSearchTokenKeys.searchByKey(tokenKey); + const symbolMatch = gl.FilteredSearchTokenKeys.searchBySymbol(tokenSymbol); const doubleQuoteOccurrences = tokenValue.split('"').length - 1; const singleQuoteOccurrences = tokenValue.split('\'').length - 1; -- cgit v1.2.1 From a26cc6b25c2602fd4a47808b8c9c48dea789c6bf Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 23:16:45 -0600 Subject: Simplify if else to make code easier to understand --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index d7fb3a0c204..87bcbd272ca 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -137,11 +137,12 @@ if (token.wildcard && condition) { tokenPath = condition.url; - } else if (!token.wildcard) { - // Remove the wildcard token - tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value.slice(1))}`; - } else { + } else if (token.wildcard) { + // wildcard means that the token does not have a symbol tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value)}`; + } else { + // Remove the token symbol + tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value.slice(1))}`; } paths.push(tokenPath); -- cgit v1.2.1 From 27b2204009fb8fee409df013de013146bad1bfde Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 13 Dec 2016 08:51:49 -0600 Subject: Convert hasOwnProperty check to if statement --- app/assets/javascripts/dispatcher.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 5a9ee5c7d78..9a76131b87f 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -84,7 +84,7 @@ break; case 'projects:merge_requests:index': case 'projects:issues:index': - if(gl.hasOwnProperty('FilteredSearchManager')) { + if(gl.FilteredSearchManager) { new gl.FilteredSearchManager(); } Issuable.init(); -- cgit v1.2.1 From 6700b76bec2a3b6564bd9da12b580b998d767d30 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 13 Dec 2016 08:52:43 -0600 Subject: Fix eslint --- .../filtered_search/dropdown_hint.js.es6 | 29 ++++++++++---------- .../filtered_search/dropdown_non_user.js.es6 | 31 ++++++++++++---------- .../filtered_search/dropdown_user.js.es6 | 14 +++++----- .../filtered_search_dropdown.js.es6 | 16 ++++++----- .../filtered_search_dropdown_manager.js.es6 | 24 +++++++++-------- .../filtered_search/filtered_search_manager.js.es6 | 15 ++++++----- .../filtered_search_token_keys.js.es6 | 11 ++++---- .../filtered_search/filtered_search_tokenizer.es6 | 8 +++--- .../javascripts/lib/utils/common_utils.js.es6 | 2 +- app/assets/javascripts/lib/utils/text_utility.js | 3 +-- 10 files changed, 81 insertions(+), 72 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index a79779e4977..b920b17d915 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -1,20 +1,18 @@ -/* eslint-disable no-param-reassign */ /*= require filtered_search/filtered_search_dropdown */ - -((global) => { +(() => { const dropdownData = [{ icon: 'fa-pencil', hint: 'author:', - tag: '<author>' - },{ + tag: '<author>', + }, { icon: 'fa-user', hint: 'assignee:', tag: '<assignee>', - },{ + }, { icon: 'fa-clock-o', hint: 'milestone:', tag: '<milestone>', - },{ + }, { icon: 'fa-tag', hint: 'label:', tag: '<label>', @@ -27,7 +25,7 @@ droplabFilter: { template: 'hint', filterFunction: this.filterMethod, - } + }, }; } @@ -41,7 +39,8 @@ const tag = selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { - gl.FilteredSearchDropdownManager.addWordToInput(this.getSelectedTextWithoutEscaping(token)); + gl.FilteredSearchDropdownManager + .addWordToInput(this.getSelectedTextWithoutEscaping(token)); } this.dismissDropdown(); this.dispatchInputEvent(); @@ -61,15 +60,16 @@ } filterMethod(item, query) { + const updatedItem = item; const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); if (value === '') { - item.droplab_hidden = false; + updatedItem.droplab_hidden = false; } else { - item.droplab_hidden = item['hint'].indexOf(value) === -1; + updatedItem.droplab_hidden = updatedItem.hint.indexOf(value) === -1; } - return item; + return updatedItem; } init() { @@ -77,5 +77,6 @@ } } - global.DropdownHint = DropdownHint; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.DropdownHint = DropdownHint; +})(); diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 84abaa920d6..95133db4c04 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -1,26 +1,24 @@ -/* eslint-disable no-param-reassign */ /*= require filtered_search/filtered_search_dropdown */ - -((global) => { +(() => { class DropdownNonUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input, endpoint, symbol) { super(droplab, dropdown, input); this.symbol = symbol; this.config = { droplabAjax: { - endpoint: endpoint, + endpoint, method: 'setData', loadingTemplate: this.loadingTemplate, }, droplabFilter: { filterFunction: this.filterWithSymbol.bind(this, this.symbol), - } + }, }; } itemClicked(e) { super.itemClicked(e, (selected) => { - const title = e.detail.selected.querySelector('.js-data-value').innerText.trim(); + const title = selected.querySelector('.js-data-value').innerText.trim(); return `${this.symbol}${this.getEscapedText(title)}`; }); } @@ -46,30 +44,35 @@ } filterWithSymbol(filterSymbol, item, query) { + const updatedItem = item; const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); const valueWithoutColon = value.slice(1).toLowerCase(); const prefix = valueWithoutColon[0]; const valueWithoutPrefix = valueWithoutColon.slice(1); - const title = item.title.toLowerCase(); + const title = updatedItem.title.toLowerCase(); // Eg. filterSymbol = ~ for labels - const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; + const matchWithoutPrefix = + prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; const match = title.indexOf(valueWithoutColon) !== -1; - item.droplab_hidden = !match && !matchWithoutPrefix; - return item; + updatedItem.droplab_hidden = !match && !matchWithoutPrefix; + return updatedItem; } renderContent(forceShowList = false) { - this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); + this.droplab + .changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); super.renderContent(forceShowList); } init() { - this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); + this.droplab + .addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init(); } } - global.DropdownNonUser = DropdownNonUser; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.DropdownNonUser = DropdownNonUser; +})(); diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 69b1ec3ea04..2ee46559e63 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -1,7 +1,5 @@ -/* eslint-disable no-param-reassign */ /*= require filtered_search/filtered_search_dropdown */ - -((global) => { +(() => { class DropdownUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input) { super(droplab, dropdown, input); @@ -22,9 +20,8 @@ } itemClicked(e) { - super.itemClicked(e, (selected) => { - return selected.querySelector('.dropdown-light-content').innerText.trim(); - }); + super.itemClicked(e, + selected => selected.querySelector('.dropdown-light-content').innerText.trim()); } renderContent(forceShowList = false) { @@ -51,5 +48,6 @@ } } - global.DropdownUser = DropdownUser; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.DropdownUser = DropdownUser; +})(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index a5d8b0969c6..7ddfdca10fa 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -1,5 +1,4 @@ -/* eslint-disable no-param-reassign */ -((global) => { +(() => { const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger'; class FilteredSearchDropdown { @@ -72,7 +71,7 @@ if (firstTimeInitialized || forceRenderContent) { this.renderContent(forceShowList); - } else if(currentHook.list.list.id !== this.dropdown.id) { + } else if (currentHook.list.list.id !== this.dropdown.id) { this.renderContent(forceShowList); } } @@ -96,10 +95,15 @@ resetFilters() { const hook = this.getCurrentHook(); const data = hook.list.data; - const results = data.map(o => o.droplab_hidden = false); + const results = data.map((o) => { + const updated = o; + updated.droplab_hidden = false; + return updated; + }); hook.list.render(results); } } - global.FilteredSearchDropdown = FilteredSearchDropdown; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.FilteredSearchDropdown = FilteredSearchDropdown; +})(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index 682857d1899..7864ebf7aa1 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -1,5 +1,4 @@ -/* eslint-disable no-param-reassign */ -((global) => { +(() => { class FilteredSearchDropdownManager { constructor() { this.tokenizer = gl.FilteredSearchTokenizer; @@ -51,7 +50,7 @@ gl: 'DropdownHint', element: document.querySelector('#js-dropdown-hint'), }, - } + }; } static addWordToInput(word, addSpace = false) { @@ -60,7 +59,7 @@ const hasExistingValue = value.length !== 0; const { lastToken } = gl.FilteredSearchTokenizer.processTokens(value); - if (lastToken.hasOwnProperty('key')) { + if ({}.hasOwnProperty.call(lastToken, 'key')) { // Spaces inside the token means that the token value will be escaped by quotes const hasQuotes = lastToken.value.indexOf(' ') !== -1; @@ -82,7 +81,8 @@ } const filterIconPadding = 27; - const offset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; + const offset = gl.text + .getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding; this.mapping[key].reference.setOffset(offset); } @@ -99,7 +99,7 @@ const glArguments = defaultArguments.concat(mappingKey.extraArguments || []); // Passing glArguments to `new gl[glClass]()` - mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments)); + mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))(); } if (firstLoad) { @@ -126,12 +126,13 @@ } const match = gl.FilteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase()); - const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key); + const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key + && {}.hasOwnProperty.call(this.mapping, match.key); const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; if (shouldOpenFilterDropdown || shouldOpenHintDropdown) { // `hint` is not listed as a tokenKey (since it is not a real `filter`) - const key = match && match.hasOwnProperty('key') ? match.key : 'hint'; + const key = match && {}.hasOwnProperty.call(match, 'key') ? match.key : 'hint'; this.load(key, firstLoad); } @@ -146,7 +147,7 @@ // Eg. token = 'label:' const { tokenKey } = this.tokenizer.parseToken(lastToken); this.loadDropdown(tokenKey); - } else if (lastToken.hasOwnProperty('key')) { + } else if ({}.hasOwnProperty.call(lastToken, 'key')) { // Token has been initialized into an object because it has a value this.loadDropdown(lastToken.key); } else { @@ -173,5 +174,6 @@ } } - global.FilteredSearchDropdownManager = FilteredSearchDropdownManager; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager; +})(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 87bcbd272ca..96131a673ef 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,5 +1,4 @@ -/* eslint-disable no-param-reassign */ -((global) => { +(() => { class FilteredSearchManager { constructor() { this.tokenizer = gl.FilteredSearchTokenizer; @@ -81,7 +80,7 @@ loadSearchParamsFromURL() { const params = gl.utils.getUrlParamsArray(); - let inputValues = []; + const inputValues = []; params.forEach((p) => { const split = p.split('='); @@ -125,13 +124,14 @@ } search() { - let paths = []; + const paths = []; const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); const currentState = gl.utils.getParameterByName('state') || 'opened'; paths.push(`state=${currentState}`); tokens.forEach((token) => { - const condition = gl.FilteredSearchTokenKeys.searchByConditionKeyValue(token.key, token.value.toLowerCase()); + const condition = gl.FilteredSearchTokenKeys + .searchByConditionKeyValue(token.key, token.value.toLowerCase()); const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key); let tokenPath = ''; @@ -156,5 +156,6 @@ } } - global.FilteredSearchManager = FilteredSearchManager; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.FilteredSearchManager = FilteredSearchManager; +})(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 index 97eab6be8df..a1830d13e5f 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 @@ -1,5 +1,4 @@ -/* eslint-disable no-param-reassign */ -((global) => { +(() => { const tokenKeys = [{ key: 'author', type: 'string', @@ -62,9 +61,11 @@ } static searchByConditionKeyValue(key, value) { - return conditions.find(condition => condition.tokenKey === key && condition.value === value) || null; + return conditions + .find(condition => condition.tokenKey === key && condition.value === value) || null; } } - global.FilteredSearchTokenKeys = FilteredSearchTokenKeys; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys; +})(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 index 365171252a1..0507f7bbc48 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 @@ -1,5 +1,4 @@ -/* eslint-disable no-param-reassign */ -((global) => { +(() => { class FilteredSearchTokenizer { static parseToken(input) { const colonIndex = input.indexOf(':'); @@ -161,5 +160,6 @@ } } - global.FilteredSearchTokenizer = FilteredSearchTokenizer; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + gl.FilteredSearchTokenizer = FilteredSearchTokenizer; +})(); diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index 7a18f760e1b..9f1a62bf8b1 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -128,7 +128,7 @@ // We can trust that each param has one & since values containing & will be encoded // Remove the first character of search as it is always ? return window.location.search.slice(1).split('&'); - } + }; gl.utils.getParameterByName = function(name) { var url = window.location.href; diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js index db24bcf682b..c856a26ae40 100644 --- a/app/assets/javascripts/lib/utils/text_utility.js +++ b/app/assets/javascripts/lib/utils/text_utility.js @@ -30,8 +30,7 @@ var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement('canvas')); var context = canvas.getContext('2d'); context.font = font; - var metrics = context.measureText(text); - return metrics.width; + return context.measureText(text).width; }; gl.text.selectedText = function(text, textarea) { return text.substring(textarea.selectionStart, textarea.selectionEnd); -- cgit v1.2.1 From 3d18319e0deae15836e994088f1254b28015d188 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 13 Dec 2016 09:52:23 -0600 Subject: Rename to .js.es6 --- .../filtered_search/filtered_search_tokenizer.es6 | 165 --------------------- .../filtered_search_tokenizer.js.es6 | 165 +++++++++++++++++++++ 2 files changed, 165 insertions(+), 165 deletions(-) delete mode 100644 app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 create mode 100644 app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 deleted file mode 100644 index 0507f7bbc48..00000000000 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.es6 +++ /dev/null @@ -1,165 +0,0 @@ -(() => { - class FilteredSearchTokenizer { - static parseToken(input) { - const colonIndex = input.indexOf(':'); - let tokenKey; - let tokenValue; - let tokenSymbol; - - if (colonIndex !== -1) { - tokenKey = input.slice(0, colonIndex).toLowerCase(); - tokenValue = input.slice(colonIndex + 1); - tokenSymbol = tokenValue[0]; - } - - return { - tokenKey, - tokenValue, - tokenSymbol, - } - } - - static getLastTokenObject(input) { - const token = FilteredSearchTokenizer.getLastToken(input); - const colonIndex = token.indexOf(':'); - - const key = colonIndex !== -1 ? token.slice(0, colonIndex) : ''; - const value = colonIndex !== -1 ? token.slice(colonIndex) : token; - - return { - key, - value, - } - } - - static getLastToken(input) { - let completeToken = false; - let completeQuotation = true; - let lastQuotation = ''; - let i = input.length; - - const doubleQuote = '"'; - const singleQuote = '\''; - while(!completeToken && i >= 0) { - const isDoubleQuote = input[i] === doubleQuote; - const isSingleQuote = input[i] === singleQuote; - - // If the second quotation is found - if ((lastQuotation === doubleQuote && input[i] === doubleQuote) || - (lastQuotation === singleQuote && input[i] === singleQuote)) { - completeQuotation = true; - } - - // Save the first quotation - if ((input[i] === doubleQuote && lastQuotation === '') || - (input[i] === singleQuote && lastQuotation === '')) { - lastQuotation = input[i]; - completeQuotation = false; - } - - if (completeQuotation && input[i] === ' ') { - completeToken = true; - } else { - i--; - } - } - - // Adjust by 1 because of empty space - return input.slice(i + 1); - } - - static processTokens(input) { - let tokens = []; - let searchToken = ''; - let lastToken = ''; - - const inputs = input.split(' '); - let searchTerms = ''; - let lastQuotation = ''; - let incompleteToken = false; - - // Iterate through each word (broken up by spaces) - inputs.forEach((i) => { - if (incompleteToken) { - // Continue previous token as it had an escaped - // quote in the beginning - const prevToken = tokens.last(); - prevToken.value += ` ${i}`; - - // Remove last quotation from the value - const lastQuotationRegex = new RegExp(lastQuotation, 'g'); - prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); - tokens[tokens.length - 1] = prevToken; - - // Check to see if this quotation completes the token value - if (i.indexOf(lastQuotation) !== -1) { - lastToken = tokens.last(); - incompleteToken = !incompleteToken; - } - - return; - } - - const colonIndex = i.indexOf(':'); - - if (colonIndex !== -1) { - const { tokenKey, tokenValue, tokenSymbol } = gl.FilteredSearchTokenizer.parseToken(i); - - const keyMatch = gl.FilteredSearchTokenKeys.searchByKey(tokenKey); - const symbolMatch = gl.FilteredSearchTokenKeys.searchBySymbol(tokenSymbol); - - const doubleQuoteOccurrences = tokenValue.split('"').length - 1; - const singleQuoteOccurrences = tokenValue.split('\'').length - 1; - - const doubleQuoteIndex = tokenValue.indexOf('"'); - const singleQuoteIndex = tokenValue.indexOf('\''); - - const doubleQuoteExist = doubleQuoteIndex !== -1; - const singleQuoteExist = singleQuoteIndex !== -1; - - const doubleQuoteExistOnly = doubleQuoteExist && !singleQuoteExist; - const doubleQuoteIsBeforeSingleQuote = doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex; - - const singleQuoteExistOnly = singleQuoteExist && !doubleQuoteExist; - const singleQuoteIsBeforeDoubleQuote = doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex; - - if ((doubleQuoteExistOnly || doubleQuoteIsBeforeSingleQuote) && doubleQuoteOccurrences % 2 !== 0) { - // " is found and is in front of ' (if any) - lastQuotation = '"'; - incompleteToken = true; - } else if ((singleQuoteExistOnly || singleQuoteIsBeforeDoubleQuote) && singleQuoteOccurrences % 2 !== 0) { - // ' is found and is in front of " (if any) - lastQuotation = '\''; - incompleteToken = true; - } - - if (keyMatch && tokenValue.length > 0) { - tokens.push({ - key: keyMatch.key, - value: tokenValue, - wildcard: symbolMatch ? false : true, - }); - lastToken = tokens.last(); - - return; - } - } - - // Add space for next term - searchTerms += `${i} `; - lastToken = i; - }, this); - - searchToken = searchTerms.trim(); - - return { - tokens, - searchToken, - lastToken, - }; - } - } - - window.gl = window.gl || {}; - gl.FilteredSearchTokenizer = FilteredSearchTokenizer; -})(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 new file mode 100644 index 00000000000..0507f7bbc48 --- /dev/null +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 @@ -0,0 +1,165 @@ +(() => { + class FilteredSearchTokenizer { + static parseToken(input) { + const colonIndex = input.indexOf(':'); + let tokenKey; + let tokenValue; + let tokenSymbol; + + if (colonIndex !== -1) { + tokenKey = input.slice(0, colonIndex).toLowerCase(); + tokenValue = input.slice(colonIndex + 1); + tokenSymbol = tokenValue[0]; + } + + return { + tokenKey, + tokenValue, + tokenSymbol, + } + } + + static getLastTokenObject(input) { + const token = FilteredSearchTokenizer.getLastToken(input); + const colonIndex = token.indexOf(':'); + + const key = colonIndex !== -1 ? token.slice(0, colonIndex) : ''; + const value = colonIndex !== -1 ? token.slice(colonIndex) : token; + + return { + key, + value, + } + } + + static getLastToken(input) { + let completeToken = false; + let completeQuotation = true; + let lastQuotation = ''; + let i = input.length; + + const doubleQuote = '"'; + const singleQuote = '\''; + while(!completeToken && i >= 0) { + const isDoubleQuote = input[i] === doubleQuote; + const isSingleQuote = input[i] === singleQuote; + + // If the second quotation is found + if ((lastQuotation === doubleQuote && input[i] === doubleQuote) || + (lastQuotation === singleQuote && input[i] === singleQuote)) { + completeQuotation = true; + } + + // Save the first quotation + if ((input[i] === doubleQuote && lastQuotation === '') || + (input[i] === singleQuote && lastQuotation === '')) { + lastQuotation = input[i]; + completeQuotation = false; + } + + if (completeQuotation && input[i] === ' ') { + completeToken = true; + } else { + i--; + } + } + + // Adjust by 1 because of empty space + return input.slice(i + 1); + } + + static processTokens(input) { + let tokens = []; + let searchToken = ''; + let lastToken = ''; + + const inputs = input.split(' '); + let searchTerms = ''; + let lastQuotation = ''; + let incompleteToken = false; + + // Iterate through each word (broken up by spaces) + inputs.forEach((i) => { + if (incompleteToken) { + // Continue previous token as it had an escaped + // quote in the beginning + const prevToken = tokens.last(); + prevToken.value += ` ${i}`; + + // Remove last quotation from the value + const lastQuotationRegex = new RegExp(lastQuotation, 'g'); + prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); + tokens[tokens.length - 1] = prevToken; + + // Check to see if this quotation completes the token value + if (i.indexOf(lastQuotation) !== -1) { + lastToken = tokens.last(); + incompleteToken = !incompleteToken; + } + + return; + } + + const colonIndex = i.indexOf(':'); + + if (colonIndex !== -1) { + const { tokenKey, tokenValue, tokenSymbol } = gl.FilteredSearchTokenizer.parseToken(i); + + const keyMatch = gl.FilteredSearchTokenKeys.searchByKey(tokenKey); + const symbolMatch = gl.FilteredSearchTokenKeys.searchBySymbol(tokenSymbol); + + const doubleQuoteOccurrences = tokenValue.split('"').length - 1; + const singleQuoteOccurrences = tokenValue.split('\'').length - 1; + + const doubleQuoteIndex = tokenValue.indexOf('"'); + const singleQuoteIndex = tokenValue.indexOf('\''); + + const doubleQuoteExist = doubleQuoteIndex !== -1; + const singleQuoteExist = singleQuoteIndex !== -1; + + const doubleQuoteExistOnly = doubleQuoteExist && !singleQuoteExist; + const doubleQuoteIsBeforeSingleQuote = doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex; + + const singleQuoteExistOnly = singleQuoteExist && !doubleQuoteExist; + const singleQuoteIsBeforeDoubleQuote = doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex; + + if ((doubleQuoteExistOnly || doubleQuoteIsBeforeSingleQuote) && doubleQuoteOccurrences % 2 !== 0) { + // " is found and is in front of ' (if any) + lastQuotation = '"'; + incompleteToken = true; + } else if ((singleQuoteExistOnly || singleQuoteIsBeforeDoubleQuote) && singleQuoteOccurrences % 2 !== 0) { + // ' is found and is in front of " (if any) + lastQuotation = '\''; + incompleteToken = true; + } + + if (keyMatch && tokenValue.length > 0) { + tokens.push({ + key: keyMatch.key, + value: tokenValue, + wildcard: symbolMatch ? false : true, + }); + lastToken = tokens.last(); + + return; + } + } + + // Add space for next term + searchTerms += `${i} `; + lastToken = i; + }, this); + + searchToken = searchTerms.trim(); + + return { + tokens, + searchToken, + lastToken, + }; + } + } + + window.gl = window.gl || {}; + gl.FilteredSearchTokenizer = FilteredSearchTokenizer; +})(); -- cgit v1.2.1 From 4786a9780337839844d5839fefda51430e13685e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 13 Dec 2016 21:36:54 -0600 Subject: Fix es6 errors --- app/assets/javascripts/droplab/droplab.js | 101 ++++++++++++++------- .../javascripts/droplab/droplab_ajax_filter.js | 2 +- .../javascripts/lib/utils/common_utils.js.es6 | 2 +- 3 files changed, 68 insertions(+), 37 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 359cd82bbcd..94236153e41 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -1,3 +1,29 @@ +// Determine where to place this +if (typeof Object.assign != 'function') { + Object.assign = function (target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }; +} + /* eslint-disable */ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o Date: Tue, 13 Dec 2016 21:55:25 -0600 Subject: Fix eslint --- app/assets/javascripts/droplab/droplab.js | 2 +- .../filtered_search/dropdown_hint.js.es6 | 18 ++------- .../filtered_search/dropdown_non_user.js.es6 | 46 +++------------------- .../filtered_search/dropdown_user.js.es6 | 3 ++ .../filtered_search_dropdown.js.es6 | 13 +----- .../filtered_search_dropdown_manager.js.es6 | 2 + .../filtered_search/filtered_search_manager.js.es6 | 2 + .../filtered_search_tokenizer.js.es6 | 32 ++++++++------- 8 files changed, 37 insertions(+), 81 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js index 94236153e41..ed545ec8748 100644 --- a/app/assets/javascripts/droplab/droplab.js +++ b/app/assets/javascripts/droplab/droplab.js @@ -1,3 +1,4 @@ +/* eslint-disable */ // Determine where to place this if (typeof Object.assign != 'function') { Object.assign = function (target, varArgs) { // .length of function is 2 @@ -24,7 +25,6 @@ if (typeof Object.assign != 'function') { }; } -/* eslint-disable */ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o { const dropdownData = [{ icon: 'fa-pencil', @@ -24,7 +27,7 @@ this.config = { droplabFilter: { template: 'hint', - filterFunction: this.filterMethod, + filterFunction: gl.DropdownUtils.filterMethod, }, }; } @@ -59,19 +62,6 @@ this.droplab.setData(this.hookId, dropdownData); } - filterMethod(item, query) { - const updatedItem = item; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - - if (value === '') { - updatedItem.droplab_hidden = false; - } else { - updatedItem.droplab_hidden = updatedItem.hint.indexOf(value) === -1; - } - - return updatedItem; - } - init() { this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init(); } diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 95133db4c04..54090375c5c 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -1,4 +1,8 @@ /*= require filtered_search/filtered_search_dropdown */ + +/* global droplabAjax */ +/* global droplabFilter */ + (() => { class DropdownNonUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input, endpoint, symbol) { @@ -11,7 +15,7 @@ loadingTemplate: this.loadingTemplate, }, droplabFilter: { - filterFunction: this.filterWithSymbol.bind(this, this.symbol), + filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol), }, }; } @@ -19,48 +23,10 @@ itemClicked(e) { super.itemClicked(e, (selected) => { const title = selected.querySelector('.js-data-value').innerText.trim(); - return `${this.symbol}${this.getEscapedText(title)}`; + return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`; }); } - getEscapedText(text) { - let escapedText = text; - const hasSpace = text.indexOf(' ') !== -1; - const hasDoubleQuote = text.indexOf('"') !== -1; - - // Encapsulate value with quotes if it has spaces - // Known side effect: values's with both single and double quotes - // won't escape properly - if (hasSpace) { - if (hasDoubleQuote) { - escapedText = `'${text}'`; - } else { - // Encapsulate singleQuotes or if it hasSpace - escapedText = `"${text}"`; - } - } - - return escapedText; - } - - filterWithSymbol(filterSymbol, item, query) { - const updatedItem = item; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); - const prefix = valueWithoutColon[0]; - const valueWithoutPrefix = valueWithoutColon.slice(1); - - const title = updatedItem.title.toLowerCase(); - - // Eg. filterSymbol = ~ for labels - const matchWithoutPrefix = - prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; - const match = title.indexOf(valueWithoutColon) !== -1; - - updatedItem.droplab_hidden = !match && !matchWithoutPrefix; - return updatedItem; - } - renderContent(forceShowList = false) { this.droplab .changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config); diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 2ee46559e63..7a566907312 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -1,4 +1,7 @@ /*= require filtered_search/filtered_search_dropdown */ + +/* global droplabAjaxFilter */ + (() => { class DropdownUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 7ddfdca10fa..6c66a3b0613 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -28,7 +28,7 @@ itemClicked(e, getValueFunction) { const { selected } = e.detail; - const dataValueSet = this.setDataValueIfSelected(selected); + const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(selected); if (!dataValueSet) { const value = getValueFunction(selected); @@ -46,17 +46,6 @@ this.dropdown.style.left = `${offset}px`; } - setDataValueIfSelected(selected) { - const dataValue = selected.getAttribute('data-value'); - - if (dataValue) { - gl.FilteredSearchDropdownManager.addWordToInput(dataValue); - } - - // Return boolean based on whether it was set - return dataValue !== null; - } - renderContent(forceShowList = false) { if (forceShowList && this.getCurrentHook().list.hidden) { this.getCurrentHook().list.show(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index 7864ebf7aa1..ac71b5e4434 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -1,3 +1,5 @@ +/* global DropLab */ + (() => { class FilteredSearchDropdownManager { constructor() { diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 96131a673ef..e5b37f1e691 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,3 +1,5 @@ +/* global Turbolinks */ + (() => { class FilteredSearchManager { constructor() { diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 index 0507f7bbc48..57c0e8fc359 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 @@ -16,7 +16,7 @@ tokenKey, tokenValue, tokenSymbol, - } + }; } static getLastTokenObject(input) { @@ -29,7 +29,7 @@ return { key, value, - } + }; } static getLastToken(input) { @@ -40,19 +40,19 @@ const doubleQuote = '"'; const singleQuote = '\''; - while(!completeToken && i >= 0) { + while (!completeToken && i >= 0) { const isDoubleQuote = input[i] === doubleQuote; const isSingleQuote = input[i] === singleQuote; // If the second quotation is found - if ((lastQuotation === doubleQuote && input[i] === doubleQuote) || - (lastQuotation === singleQuote && input[i] === singleQuote)) { + if ((lastQuotation === doubleQuote && isDoubleQuote) || + (lastQuotation === singleQuote && isSingleQuote)) { completeQuotation = true; } // Save the first quotation - if ((input[i] === doubleQuote && lastQuotation === '') || - (input[i] === singleQuote && lastQuotation === '')) { + if ((isDoubleQuote && lastQuotation === '') || + (isSingleQuote && lastQuotation === '')) { lastQuotation = input[i]; completeQuotation = false; } @@ -60,7 +60,7 @@ if (completeQuotation && input[i] === ' ') { completeToken = true; } else { - i--; + i -= 1; } } @@ -69,7 +69,7 @@ } static processTokens(input) { - let tokens = []; + const tokens = []; let searchToken = ''; let lastToken = ''; @@ -118,16 +118,20 @@ const singleQuoteExist = singleQuoteIndex !== -1; const doubleQuoteExistOnly = doubleQuoteExist && !singleQuoteExist; - const doubleQuoteIsBeforeSingleQuote = doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex; + const doubleQuoteIsBeforeSingleQuote = + doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex; const singleQuoteExistOnly = singleQuoteExist && !doubleQuoteExist; - const singleQuoteIsBeforeDoubleQuote = doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex; + const singleQuoteIsBeforeDoubleQuote = + doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex; - if ((doubleQuoteExistOnly || doubleQuoteIsBeforeSingleQuote) && doubleQuoteOccurrences % 2 !== 0) { + if ((doubleQuoteExistOnly || doubleQuoteIsBeforeSingleQuote) + && doubleQuoteOccurrences % 2 !== 0) { // " is found and is in front of ' (if any) lastQuotation = '"'; incompleteToken = true; - } else if ((singleQuoteExistOnly || singleQuoteIsBeforeDoubleQuote) && singleQuoteOccurrences % 2 !== 0) { + } else if ((singleQuoteExistOnly || singleQuoteIsBeforeDoubleQuote) + && singleQuoteOccurrences % 2 !== 0) { // ' is found and is in front of " (if any) lastQuotation = '\''; incompleteToken = true; @@ -137,7 +141,7 @@ tokens.push({ key: keyMatch.key, value: tokenValue, - wildcard: symbolMatch ? false : true, + wildcard: !symbolMatch, }); lastToken = tokens.last(); -- cgit v1.2.1 From 2461b9b635501fc9ae98d246e0dd6d23af555351 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 13 Dec 2016 21:59:28 -0600 Subject: Fix scss lint --- app/assets/stylesheets/framework/filters.scss | 8 ++++---- app/assets/stylesheets/framework/variables.scss | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b6c137d647a..dbe94813a93 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -39,7 +39,7 @@ padding-right: 25px; &:focus ~ .fa-filter { - color: #444; + color: $common-gray-dark; } } @@ -65,7 +65,7 @@ outline: none; &:hover .fa-times { - color: #444; + color: $common-gray-dark; } } } @@ -92,11 +92,11 @@ &:hover, &:focus { background-color: $dropdown-hover-color; - color: white; + color: $white-light; text-decoration: none; .dropdown-label-box { - border-color: white; + border-color: $white-light; border-style: solid; border-width: 2px; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index f3cb3d33d99..cf9424ea5dd 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -266,7 +266,7 @@ $dropdown-toggle-active-border-color: darken($border-color, 14%); /* * Filtered Search */ -$dropdown-hover-color: #3B86FF; +$dropdown-hover-color: #3b86ff; /* * Buttons -- cgit v1.2.1 From 1f7659912ca73f6774c4f1b66ad4e5e48cc51068 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 13 Dec 2016 23:30:28 -0600 Subject: Add jasmine tests to dropdown utils --- .../filtered_search/dropdown_utils.js.es6 | 68 ++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 app/assets/javascripts/filtered_search/dropdown_utils.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 new file mode 100644 index 00000000000..3837b020fd3 --- /dev/null +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -0,0 +1,68 @@ +(() => { + class DropdownUtils { + static getEscapedText(text) { + let escapedText = text; + const hasSpace = text.indexOf(' ') !== -1; + const hasDoubleQuote = text.indexOf('"') !== -1; + + // Encapsulate value with quotes if it has spaces + // Known side effect: values's with both single and double quotes + // won't escape properly + if (hasSpace) { + if (hasDoubleQuote) { + escapedText = `'${text}'`; + } else { + // Encapsulate singleQuotes or if it hasSpace + escapedText = `"${text}"`; + } + } + + return escapedText; + } + + static filterWithSymbol(filterSymbol, item, query) { + const updatedItem = item; + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const valueWithoutColon = value.slice(1).toLowerCase(); + const prefix = valueWithoutColon[0]; + const valueWithoutPrefix = valueWithoutColon.slice(1); + + const title = updatedItem.title.toLowerCase(); + + // Eg. filterSymbol = ~ for labels + const matchWithoutPrefix = + prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; + const match = title.indexOf(valueWithoutColon) !== -1; + + updatedItem.droplab_hidden = !match && !matchWithoutPrefix; + return updatedItem; + } + + static filterMethod(item, query) { + const updatedItem = item; + const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + + if (value === '') { + updatedItem.droplab_hidden = false; + } else { + updatedItem.droplab_hidden = updatedItem.hint.indexOf(value) === -1; + } + + return updatedItem; + } + + static setDataValueIfSelected(selected) { + const dataValue = selected.getAttribute('data-value'); + + if (dataValue) { + gl.FilteredSearchDropdownManager.addWordToInput(dataValue); + } + + // Return boolean based on whether it was set + return dataValue !== null; + } + } + + window.gl = window.gl || {}; + gl.DropdownUtils = DropdownUtils; +})(); -- cgit v1.2.1 From 9408693d30cc2af7059cff2c9ddc503a92db86a6 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 14 Dec 2016 13:39:03 -0600 Subject: Add webkit to flex --- app/assets/stylesheets/framework/filters.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index dbe94813a93..e47511940a7 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -109,11 +109,14 @@ } .dropdown-user { + display: -webkit-flex; display: flex; } .dropdown-user-details { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; } } -- cgit v1.2.1 From 657ac981acdcd2b070d838e530a2620c4db8bf04 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 15 Dec 2016 09:07:34 -0600 Subject: Fix spinach tests --- app/assets/javascripts/dispatcher.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 9a76131b87f..1e9111f4718 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -84,7 +84,7 @@ break; case 'projects:merge_requests:index': case 'projects:issues:index': - if(gl.FilteredSearchManager) { + if(document.querySelector('.filtered-search') && gl.FilteredSearchManager) { new gl.FilteredSearchManager(); } Issuable.init(); -- cgit v1.2.1 From 78dd92b730063371742b6487ae2526d6cc0943b1 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 15 Dec 2016 11:20:05 -0600 Subject: Improve styling of hover states --- app/assets/stylesheets/framework/filters.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index e47511940a7..8b7cb245420 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -89,16 +89,22 @@ overflow-y: hidden; border-radius: 0; + .dropdown-label-box { + border-color: $white-light; + border-style: solid; + border-width: 1px; + width: 17px; + height: 17px; + } + &:hover, &:focus { background-color: $dropdown-hover-color; color: $white-light; text-decoration: none; - .dropdown-label-box { + .avatar { border-color: $white-light; - border-style: solid; - border-width: 2px; } } } -- cgit v1.2.1 From 776f1aaae4a8125f6f46ed4a095566a00ea2aa45 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 15 Dec 2016 12:54:24 -0600 Subject: Add specs for filtered search token keys --- .../javascripts/filtered_search/filtered_search_token_keys.js.es6 | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 index a1830d13e5f..6bd9cb06362 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 @@ -44,6 +44,10 @@ return tokenKeys; } + static getConditions() { + return conditions; + } + static searchByKey(key) { return tokenKeys.find(tokenKey => tokenKey.key === key) || null; } -- cgit v1.2.1 From d19303cbe1e9813f5fe2409908c7f89616ec5eac Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 15 Dec 2016 23:08:49 -0600 Subject: Fix dropdown hint reset when changing tabs --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 34079b25846..b9f552b62b9 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -59,7 +59,15 @@ renderContent() { this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config); - this.droplab.setData(this.hookId, dropdownData); + + // Clone dropdownData to prevent it from being + // changed due to pass by reference + const data = []; + dropdownData.forEach((item) => { + data.push(Object.assign({}, item)); + }); + + this.droplab.setData(this.hookId, data); } init() { -- cgit v1.2.1 From 61680a2d9833cc3ef63b9e76930f47e44258f30d Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 15 Dec 2016 23:20:31 -0600 Subject: Add selected tagName check for itemClicked --- .../javascripts/filtered_search/dropdown_hint.js.es6 | 20 +++++++++++--------- .../filtered_search/filtered_search_dropdown.js.es6 | 15 +++++++++------ 2 files changed, 20 insertions(+), 15 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index b9f552b62b9..bdcece61984 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -35,18 +35,20 @@ itemClicked(e) { const { selected } = e.detail; - if (selected.hasAttribute('data-value')) { + if (selected.tagName === 'LI') { + if (selected.hasAttribute('data-value')) { this.dismissDropdown(); - } else { - const token = selected.querySelector('.js-filter-hint').innerText.trim(); - const tag = selected.querySelector('.js-filter-tag').innerText.trim(); + } else { + const token = selected.querySelector('.js-filter-hint').innerText.trim(); + const tag = selected.querySelector('.js-filter-tag').innerText.trim(); - if (tag.length) { - gl.FilteredSearchDropdownManager - .addWordToInput(this.getSelectedTextWithoutEscaping(token)); + if (tag.length) { + gl.FilteredSearchDropdownManager + .addWordToInput(this.getSelectedTextWithoutEscaping(token)); + } + this.dismissDropdown(); + this.dispatchInputEvent(); } - this.dismissDropdown(); - this.dispatchInputEvent(); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 6c66a3b0613..68014e27462 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -28,14 +28,17 @@ itemClicked(e, getValueFunction) { const { selected } = e.detail; - const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(selected); - if (!dataValueSet) { - const value = getValueFunction(selected); - gl.FilteredSearchDropdownManager.addWordToInput(value); - } + if (selected.tagName === 'LI') { + const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(selected); + + if (!dataValueSet) { + const value = getValueFunction(selected); + gl.FilteredSearchDropdownManager.addWordToInput(value); + } - this.dismissDropdown(); + this.dismissDropdown(); + } } setAsDropdown() { -- cgit v1.2.1 From 9c4868141273b536cc0bc7fb80a662789fe89286 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 16 Dec 2016 10:22:09 -0600 Subject: Make changes to make it more flexible for new filters --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 2 +- .../filtered_search/filtered_search_manager.js.es6 | 12 +++++++++--- .../filtered_search/filtered_search_token_keys.js.es6 | 10 +++++++++- app/assets/stylesheets/framework/filters.scss | 4 ++++ 4 files changed, 23 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index bdcece61984..7bf30143d78 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -37,7 +37,7 @@ if (selected.tagName === 'LI') { if (selected.hasAttribute('data-value')) { - this.dismissDropdown(); + this.dismissDropdown(); } else { const token = selected.querySelector('.js-filter-hint').innerText.trim(); const tag = selected.querySelector('.js-filter-tag').innerText.trim(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index e5b37f1e691..565f2347072 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -101,7 +101,8 @@ const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam); if (match) { - const sanitizedKey = keyParam.slice(0, keyParam.indexOf('_')); + const indexOf = keyParam.indexOf('_'); + const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam; const symbol = match.symbol; let quotationsToUse = ''; @@ -137,14 +138,19 @@ const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key); let tokenPath = ''; + let keyParam = token.key; + if (param) { + keyParam += `_${param}`; + } + if (token.wildcard && condition) { tokenPath = condition.url; } else if (token.wildcard) { // wildcard means that the token does not have a symbol - tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value)}`; + tokenPath = `${keyParam}=${encodeURIComponent(token.value)}`; } else { // Remove the token symbol - tokenPath = `${token.key}_${param}=${encodeURIComponent(token.value.slice(1))}`; + tokenPath = `${keyParam}=${encodeURIComponent(token.value.slice(1))}`; } paths.push(tokenPath); diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 index 6bd9cb06362..e46373024b6 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6 @@ -57,7 +57,15 @@ } static searchByKeyParam(keyParam) { - return tokenKeys.find(tokenKey => keyParam === `${tokenKey.key}_${tokenKey.param}`) || null; + return tokenKeys.find((tokenKey) => { + let tokenKeyParam = tokenKey.key; + + if (tokenKey.param) { + tokenKeyParam += `_${tokenKey.param}`; + } + + return keyParam === tokenKeyParam; + }) || null; } static searchByConditionUrl(url) { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 8b7cb245420..fee38b05023 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -89,6 +89,10 @@ overflow-y: hidden; border-radius: 0; + .fa { + width: 15px; + } + .dropdown-label-box { border-color: $white-light; border-style: solid; -- cgit v1.2.1 From e197f27f19ab7995d280f67754ea16c2629701b2 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 17 Dec 2016 13:22:00 -0600 Subject: Refactor and use regex for string processing --- .../filtered_search/dropdown_hint.js.es6 | 58 +++---- .../filtered_search/dropdown_user.js.es6 | 9 +- .../filtered_search/dropdown_utils.js.es6 | 30 ++-- .../filtered_search_dropdown.js.es6 | 2 +- .../filtered_search_dropdown_manager.js.es6 | 34 ++-- .../filtered_search/filtered_search_manager.js.es6 | 14 +- .../filtered_search_tokenizer.js.es6 | 178 +++------------------ 7 files changed, 90 insertions(+), 235 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index 7bf30143d78..c5ab9c52d76 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -3,31 +3,13 @@ /* global droplabFilter */ (() => { - const dropdownData = [{ - icon: 'fa-pencil', - hint: 'author:', - tag: '<author>', - }, { - icon: 'fa-user', - hint: 'assignee:', - tag: '<assignee>', - }, { - icon: 'fa-clock-o', - hint: 'milestone:', - tag: '<milestone>', - }, { - icon: 'fa-tag', - hint: 'label:', - tag: '<label>', - }]; - class DropdownHint extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input) { super(droplab, dropdown, input); this.config = { droplabFilter: { template: 'hint', - filterFunction: gl.DropdownUtils.filterMethod, + filterFunction: gl.DropdownUtils.filterHint, }, }; } @@ -43,8 +25,7 @@ const tag = selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { - gl.FilteredSearchDropdownManager - .addWordToInput(this.getSelectedTextWithoutEscaping(token)); + gl.FilteredSearchDropdownManager.addWordToInput(token); } this.dismissDropdown(); this.dispatchInputEvent(); @@ -52,24 +33,27 @@ } } - getSelectedTextWithoutEscaping(selectedToken) { - const lastWord = this.input.value.split(' ').last(); - const lastWordIndex = selectedToken.indexOf(lastWord); - - return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length); - } - renderContent() { - this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config); - - // Clone dropdownData to prevent it from being - // changed due to pass by reference - const data = []; - dropdownData.forEach((item) => { - data.push(Object.assign({}, item)); - }); + const dropdownData = [{ + icon: 'fa-pencil', + hint: 'author:', + tag: '<author>', + }, { + icon: 'fa-user', + hint: 'assignee:', + tag: '<assignee>', + }, { + icon: 'fa-clock-o', + hint: 'milestone:', + tag: '<milestone>', + }, { + icon: 'fa-tag', + hint: 'label:', + tag: '<label>', + }]; - this.droplab.setData(this.hookId, data); + this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config); + this.droplab.setData(this.hookId, dropdownData); } init() { diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 7a566907312..49581e3bfbd 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -37,13 +37,10 @@ } getSearchInput() { - const query = this.input.value; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1); - const hasPrefix = valueWithoutColon[0] === '@'; - const valueWithoutPrefix = valueWithoutColon.slice(1); + const query = this.input.value.trim(); + const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); - return hasPrefix ? valueWithoutPrefix : valueWithoutColon; + return lastToken.value || ''; } init() { diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 index 3837b020fd3..d246000ff52 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -22,30 +22,32 @@ static filterWithSymbol(filterSymbol, item, query) { const updatedItem = item; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); - const valueWithoutColon = value.slice(1).toLowerCase(); - const prefix = valueWithoutColon[0]; - const valueWithoutPrefix = valueWithoutColon.slice(1); + const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(query); - const title = updatedItem.title.toLowerCase(); + if (lastToken !== searchToken) { + const value = lastToken.value.toLowerCase(); + const title = updatedItem.title.toLowerCase(); - // Eg. filterSymbol = ~ for labels - const matchWithoutPrefix = - prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1; - const match = title.indexOf(valueWithoutColon) !== -1; + // Eg. filterSymbol = ~ for labels + const matchWithoutSymbol = lastToken.symbol === filterSymbol && title.indexOf(value) !== -1; + const match = title.indexOf(`${lastToken.symbol}${value}`) !== -1; + + updatedItem.droplab_hidden = !match && !matchWithoutSymbol; + } else { + updatedItem.droplab_hidden = false; + } - updatedItem.droplab_hidden = !match && !matchWithoutPrefix; return updatedItem; } - static filterMethod(item, query) { + static filterHint(item, query) { const updatedItem = item; - const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query); + const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); - if (value === '') { + if (!lastToken) { updatedItem.droplab_hidden = false; } else { - updatedItem.droplab_hidden = updatedItem.hint.indexOf(value) === -1; + updatedItem.droplab_hidden = updatedItem.hint.indexOf(lastToken.toLowerCase()) === -1; } return updatedItem; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 68014e27462..56147ad93c9 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -29,7 +29,7 @@ itemClicked(e, getValueFunction) { const { selected } = e.detail; - if (selected.tagName === 'LI') { + if (selected.tagName === 'LI' && selected.innerHTML) { const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(selected); if (!dataValueSet) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index ac71b5e4434..b67176267fb 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -57,17 +57,25 @@ static addWordToInput(word, addSpace = false) { const input = document.querySelector('.filtered-search'); + input.value = input.value.trim(); + const value = input.value; const hasExistingValue = value.length !== 0; - const { lastToken } = gl.FilteredSearchTokenizer.processTokens(value); + const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(value); + + // Find out what part of the token value the user has typed + // and remove it from input before appending the selected token value + if (lastToken !== searchToken) { + const lastTokenString = `${lastToken.symbol}${lastToken.value}`; - if ({}.hasOwnProperty.call(lastToken, 'key')) { // Spaces inside the token means that the token value will be escaped by quotes - const hasQuotes = lastToken.value.indexOf(' ') !== -1; + const hasQuotes = lastTokenString.indexOf(' ') !== -1; // Add 2 length to account for the length of the front and back quotes - const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length; + const lengthToRemove = hasQuotes ? lastTokenString.length + 2 : lastTokenString.length; input.value = value.slice(0, -1 * (lengthToRemove)); + } else if (searchToken !== '' && word.indexOf(searchToken) !== -1) { + input.value = value.slice(0, -1 * searchToken.length); } input.value += hasExistingValue && addSpace ? ` ${word}` : word; @@ -129,27 +137,25 @@ const match = gl.FilteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase()); const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key - && {}.hasOwnProperty.call(this.mapping, match.key); + && this.mapping[match.key]; const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint'; if (shouldOpenFilterDropdown || shouldOpenHintDropdown) { - // `hint` is not listed as a tokenKey (since it is not a real `filter`) - const key = match && {}.hasOwnProperty.call(match, 'key') ? match.key : 'hint'; + const key = match && match.key ? match.key : 'hint'; this.load(key, firstLoad); } - - gl.droplab = this.droplab; } setDropdown() { - const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value); + const { lastToken, searchToken } = this.tokenizer + .processTokens(this.filteredSearchInput.value); - if (typeof lastToken === 'string') { + if (lastToken === searchToken) { // Token is not fully initialized yet because it has no value // Eg. token = 'label:' - const { tokenKey } = this.tokenizer.parseToken(lastToken); - this.loadDropdown(tokenKey); - } else if ({}.hasOwnProperty.call(lastToken, 'key')) { + const split = lastToken.split(':'); + this.loadDropdown(split.length > 1 ? split[0] : ''); + } else if (lastToken) { // Token has been initialized into an object because it has a value this.loadDropdown(lastToken.key); } else { diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 565f2347072..d2ea4de18aa 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -136,21 +136,13 @@ const condition = gl.FilteredSearchTokenKeys .searchByConditionKeyValue(token.key, token.value.toLowerCase()); const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key); + const keyParam = param ? `${token.key}_${param}` : token.key; let tokenPath = ''; - let keyParam = token.key; - if (param) { - keyParam += `_${param}`; - } - - if (token.wildcard && condition) { + if (condition) { tokenPath = condition.url; - } else if (token.wildcard) { - // wildcard means that the token does not have a symbol - tokenPath = `${keyParam}=${encodeURIComponent(token.value)}`; } else { - // Remove the token symbol - tokenPath = `${keyParam}=${encodeURIComponent(token.value.slice(1))}`; + tokenPath = `${keyParam}=${encodeURIComponent(token.value)}`; } paths.push(tokenPath); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 index 57c0e8fc359..14ca78e139b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 @@ -1,165 +1,39 @@ (() => { class FilteredSearchTokenizer { - static parseToken(input) { - const colonIndex = input.indexOf(':'); - let tokenKey; - let tokenValue; - let tokenSymbol; - - if (colonIndex !== -1) { - tokenKey = input.slice(0, colonIndex).toLowerCase(); - tokenValue = input.slice(colonIndex + 1); - tokenSymbol = tokenValue[0]; - } - - return { - tokenKey, - tokenValue, - tokenSymbol, - }; - } - - static getLastTokenObject(input) { - const token = FilteredSearchTokenizer.getLastToken(input); - const colonIndex = token.indexOf(':'); - - const key = colonIndex !== -1 ? token.slice(0, colonIndex) : ''; - const value = colonIndex !== -1 ? token.slice(colonIndex) : token; - - return { - key, - value, - }; - } - - static getLastToken(input) { - let completeToken = false; - let completeQuotation = true; - let lastQuotation = ''; - let i = input.length; - - const doubleQuote = '"'; - const singleQuote = '\''; - while (!completeToken && i >= 0) { - const isDoubleQuote = input[i] === doubleQuote; - const isSingleQuote = input[i] === singleQuote; - - // If the second quotation is found - if ((lastQuotation === doubleQuote && isDoubleQuote) || - (lastQuotation === singleQuote && isSingleQuote)) { - completeQuotation = true; - } - - // Save the first quotation - if ((isDoubleQuote && lastQuotation === '') || - (isSingleQuote && lastQuotation === '')) { - lastQuotation = input[i]; - completeQuotation = false; - } - - if (completeQuotation && input[i] === ' ') { - completeToken = true; - } else { - i -= 1; - } - } - - // Adjust by 1 because of empty space - return input.slice(i + 1); - } - static processTokens(input) { + const tokenRegex = /(\w+):([~%@]?)(?:"(.*?)"|'(.*?)'|(\S+))/g; const tokens = []; - let searchToken = ''; - let lastToken = ''; - - const inputs = input.split(' '); - let searchTerms = ''; - let lastQuotation = ''; - let incompleteToken = false; - - // Iterate through each word (broken up by spaces) - inputs.forEach((i) => { - if (incompleteToken) { - // Continue previous token as it had an escaped - // quote in the beginning - const prevToken = tokens.last(); - prevToken.value += ` ${i}`; - - // Remove last quotation from the value - const lastQuotationRegex = new RegExp(lastQuotation, 'g'); - prevToken.value = prevToken.value.replace(lastQuotationRegex, ''); - tokens[tokens.length - 1] = prevToken; - - // Check to see if this quotation completes the token value - if (i.indexOf(lastQuotation) !== -1) { - lastToken = tokens.last(); - incompleteToken = !incompleteToken; - } - - return; - } - - const colonIndex = i.indexOf(':'); - - if (colonIndex !== -1) { - const { tokenKey, tokenValue, tokenSymbol } = gl.FilteredSearchTokenizer.parseToken(i); - - const keyMatch = gl.FilteredSearchTokenKeys.searchByKey(tokenKey); - const symbolMatch = gl.FilteredSearchTokenKeys.searchBySymbol(tokenSymbol); - - const doubleQuoteOccurrences = tokenValue.split('"').length - 1; - const singleQuoteOccurrences = tokenValue.split('\'').length - 1; - - const doubleQuoteIndex = tokenValue.indexOf('"'); - const singleQuoteIndex = tokenValue.indexOf('\''); - - const doubleQuoteExist = doubleQuoteIndex !== -1; - const singleQuoteExist = singleQuoteIndex !== -1; - - const doubleQuoteExistOnly = doubleQuoteExist && !singleQuoteExist; - const doubleQuoteIsBeforeSingleQuote = - doubleQuoteExist && singleQuoteExist && doubleQuoteIndex < singleQuoteIndex; - - const singleQuoteExistOnly = singleQuoteExist && !doubleQuoteExist; - const singleQuoteIsBeforeDoubleQuote = - doubleQuoteExist && singleQuoteExist && singleQuoteIndex < doubleQuoteIndex; - - if ((doubleQuoteExistOnly || doubleQuoteIsBeforeSingleQuote) - && doubleQuoteOccurrences % 2 !== 0) { - // " is found and is in front of ' (if any) - lastQuotation = '"'; - incompleteToken = true; - } else if ((singleQuoteExistOnly || singleQuoteIsBeforeDoubleQuote) - && singleQuoteOccurrences % 2 !== 0) { - // ' is found and is in front of " (if any) - lastQuotation = '\''; - incompleteToken = true; - } - - if (keyMatch && tokenValue.length > 0) { - tokens.push({ - key: keyMatch.key, - value: tokenValue, - wildcard: !symbolMatch, - }); - lastToken = tokens.last(); - - return; - } + let lastToken = null; + const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => { + let tokenValue = v1 || v2 || v3; + let tokenSymbol = symbol; + + if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') { + tokenSymbol = tokenValue; + tokenValue = ''; } - // Add space for next term - searchTerms += `${i} `; - lastToken = i; - }, this); - - searchToken = searchTerms.trim(); + tokens.push({ + key, + value: tokenValue || '', + symbol: tokenSymbol || '', + }); + return ''; + }).replace(/\s{2,}/g, ' ').trim() || ''; + + if (tokens.length > 0) { + const last = tokens[tokens.length - 1]; + const lastString = `${last.key}:${last.symbol}${last.value}`; + lastToken = input.lastIndexOf(lastString) === + input.length - lastString.length ? last : searchToken; + } else { + lastToken = searchToken; + } return { tokens, - searchToken, lastToken, + searchToken, }; } } -- cgit v1.2.1 From f72c1bf1c930b4dcb533202204d132f42246d99f Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sat, 17 Dec 2016 19:55:44 -0600 Subject: Fix specs --- .../javascripts/filtered_search/dropdown_utils.js.es6 | 13 +++++++++---- .../filtered_search_dropdown_manager.js.es6 | 15 +++++++++++---- 2 files changed, 20 insertions(+), 8 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 index d246000ff52..0c0d24d4de8 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -42,12 +42,17 @@ static filterHint(item, query) { const updatedItem = item; - const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); + let { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); + lastToken = lastToken || ''; - if (!lastToken) { + if (!lastToken || query.split('').last() === ' ') { updatedItem.droplab_hidden = false; - } else { - updatedItem.droplab_hidden = updatedItem.hint.indexOf(lastToken.toLowerCase()) === -1; + } else if (lastToken) { + const split = lastToken.split(':'); + const tokenName = split[0].split(' ').last(); + + const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1; + updatedItem.droplab_hidden = tokenName ? match : false; } return updatedItem; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index b67176267fb..e9f1fbf63ed 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -62,6 +62,7 @@ const value = input.value; const hasExistingValue = value.length !== 0; const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(value); + const lastSearchToken = searchToken.split(' ').last(); // Find out what part of the token value the user has typed // and remove it from input before appending the selected token value @@ -74,8 +75,8 @@ // Add 2 length to account for the length of the front and back quotes const lengthToRemove = hasQuotes ? lastTokenString.length + 2 : lastTokenString.length; input.value = value.slice(0, -1 * (lengthToRemove)); - } else if (searchToken !== '' && word.indexOf(searchToken) !== -1) { - input.value = value.slice(0, -1 * searchToken.length); + } else if (searchToken !== '' && word.indexOf(lastSearchToken) !== -1) { + input.value = value.slice(0, -1 * lastSearchToken.length); } input.value += hasExistingValue && addSpace ? ` ${word}` : word; @@ -150,11 +151,17 @@ const { lastToken, searchToken } = this.tokenizer .processTokens(this.filteredSearchInput.value); - if (lastToken === searchToken) { + if (this.filteredSearchInput.value.split('').last() === ' ') { + this.updateCurrentDropdownOffset(); + } + + if (lastToken === searchToken && lastToken !== null) { // Token is not fully initialized yet because it has no value // Eg. token = 'label:' + const split = lastToken.split(':'); - this.loadDropdown(split.length > 1 ? split[0] : ''); + const dropdownName = split[0].split(' ').last(); + this.loadDropdown(split.length > 1 ? dropdownName : ''); } else if (lastToken) { // Token has been initialized into an object because it has a value this.loadDropdown(lastToken.key); -- cgit v1.2.1 From 12753def903f265467d2cab8e19deced31daf066 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Sun, 18 Dec 2016 17:04:29 -0600 Subject: Fix specs --- app/assets/javascripts/dispatcher.js.es6 | 2 +- app/assets/javascripts/filtered_search/dropdown_utils.js.es6 | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 1e9111f4718..ca2da18dc26 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -84,7 +84,7 @@ break; case 'projects:merge_requests:index': case 'projects:issues:index': - if(document.querySelector('.filtered-search') && gl.FilteredSearchManager) { + if (document.querySelector('.filtered-search') && gl.FilteredSearchManager) { new gl.FilteredSearchManager(); } Issuable.init(); diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 index 0c0d24d4de8..3453311bee5 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -43,7 +43,7 @@ static filterHint(item, query) { const updatedItem = item; let { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); - lastToken = lastToken || ''; + lastToken = lastToken.key || lastToken || ''; if (!lastToken || query.split('').last() === ' ') { updatedItem.droplab_hidden = false; -- cgit v1.2.1 From c349bb15b628039340054eb132201fdf4a740411 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 5 Jan 2017 13:56:23 -0600 Subject: Refactor addWordToInput --- .../filtered_search/dropdown_hint.js.es6 | 6 ++-- .../filtered_search/dropdown_non_user.js.es6 | 4 +-- .../filtered_search/dropdown_user.js.es6 | 4 +-- .../filtered_search/dropdown_utils.js.es6 | 4 +-- .../filtered_search_dropdown.js.es6 | 7 ++-- .../filtered_search_dropdown_manager.js.es6 | 41 +++++++++++----------- 6 files changed, 33 insertions(+), 33 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index c5ab9c52d76..f1e317d91cc 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -4,8 +4,8 @@ (() => { class DropdownHint extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input) { - super(droplab, dropdown, input); + constructor(droplab, dropdown, input, filter) { + super(droplab, dropdown, input, filter); this.config = { droplabFilter: { template: 'hint', @@ -25,7 +25,7 @@ const tag = selected.querySelector('.js-filter-tag').innerText.trim(); if (tag.length) { - gl.FilteredSearchDropdownManager.addWordToInput(token); + gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', '')); } this.dismissDropdown(); this.dispatchInputEvent(); diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 index 54090375c5c..f06c3fc9c6f 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js.es6 @@ -5,8 +5,8 @@ (() => { class DropdownNonUser extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input, endpoint, symbol) { - super(droplab, dropdown, input); + constructor(droplab, dropdown, input, filter, endpoint, symbol) { + super(droplab, dropdown, input, filter); this.symbol = symbol; this.config = { droplabAjax: { diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 index 49581e3bfbd..e80d266ae89 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_user.js.es6 @@ -4,8 +4,8 @@ (() => { class DropdownUser extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input) { - super(droplab, dropdown, input); + constructor(droplab, dropdown, input, filter) { + super(droplab, dropdown, input, filter); this.config = { droplabAjaxFilter: { endpoint: '/autocomplete/users.json', diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 index 3453311bee5..88b172d6fc4 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -58,11 +58,11 @@ return updatedItem; } - static setDataValueIfSelected(selected) { + static setDataValueIfSelected(filter, selected) { const dataValue = selected.getAttribute('data-value'); if (dataValue) { - gl.FilteredSearchDropdownManager.addWordToInput(dataValue); + gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue); } // Return boolean based on whether it was set diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index 56147ad93c9..886d8113f4a 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -2,10 +2,11 @@ const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger'; class FilteredSearchDropdown { - constructor(droplab, dropdown, input) { + constructor(droplab, dropdown, input, filter) { this.droplab = droplab; this.hookId = input.getAttribute('data-id'); this.input = input; + this.filter = filter; this.dropdown = dropdown; this.loadingTemplate = `
          @@ -30,11 +31,11 @@ const { selected } = e.detail; if (selected.tagName === 'LI' && selected.innerHTML) { - const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(selected); + const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected); if (!dataValueSet) { const value = getValueFunction(selected); - gl.FilteredSearchDropdownManager.addWordToInput(value); + gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value); } this.dismissDropdown(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index e9f1fbf63ed..8b385d6b642 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -55,31 +55,30 @@ }; } - static addWordToInput(word, addSpace = false) { + static addWordToInput(tokenName, tokenValue = '') { const input = document.querySelector('.filtered-search'); - input.value = input.value.trim(); + const word = `${tokenName}:${tokenValue}`; - const value = input.value; - const hasExistingValue = value.length !== 0; - const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(value); + const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value); const lastSearchToken = searchToken.split(' ').last(); - - // Find out what part of the token value the user has typed - // and remove it from input before appending the selected token value - if (lastToken !== searchToken) { - const lastTokenString = `${lastToken.symbol}${lastToken.value}`; - - // Spaces inside the token means that the token value will be escaped by quotes - const hasQuotes = lastTokenString.indexOf(' ') !== -1; - - // Add 2 length to account for the length of the front and back quotes - const lengthToRemove = hasQuotes ? lastTokenString.length + 2 : lastTokenString.length; - input.value = value.slice(0, -1 * (lengthToRemove)); - } else if (searchToken !== '' && word.indexOf(lastSearchToken) !== -1) { - input.value = value.slice(0, -1 * lastSearchToken.length); + const lastInputCharacter = input.value[input.value.length - 1]; + const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1]; + + // Remove the typed tokenName + if (word.indexOf(lastSearchToken) === 0 && searchToken !== '') { + // Remove spaces after the colon + if (lastInputCharacter === ' ' && lastInputTrimmedCharacter === ':') { + input.value = input.value.trim(); + } + + input.value = input.value.slice(0, -1 * lastSearchToken.length); + } else if (lastInputCharacter !== ' ') { + // Remove the existing tokenValue + const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`; + input.value = input.value.slice(0, -1 * lastTokenString.length); } - input.value += hasExistingValue && addSpace ? ` ${word}` : word; + input.value += word; } updateCurrentDropdownOffset() { @@ -106,7 +105,7 @@ if (!mappingKey.reference) { const dl = this.droplab; - const defaultArguments = [null, dl, element, this.filteredSearchInput]; + const defaultArguments = [null, dl, element, this.filteredSearchInput, key]; const glArguments = defaultArguments.concat(mappingKey.extraArguments || []); // Passing glArguments to `new gl[glClass]()` -- cgit v1.2.1 From d5dee97becf193627f407815aa4013ea3c0a47a2 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 6 Jan 2017 12:47:00 -0600 Subject: Enable filtering with multiple words --- app/assets/javascripts/filtered_search/dropdown_utils.js.es6 | 6 +++++- .../filtered_search/filtered_search_dropdown_manager.js.es6 | 2 +- .../javascripts/filtered_search/filtered_search_tokenizer.js.es6 | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 index 88b172d6fc4..c27ef3042d1 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js.es6 @@ -25,8 +25,12 @@ const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(query); if (lastToken !== searchToken) { - const value = lastToken.value.toLowerCase(); const title = updatedItem.title.toLowerCase(); + let value = lastToken.value.toLowerCase(); + + if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) { + value = value.slice(1); + } // Eg. filterSymbol = ~ for labels const matchWithoutSymbol = lastToken.symbol === filterSymbol && title.indexOf(value) !== -1; diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 index 8b385d6b642..1cd0483877a 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6 @@ -72,7 +72,7 @@ } input.value = input.value.slice(0, -1 * lastSearchToken.length); - } else if (lastInputCharacter !== ' ') { + } else if (lastInputCharacter !== ' ' || (lastToken && lastToken.value[lastToken.value.length - 1] === ' ')) { // Remove the existing tokenValue const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`; input.value = input.value.slice(0, -1 * lastTokenString.length); diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 index 14ca78e139b..60473dddead 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 @@ -1,7 +1,7 @@ (() => { class FilteredSearchTokenizer { static processTokens(input) { - const tokenRegex = /(\w+):([~%@]?)(?:"(.*?)"|'(.*?)'|(\S+))/g; + const tokenRegex = /(\w+):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\S+))/g; const tokens = []; let lastToken = null; const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => { -- cgit v1.2.1 From 0f973c28b7f4852119181b549255308c76924c4e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 6 Jan 2017 13:56:34 -0600 Subject: Fix specs --- .../javascripts/filtered_search/filtered_search_manager.js.es6 | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index d2ea4de18aa..bd3c4240f13 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -142,7 +142,14 @@ if (condition) { tokenPath = condition.url; } else { - tokenPath = `${keyParam}=${encodeURIComponent(token.value)}`; + let tokenValue = token.value; + + if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') || + (tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) { + tokenValue = tokenValue.slice(1, tokenValue.length - 1); + } + + tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`; } paths.push(tokenPath); -- cgit v1.2.1 From 3d0b0a62609d5f961d2777f497558d90c1dc039b Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Fri, 6 Jan 2017 14:05:53 -0600 Subject: Add symbols --- app/assets/javascripts/filtered_search/dropdown_hint.js.es6 | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 index f1e317d91cc..63c20f57520 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 @@ -37,19 +37,19 @@ const dropdownData = [{ icon: 'fa-pencil', hint: 'author:', - tag: '<author>', + tag: '<@author>', }, { icon: 'fa-user', hint: 'assignee:', - tag: '<assignee>', + tag: '<@assignee>', }, { icon: 'fa-clock-o', hint: 'milestone:', - tag: '<milestone>', + tag: '<%milestone>', }, { icon: 'fa-tag', hint: 'label:', - tag: '<label>', + tag: '<~label>', }]; this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config); -- cgit v1.2.1 From 1bfdad5c4707c9dac243cebaf4666fee77f17891 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 9 Jan 2017 11:33:17 -0600 Subject: Code review changes --- app/assets/javascripts/dispatcher.js.es6 | 2 +- app/assets/javascripts/droplab/droplab_ajax.js | 2 +- app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index ca2da18dc26..99a34651639 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -84,7 +84,7 @@ break; case 'projects:merge_requests:index': case 'projects:issues:index': - if (document.querySelector('.filtered-search') && gl.FilteredSearchManager) { + if (gl.FilteredSearchManager) { new gl.FilteredSearchManager(); } Issuable.init(); diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index ebb518eeef4..926e53e696f 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -39,7 +39,7 @@ require('../window')(function(w){ var loadingTemplate = document.createElement('div'); loadingTemplate.innerHTML = config.loadingTemplate; - loadingTemplate.setAttribute('data-loading-template', true); + loadingTemplate.setAttribute('data-loading-template', ''); this.listTemplate = dynamicList.outerHTML; dynamicList.outerHTML = loadingTemplate.outerHTML; diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 index 60473dddead..cf53845a48b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6 @@ -1,6 +1,8 @@ (() => { class FilteredSearchTokenizer { static processTokens(input) { + // Regex extracts `(token):(symbol)(value)` + // Values that start with a double quote must end in a double quote (same for single) const tokenRegex = /(\w+):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\S+))/g; const tokens = []; let lastToken = null; -- cgit v1.2.1 From 4ec8eb9abefb1a2abed9b5cbee4292325b3c22f6 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 9 Jan 2017 12:15:10 -0600 Subject: Fix javascript error for when there are no issues --- .../filtered_search/filtered_search_manager.js.es6 | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index bd3c4240f13..ffd0d7e9cba 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -3,17 +3,20 @@ (() => { class FilteredSearchManager { constructor() { - this.tokenizer = gl.FilteredSearchTokenizer; this.filteredSearchInput = document.querySelector('.filtered-search'); this.clearSearchButton = document.querySelector('.clear-search'); - this.dropdownManager = new gl.FilteredSearchDropdownManager(); - this.bindEvents(); - this.loadSearchParamsFromURL(); - this.dropdownManager.setDropdown(); + if (this.filteredSearchInput) { + this.tokenizer = gl.FilteredSearchTokenizer; + this.dropdownManager = new gl.FilteredSearchDropdownManager(); - this.cleanupWrapper = this.cleanup.bind(this); - document.addEventListener('page:fetch', this.cleanupWrapper); + this.bindEvents(); + this.loadSearchParamsFromURL(); + this.dropdownManager.setDropdown(); + + this.cleanupWrapper = this.cleanup.bind(this); + document.addEventListener('page:fetch', this.cleanupWrapper); + } } cleanup() { -- cgit v1.2.1 From c0287e69c6717fe9de5ff0b804f952410e453ef8 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 9 Jan 2017 15:43:17 -0600 Subject: Fix indentation --- app/assets/javascripts/droplab/droplab_ajax.js | 29 +++++++++++++------------- 1 file changed, 15 insertions(+), 14 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index 926e53e696f..c8850f121d7 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -45,22 +45,23 @@ require('../window')(function(w){ dynamicList.outerHTML = loadingTemplate.outerHTML; } - this._loadUrlData(config.endpoint).then(function(d) { - if (config.loadingTemplate) { - var dataLoadingTemplate = hook.list.list.querySelector('[data-loading-template]'); + this._loadUrlData(config.endpoint) + .then(function(d) { + if (config.loadingTemplate) { + var dataLoadingTemplate = hook.list.list.querySelector('[data-loading-template]'); - if (dataLoadingTemplate) { - dataLoadingTemplate.outerHTML = self.listTemplate; + if (dataLoadingTemplate) { + dataLoadingTemplate.outerHTML = self.listTemplate; + } } - } - hook.list[config.method].call(hook.list, d); - }).catch(function(e) { - if(e.message) { - console.error(e.message, e.stack); // eslint-disable-line no-console - } else { - console.error(e); // eslint-disable-line no-console - } - }); + hook.list[config.method].call(hook.list, d); + }).catch(function(e) { + if(e.message) { + console.error(e.message, e.stack); // eslint-disable-line no-console + } else { + console.error(e); // eslint-disable-line no-console + } + }); }, destroy: function() { -- cgit v1.2.1 From e0e855b5f49bc8efc3ca69aa83ea28d6becb53cc Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 9 Jan 2017 16:23:51 -0600 Subject: Fix code review suggestions --- app/assets/javascripts/droplab/droplab_ajax.js | 10 +++++----- app/assets/javascripts/lib/utils/common_utils.js.es6 | 2 ++ 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js index c8850f121d7..f20610b3811 100644 --- a/app/assets/javascripts/droplab/droplab_ajax.js +++ b/app/assets/javascripts/droplab/droplab_ajax.js @@ -3,6 +3,10 @@ /* global droplab */ require('../window')(function(w){ + function droplabAjaxException(message) { + this.message = message; + } + w.droplabAjax = { _loadUrlData: function _loadUrlData(url) { return new Promise(function(resolve, reject) { @@ -56,11 +60,7 @@ require('../window')(function(w){ } hook.list[config.method].call(hook.list, d); }).catch(function(e) { - if(e.message) { - console.error(e.message, e.stack); // eslint-disable-line no-console - } else { - console.error(e); // eslint-disable-line no-console - } + throw new droplabAjaxException(e.message || e); }); }, diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index 8aa78f407e5..3e2c75d3cc6 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -169,6 +169,8 @@ w.gl.utils.getParameterByName = (name) => { const url = window.location.href; name = name.replace(/[[\]]/g, '\\$&'); + // Finds the value associated to the name + // Example, state=open where state is the name and open is the value const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); const results = regex.exec(url); if (!results) return null; -- cgit v1.2.1 From 757bc8ecf43159243d9a0f45f27844f6572e60ac Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 9 Jan 2017 17:41:53 -0600 Subject: Remove duplicate method --- app/assets/javascripts/lib/utils/common_utils.js.es6 | 18 ------------------ 1 file changed, 18 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index 3e2c75d3cc6..0c6a3cc3170 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -130,22 +130,6 @@ return window.location.search.slice(1).split('&'); }; - gl.utils.getParameterByName = function(name) { - var url = window.location.href; - var param = name.replace(/[[\]]/g, '\\$&'); - var regex = new RegExp('[?&]' + param + '(=([^&#]*)|&|#|$)'); - var results = regex.exec(url); - - if (!results) { - return null; - } - - if (!results[2]) { - return ''; - } - return decodeURIComponent(results[2].replace(/\+/g, ' ')); - }; - gl.utils.isMetaKey = function(e) { return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey; }; @@ -169,8 +153,6 @@ w.gl.utils.getParameterByName = (name) => { const url = window.location.href; name = name.replace(/[[\]]/g, '\\$&'); - // Finds the value associated to the name - // Example, state=open where state is the name and open is the value const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`); const results = regex.exec(url); if (!results) return null; -- cgit v1.2.1 From f1e21ae7643ca36a8835873594a0f72915660ec3 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Mon, 9 Jan 2017 12:52:28 -0800 Subject: 26504 Fix styling of MR jump to discussion button --- app/assets/stylesheets/framework/sidebar.scss | 4 +++- app/assets/stylesheets/pages/notes.scss | 9 +++------ 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index a8641e83154..838f5442fff 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -183,7 +183,9 @@ &.right-sidebar-expanded { .line-resolve-all-container { - display: none; + @media (min-width: $sidebar-breakpoint) { + display: none; + } } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index ad4c31ca29e..e2a0253da38 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -526,8 +526,9 @@ ul.notes { } .line-resolve-all { + vertical-align: middle; display: inline-block; - padding: 5px 10px; + padding: 6px 10px; background-color: $gray-light; border: 1px solid $border-color; border-radius: $border-radius-default; @@ -535,18 +536,14 @@ ul.notes { &.has-next-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; + border-right: 0; } .line-resolve-btn { - vertical-align: middle; margin-right: 5px; } } -.line-resolve-text { - vertical-align: middle; -} - .line-resolve-btn { display: inline-block; position: relative; -- cgit v1.2.1 From f68a715366e3ecbdd479e363576842e1a9dfc559 Mon Sep 17 00:00:00 2001 From: Connor Smallman Date: Tue, 3 Jan 2017 19:13:47 +0000 Subject: Removed `hidden-xs` class from alerts Centered alert text and prevented alert actions links from floating right for viewports below medium width (992px) Centered alert text stopped alert actions from floating right for viewports below medium width (992px) Update styles to use correct screen width variable for max-width media query Added unreleased changelog Added class to alert links wrapper Updated styles for new class, float alert links on larger screens --- app/assets/stylesheets/framework/layout.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 5365b62e456..29d55c44699 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -41,6 +41,21 @@ body { } } + .alert-link-group { + float: right; + } + + /* Center alert text and alert action links on smaller screens */ + @media (max-width: $screen-sm-max) { + .alert { + text-align: center; + } + + .alert-link-group { + float: none; + } + } + /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */ .alert-warning { transition: background-color 0.15s, border-color 0.15s; -- cgit v1.2.1 From aa934c7469372cac7b8cd10b49761d90d8e367fa Mon Sep 17 00:00:00 2001 From: Jarka Kadlecova Date: Wed, 21 Dec 2016 11:32:37 +0100 Subject: refresh merge widget after using /merge command --- app/assets/javascripts/notes.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/assets') diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 603db88567d..0016070b648 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -3,6 +3,7 @@ /* global GLForm */ /* global Autosave */ /* global ResolveService */ +/* global mrRefreshWidgetUrl */ /*= require autosave */ /*= require autosize */ @@ -244,6 +245,16 @@ }; + Notes.prototype.handleCreateChanges = function(note) { + if (typeof note === 'undefined') { + return; + } + + if (note.commands_changes && note.commands_changes.includes('merge')) { + $.get(mrRefreshWidgetUrl); + } + }; + /* Render note in main comments area. @@ -429,6 +440,7 @@ */ Notes.prototype.addNote = function(xhr, note, status) { + this.handleCreateChanges(note); return this.renderNote(note); }; -- cgit v1.2.1 From ce9d3ee599f816ba20d57eae16b4139cabecdb1a Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 11 Jan 2017 20:47:42 -0500 Subject: Backend review --- app/assets/javascripts/droplab/droplab_ajax_filter.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js index ae316f881c8..af163f76851 100644 --- a/app/assets/javascripts/droplab/droplab_ajax_filter.js +++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js @@ -22,7 +22,8 @@ require('../window')(function(w){ debounceTrigger: function debounceTrigger(e) { var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93]; var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1; - var focusEvent = false; + var focusEvent = e.type === 'focus'; + if (invalidKeyPressed || this.loading) { return; } @@ -31,10 +32,6 @@ require('../window')(function(w){ clearTimeout(this.timeout); } - if (e.type === 'focus') { - focusEvent = true; - } - this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200); }, @@ -66,7 +63,7 @@ require('../window')(function(w){ searchValue = ''; } - if (searchValue === config.searchKey) { + if (config.searchKey === searchValue) { return this.list.show(); } -- cgit v1.2.1 From 6053049f4a8822bf39bbe8e1fa34c5e3522b63e9 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Thu, 12 Jan 2017 13:22:04 +0100 Subject: Add new CI/CD status failed with warnings icon group --- app/assets/stylesheets/framework/icons.scss | 1 + app/assets/stylesheets/pages/status.scss | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index dccf5177e35..868f28cd356 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -15,6 +15,7 @@ } .ci-status-icon-pending, +.ci-status-icon-failed_with_warnings, .ci-status-icon-success_with_warnings { color: $gl-warning; diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index f19275770be..6f31d4ed789 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -19,7 +19,8 @@ overflow: visible; } - &.ci-failed { + &.ci-failed, + &.ci-failed_with_warnings { color: $gl-danger; border-color: $gl-danger; -- cgit v1.2.1 From 2b63470f4ef9e743ae94df39162a38089dca77aa Mon Sep 17 00:00:00 2001 From: Kushal Pandya Date: Mon, 2 Jan 2017 13:01:27 +0530 Subject: Scroll to bottom on build completion if autoscroll was active --- app/assets/javascripts/build.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js index bc13c46443a..207eb639780 100644 --- a/app/assets/javascripts/build.js +++ b/app/assets/javascripts/build.js @@ -83,6 +83,10 @@ return window.location.href.split("#")[0]; }; + Build.prototype.locationHash = function() { + return window.location.href.split("#")[1]; + }; + Build.prototype.getInitialBuildTrace = function() { var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'] @@ -91,6 +95,9 @@ dataType: 'json', success: function(buildData) { $('.js-build-output').html(buildData.trace_html); + if (this.locationHash() === 'down-build-trace') { + $("html,body").scrollTop(this.$buildTrace.height()); + } if (removeRefreshStatuses.indexOf(buildData.status) >= 0) { this.$buildRefreshAnimation.remove(); return this.initScrollMonitor(); @@ -105,6 +112,8 @@ dataType: "json", success: (function(_this) { return function(log) { + var pageUrl; + if (log.state) { _this.state = log.state; } @@ -116,7 +125,12 @@ } return _this.checkAutoscroll(); } else if (log.status !== _this.buildStatus) { - return Turbolinks.visit(_this.pageUrl); + pageUrl = _this.pageUrl; + if (_this.$autoScrollStatus.data('state') === 'enabled') { + pageUrl += '#down-build-trace'; + } + + return Turbolinks.visit(pageUrl); } }; })(this) -- cgit v1.2.1 From c69931f0f0199818689aba26519b14b6e462df83 Mon Sep 17 00:00:00 2001 From: Kushal Pandya Date: Sat, 7 Jan 2017 14:13:19 +0530 Subject: Use better approach to access hash --- app/assets/javascripts/build.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js index 207eb639780..e6831b77d1c 100644 --- a/app/assets/javascripts/build.js +++ b/app/assets/javascripts/build.js @@ -5,6 +5,7 @@ (function() { var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; var AUTO_SCROLL_OFFSET = 75; + var DOWN_BUILD_TRACE = 'down-build-trace'; this.Build = (function() { Build.interval = null; @@ -83,10 +84,6 @@ return window.location.href.split("#")[0]; }; - Build.prototype.locationHash = function() { - return window.location.href.split("#")[1]; - }; - Build.prototype.getInitialBuildTrace = function() { var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'] @@ -95,7 +92,7 @@ dataType: 'json', success: function(buildData) { $('.js-build-output').html(buildData.trace_html); - if (this.locationHash() === 'down-build-trace') { + if (window.location.hash.substring(1) === DOWN_BUILD_TRACE) { $("html,body").scrollTop(this.$buildTrace.height()); } if (removeRefreshStatuses.indexOf(buildData.status) >= 0) { -- cgit v1.2.1 From c254d05953fbf31425f934a349a65e8866ccf07a Mon Sep 17 00:00:00 2001 From: Kushal Pandya Date: Thu, 12 Jan 2017 10:49:49 -0500 Subject: Use string constant variable for `#down-build-trace` --- app/assets/javascripts/build.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js index e6831b77d1c..fca47002870 100644 --- a/app/assets/javascripts/build.js +++ b/app/assets/javascripts/build.js @@ -5,7 +5,7 @@ (function() { var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; var AUTO_SCROLL_OFFSET = 75; - var DOWN_BUILD_TRACE = 'down-build-trace'; + var DOWN_BUILD_TRACE = '#down-build-trace'; this.Build = (function() { Build.interval = null; @@ -27,7 +27,7 @@ this.$autoScrollStatus = $('#autoscroll-status'); this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text'); this.$upBuildTrace = $('#up-build-trace'); - this.$downBuildTrace = $('#down-build-trace'); + this.$downBuildTrace = $(DOWN_BUILD_TRACE); this.$scrollTopBtn = $('#scroll-top'); this.$scrollBottomBtn = $('#scroll-bottom'); this.$buildRefreshAnimation = $('.js-build-refresh'); @@ -92,7 +92,7 @@ dataType: 'json', success: function(buildData) { $('.js-build-output').html(buildData.trace_html); - if (window.location.hash.substring(1) === DOWN_BUILD_TRACE) { + if (window.location.hash === DOWN_BUILD_TRACE) { $("html,body").scrollTop(this.$buildTrace.height()); } if (removeRefreshStatuses.indexOf(buildData.status) >= 0) { @@ -124,7 +124,7 @@ } else if (log.status !== _this.buildStatus) { pageUrl = _this.pageUrl; if (_this.$autoScrollStatus.data('state') === 'enabled') { - pageUrl += '#down-build-trace'; + pageUrl += DOWN_BUILD_TRACE; } return Turbolinks.visit(pageUrl); -- cgit v1.2.1 From cb316804aa59986c2a31bd8bcbc056e7fc0e66c0 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 12 Jan 2017 11:27:22 -0500 Subject: Add hover state to MR comment reply button --- app/assets/stylesheets/framework/buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index e04a87a7327..bb6129158d9 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -324,7 +324,7 @@ &:focus { cursor: text; box-shadow: none; - border-color: $border-color; + border-color: lighten($dropdown-input-focus-border, 20%); color: $gray-darkest; background-color: $gray-light; } -- cgit v1.2.1 From acc3ec6fb26ce2c1dabdd07f7e4848d0eee6e143 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 12 Jan 2017 11:46:19 -0500 Subject: fixed issue - description in function (check diff) --- .../javascripts/vue_pipelines_index/stage.js.es6 | 26 +++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index 74a79dcedae..96a2b099843 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -12,7 +12,27 @@ }, props: ['stage', 'svgs', 'match'], methods: { - fetchBuilds() { + fetchBuilds(e) { + /** + This is a very interesting UI problem + Essentially we have to clear builds on blur no matter what + This was preventing turbolinks to make the request to the link clicked + Vue will always look at the VDOM element which is the button + + It has a special attribute 'aria-describedby' which will not exist: + - once the build link is clicked + - when someone clicks outside of the dropdown + + In order for this to work: + - here we setTimeout to give enough time to initialize the request + - but short enough that a subsequent click will reset that state + */ + if (!e.currentTarget.attributes['aria-describedby']) { + setTimeout(() => { + this.request = false; + }, 100); + return null; + } if (this.request) return this.clearBuilds(); return this.$http.get(this.stage.dropdown_path) @@ -56,8 +76,8 @@ template: `