From 55f772bb98a67ad346442a2cacb5646f6719b987 Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Fri, 22 Sep 2017 08:39:47 +0000 Subject: [PATCH] Resolve "Better SVG Usage in the Frontend" --- .eslintignore | 1 + app/assets/images/icons.json | 1 + app/assets/images/icons.svg | 1 + app/assets/images/illustrations/issues.svg | 1 + app/assets/images/illustrations/labels.svg | 1 + .../images/illustrations/merge_requests.svg} | 2 +- .../monitoring/getting_started.svg} | 0 .../illustrations/monitoring/loading.svg} | 0 .../monitoring/unable_to_connect.svg} | 0 .../images/illustrations/pipelines_empty.svg | 1 + .../images/illustrations/pipelines_failed.svg | 1 + .../images/illustrations/priority_labels.svg} | 2 +- .../images/illustrations/todos_all_done.svg | 1 + .../images/illustrations/todos_empty.svg | 1 + app/assets/images/sprite.symbol.html | 3297 +++++++++++++++++ .../boards/components/modal/empty_state.js | 6 +- .../boards/components/modal/index.js | 10 +- .../boards/components/modal/list.js | 6 +- .../commit/pipelines/pipelines_bundle.js | 2 + .../commit/pipelines/pipelines_table.vue | 10 + app/assets/javascripts/help/help.js | 6 + .../javascripts/lib/utils/common_utils.js | 6 + app/assets/javascripts/main.js | 3 + app/assets/javascripts/merge_request_tabs.js | 2 + .../monitoring/components/dashboard.vue | 6 + .../monitoring/components/empty_state.vue | 26 +- .../notes/components/issue_note_icons.js | 37 - .../notes/components/issue_system_note.vue | 9 +- .../pipelines/components/empty_state.vue | 11 +- .../pipelines/components/error_state.vue | 13 +- .../pipelines/components/pipelines.vue | 8 +- app/assets/stylesheets/framework/blocks.scss | 10 - app/assets/stylesheets/framework/images.scss | 24 + app/helpers/appearances_helper.rb | 6 - app/helpers/icons_helper.rb | 12 + app/helpers/system_note_helper.rb | 42 +- app/views/dashboard/todos/index.html.haml | 11 +- app/views/help/show.html.haml | 2 + .../layouts/nav/sidebar/_admin.html.haml | 24 +- .../layouts/nav/sidebar/_group.html.haml | 10 +- .../layouts/nav/sidebar/_profile.html.haml | 24 +- .../layouts/nav/sidebar/_project.html.haml | 20 +- .../projects/commit/_pipelines_list.haml | 2 + .../projects/environments/metrics.html.haml | 3 + app/views/projects/pipelines/index.html.haml | 5 +- app/views/shared/boards/_show.html.haml | 4 +- .../shared/empty_states/_issues.html.haml | 2 +- .../shared/empty_states/_labels.html.haml | 2 +- .../empty_states/_merge_requests.html.haml | 2 +- .../empty_states/_priority_labels.html.haml | 3 +- .../shared/empty_states/icons/_issues.svg | 1 - .../shared/empty_states/icons/_labels.svg | 1 - .../empty_states/icons/_pipelines_empty.svg | 1 - .../empty_states/icons/_pipelines_failed.svg | 1 - .../empty_states/icons/_todos_all_done.svg | 1 - .../empty_states/icons/_todos_empty.svg | 110 - app/views/shared/icons/_key_2.svg | 1 - config/dependency_decisions.yml | 12 + config/svg.config.js | 48 + config/webpack.config.js | 1 + doc/development/fe_guide/icons.md | 40 + doc/development/fe_guide/index.md | 5 + lib/gitlab/gon_helper.rb | 1 + package.json | 5 +- spec/helpers/icons_helper_spec.rb | 19 + .../commit/pipelines/pipelines_spec.js | 8 + spec/javascripts/fixtures/pipelines.html.haml | 2 + .../lib/utils/common_utils_spec.js | 10 + .../monitoring/dashboard_state_spec.js | 24 + .../javascripts/pipelines/empty_state_spec.js | 1 + .../javascripts/pipelines/error_state_spec.js | 6 +- symbol/icons.svg | 1 + symbol/sprite.symbol.html | 177 + yarn.lock | 10 +- 74 files changed, 3885 insertions(+), 280 deletions(-) create mode 100644 app/assets/images/icons.json create mode 100644 app/assets/images/icons.svg create mode 100644 app/assets/images/illustrations/issues.svg create mode 100644 app/assets/images/illustrations/labels.svg rename app/{views/shared/empty_states/icons/_merge_requests.svg => assets/images/illustrations/merge_requests.svg} (99%) rename app/{views/shared/empty_states/monitoring/_getting_started.svg => assets/images/illustrations/monitoring/getting_started.svg} (100%) rename app/{views/shared/empty_states/monitoring/_loading.svg => assets/images/illustrations/monitoring/loading.svg} (100%) rename app/{views/shared/empty_states/monitoring/_unable_to_connect.svg => assets/images/illustrations/monitoring/unable_to_connect.svg} (100%) create mode 100644 app/assets/images/illustrations/pipelines_empty.svg create mode 100644 app/assets/images/illustrations/pipelines_failed.svg rename app/{views/shared/empty_states/icons/_priority_labels.svg => assets/images/illustrations/priority_labels.svg} (75%) create mode 100644 app/assets/images/illustrations/todos_all_done.svg create mode 100644 app/assets/images/illustrations/todos_empty.svg create mode 100644 app/assets/images/sprite.symbol.html create mode 100644 app/assets/javascripts/help/help.js delete mode 100644 app/assets/javascripts/notes/components/issue_note_icons.js delete mode 100644 app/views/shared/empty_states/icons/_issues.svg delete mode 100644 app/views/shared/empty_states/icons/_labels.svg delete mode 100644 app/views/shared/empty_states/icons/_pipelines_empty.svg delete mode 100644 app/views/shared/empty_states/icons/_pipelines_failed.svg delete mode 100644 app/views/shared/empty_states/icons/_todos_all_done.svg delete mode 100644 app/views/shared/empty_states/icons/_todos_empty.svg delete mode 100644 app/views/shared/icons/_key_2.svg create mode 100644 config/svg.config.js create mode 100644 doc/development/fe_guide/icons.md create mode 100644 symbol/icons.svg create mode 100644 symbol/sprite.symbol.html diff --git a/.eslintignore b/.eslintignore index 1605e483e9e..d6ce39636bd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,4 +7,5 @@ /vendor/ karma.config.js webpack.config.js +svg.config.js /app/assets/javascripts/locale/**/*.js diff --git a/app/assets/images/icons.json b/app/assets/images/icons.json new file mode 100644 index 00000000000..e5da75faf38 --- /dev/null +++ b/app/assets/images/icons.json @@ -0,0 +1 @@ +{"iconCount":134,"icons":["abuse","account","admin","angle-double-left","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close-m","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]} \ No newline at end of file diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg new file mode 100644 index 00000000000..5c3a9962bd3 --- /dev/null +++ b/app/assets/images/icons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/issues.svg b/app/assets/images/illustrations/issues.svg new file mode 100644 index 00000000000..c8e0504732d --- /dev/null +++ b/app/assets/images/illustrations/issues.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/labels.svg b/app/assets/images/illustrations/labels.svg new file mode 100644 index 00000000000..3a2d521323b --- /dev/null +++ b/app/assets/images/illustrations/labels.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/views/shared/empty_states/icons/_merge_requests.svg b/app/assets/images/illustrations/merge_requests.svg similarity index 99% rename from app/views/shared/empty_states/icons/_merge_requests.svg rename to app/assets/images/illustrations/merge_requests.svg index e77f6319a95..b9b8f0058e6 100644 --- a/app/views/shared/empty_states/icons/_merge_requests.svg +++ b/app/assets/images/illustrations/merge_requests.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/app/views/shared/empty_states/monitoring/_getting_started.svg b/app/assets/images/illustrations/monitoring/getting_started.svg similarity index 100% rename from app/views/shared/empty_states/monitoring/_getting_started.svg rename to app/assets/images/illustrations/monitoring/getting_started.svg diff --git a/app/views/shared/empty_states/monitoring/_loading.svg b/app/assets/images/illustrations/monitoring/loading.svg similarity index 100% rename from app/views/shared/empty_states/monitoring/_loading.svg rename to app/assets/images/illustrations/monitoring/loading.svg diff --git a/app/views/shared/empty_states/monitoring/_unable_to_connect.svg b/app/assets/images/illustrations/monitoring/unable_to_connect.svg similarity index 100% rename from app/views/shared/empty_states/monitoring/_unable_to_connect.svg rename to app/assets/images/illustrations/monitoring/unable_to_connect.svg diff --git a/app/assets/images/illustrations/pipelines_empty.svg b/app/assets/images/illustrations/pipelines_empty.svg new file mode 100644 index 00000000000..f3107c8f062 --- /dev/null +++ b/app/assets/images/illustrations/pipelines_empty.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/pipelines_failed.svg b/app/assets/images/illustrations/pipelines_failed.svg new file mode 100644 index 00000000000..8daf7da86ed --- /dev/null +++ b/app/assets/images/illustrations/pipelines_failed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/views/shared/empty_states/icons/_priority_labels.svg b/app/assets/images/illustrations/priority_labels.svg similarity index 75% rename from app/views/shared/empty_states/icons/_priority_labels.svg rename to app/assets/images/illustrations/priority_labels.svg index 7282c2b215e..b79c551d3d7 100644 --- a/app/views/shared/empty_states/icons/_priority_labels.svg +++ b/app/assets/images/illustrations/priority_labels.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/app/assets/images/illustrations/todos_all_done.svg b/app/assets/images/illustrations/todos_all_done.svg new file mode 100644 index 00000000000..6387497a6fb --- /dev/null +++ b/app/assets/images/illustrations/todos_all_done.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/illustrations/todos_empty.svg b/app/assets/images/illustrations/todos_empty.svg new file mode 100644 index 00000000000..4de6cb403b9 --- /dev/null +++ b/app/assets/images/illustrations/todos_empty.svg @@ -0,0 +1 @@ +@ \ No newline at end of file diff --git a/app/assets/images/sprite.symbol.html b/app/assets/images/sprite.symbol.html new file mode 100644 index 00000000000..d928d3f73b8 --- /dev/null +++ b/app/assets/images/sprite.symbol.html @@ -0,0 +1,3297 @@ + + + + + + + + SVG <symbol> sprite preview | svg-sprite + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

SVG <symbol> sprite preview

+

This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:

+ +
+
+ + + +

A) Inline SVG with embedded sprite

+ + + + +
+
+ + + +

B) Inline SVG with external sprite (IE 9-11 with polyfill only)

+ + + + +
+ + + diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js index 13569df0c20..e571b11a83d 100644 --- a/app/assets/javascripts/boards/components/modal/empty_state.js +++ b/app/assets/javascripts/boards/components/modal/empty_state.js @@ -8,11 +8,11 @@ gl.issueBoards.ModalEmptyState = Vue.extend({ return ModalStore.store; }, props: { - image: { + newIssuePath: { type: String, required: true, }, - newIssuePath: { + emptyStateSvg: { type: String, required: true, }, @@ -42,7 +42,7 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
- +
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js index 96af69e7a36..d2044f20ebe 100644 --- a/app/assets/javascripts/boards/components/modal/index.js +++ b/app/assets/javascripts/boards/components/modal/index.js @@ -12,11 +12,11 @@ const ModalStore = gl.issueBoards.ModalStore; gl.issueBoards.IssuesModal = Vue.extend({ props: { - blankStateImage: { + newIssuePath: { type: String, required: true, }, - newIssuePath: { + emptyStateSvg: { type: String, required: true, }, @@ -150,14 +150,14 @@ gl.issueBoards.IssuesModal = Vue.extend({ :label-path="labelPath"> + :new-issue-path="newIssuePath" + :empty-state-svg="emptyStateSvg">
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js index b4a45feee4d..7c62134b3a3 100644 --- a/app/assets/javascripts/boards/components/modal/list.js +++ b/app/assets/javascripts/boards/components/modal/list.js @@ -15,7 +15,7 @@ gl.issueBoards.ModalList = Vue.extend({ type: String, required: true, }, - image: { + emptyStateSvg: { type: String, required: true, }, @@ -119,8 +119,8 @@ gl.issueBoards.ModalList = Vue.extend({ class="empty-state add-issues-empty-state-filter text-center" v-if="issuesCount > 0 && issues.length === 0">
+ class="svg-content"> +

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js index 16c5d0fa344..1f9153d95bd 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js @@ -35,6 +35,8 @@ document.addEventListener('DOMContentLoaded', () => { propsData: { endpoint: pipelineTableViewEl.dataset.endpoint, helpPagePath: pipelineTableViewEl.dataset.helpPagePath, + emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath, + errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath, autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath, }, }).$mount(); diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index c931e1e0ea5..0661087a1ba 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -17,6 +17,14 @@ type: String, required: true, }, + emptyStateSvgPath: { + type: String, + required: true, + }, + errorStateSvgPath: { + type: String, + required: true, + }, }, mixins: [ pipelinesMixin, @@ -87,10 +95,12 @@
0) { + const $iconsHeader = $('#user-content-gitlab-icons'); + const $iconsList = $('
ICONS
'); + $($iconsList).insertAfter($iconsHeader.parent()); +} diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index ead1b8f99d3..ea2d61af9be 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -408,6 +408,10 @@ export const setCiStatusFavicon = (pageUrl) => { }); }; +export const spriteIcon = icon => ``; + +export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`; + window.gl = window.gl || {}; window.gl.utils = { ...(window.gl.utils || {}), @@ -434,4 +438,6 @@ window.gl.utils = { getSelectedFragment, insertText, nodeMatchesSelector, + spriteIcon, + imagePath, }; diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 58d877f73fe..ec001b9b31c 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -8,6 +8,7 @@ import _ from 'underscore'; import Cookies from 'js-cookie'; import Dropzone from 'dropzone'; import Sortable from 'vendor/Sortable'; +import svg4everybody from 'svg4everybody'; // libraries with import side-effects import 'mousetrap'; @@ -151,6 +152,8 @@ if (process.env.NODE_ENV !== 'production') require('./test_utils/'); Dropzone.autoDiscover = false; +svg4everybody(); + document.addEventListener('beforeunload', function () { // Unbind scroll events $(document).off('scroll'); diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index f71a59aaa84..8ae127776e8 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -248,6 +248,8 @@ import { propsData: { endpoint: pipelineTableViewEl.dataset.endpoint, helpPagePath: pipelineTableViewEl.dataset.helpPagePath, + emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath, + errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath, autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath, }, }).$mount(); diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 192473b7dd1..f80a26b3fd4 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -23,6 +23,9 @@ settingsPath: metricsData.settingsPath, metricsEndpoint: metricsData.additionalMetrics, deploymentEndpoint: metricsData.deploymentEndpoint, + emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath, + emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath, + emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath, showEmptyState: true, updateAspectRatio: false, updatedAspectRatios: 0, @@ -109,5 +112,8 @@ :selected-state="state" :documentation-path="documentationPath" :settings-path="settingsPath" + :empty-getting-started-svg-path="emptyGettingStartedSvgPath" + :empty-loading-svg-path="emptyLoadingSvgPath" + :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath" /> diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index a8708be76de..a7b483f6786 100644 --- a/app/assets/javascripts/monitoring/components/empty_state.vue +++ b/app/assets/javascripts/monitoring/components/empty_state.vue @@ -1,8 +1,4 @@ @@ -39,7 +38,7 @@
+ v-html="iconHtml">
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue index 3db64339a62..0eaac8dd64f 100644 --- a/app/assets/javascripts/pipelines/components/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/empty_state.vue @@ -1,21 +1,24 @@