Merge branch '36231-better-svg-usage-in-the-frontend' into 'master'
Resolve "Better SVG Usage in the Frontend" Closes #36231 See merge request gitlab-org/gitlab-ce!13435
This commit is contained in:
Phil Hughes
commit
26607a1690
74 changed files with 3885 additions and 280 deletions
|
|
@ -7,4 +7,5 @@
|
|||
/vendor/
|
||||
karma.config.js
|
||||
webpack.config.js
|
||||
svg.config.js
|
||||
/app/assets/javascripts/locale/**/*.js
|
||||
|
|
|
|||
1
app/assets/images/icons.json
Normal file
1
app/assets/images/icons.json
Normal file
|
|
@ -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"]}
|
||||
1
app/assets/images/icons.svg
Normal file
1
app/assets/images/icons.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 57 KiB |
1
app/assets/images/illustrations/issues.svg
Normal file
1
app/assets/images/illustrations/issues.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
1
app/assets/images/illustrations/labels.svg
Normal file
1
app/assets/images/illustrations/labels.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
1
app/assets/images/illustrations/pipelines_empty.svg
Normal file
1
app/assets/images/illustrations/pipelines_empty.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g fill="#e5e5e5" transform="translate(0 102)"><rect width="74" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="M152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 152 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 166 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 180 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 194 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 208 23"/></g><g fill="#31af64"><path fill-rule="nonzero" d="M19 144c-10.493 0-19-8.507-19-19s8.507-19 19-19 19 8.507 19 19-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path d="M17.07 127.02l-2.829-2.829a1.995 1.995 0 0 0-2.828 0 1.995 1.995 0 0 0 0 2.828l4.243 4.243a1.995 1.995 0 0 0 2.822.006l7.79-7.79a1.997 1.997 0 0 0-.006-2.823 1.992 1.992 0 0 0-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a"><path fill-rule="nonzero" d="M126 149.5c-12.979 0-23.5-10.521-23.5-23.5s10.521-23.5 23.5-23.5 23.5 10.521 23.5 23.5-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5s-8.283-18.5-18.5-18.5-18.5 8.283-18.5 18.5 8.283 18.5 18.5 18.5"/><path d="M130.24 126l2.833-2.833a3 3 0 0 0-4.243-4.243l-2.833 2.833-2.833-2.833a3 3 0 0 0-4.243 4.243l2.833 2.833-2.833 2.833a3 3 0 0 0 4.243 4.243l2.833-2.833 2.833 2.833a3 3 0 0 0 4.243-4.243L130.24 126"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="M236 139c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="M64.82 76H98c4.419 0 8-3.579 8-7.99V7.99C106 3.577 102.417 0 98 0H8.009c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855a4.357 4.357 0 0 0 6.354 0L64.824 76"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="M151.869 77.403c-13.26 9.264-31.649 7.977-43.484-3.858-13.279-13.279-13.279-34.806 0-48.084 13.278-13.278 34.805-13.278 48.083 0 11.836 11.836 13.118 30.23 3.858 43.485.133.111.262.229.387.354l15.556 15.555a6.004 6.004 0 0 1 0 8.486 5.997 5.997 0 0 1-8.486 0l-15.555-15.556a6.051 6.051 0 0 1-.355-.387m-1.06-9.512c10.154-10.154 10.154-26.617 0-36.77-10.153-10.154-26.616-10.154-36.77 0-10.153 10.153-10.153 26.616 0 36.77 10.154 10.153 26.617 10.153 36.77 0"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
1
app/assets/images/illustrations/pipelines_failed.svg
Normal file
1
app/assets/images/illustrations/pipelines_failed.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="116" height="68" viewBox="181 0 116 68"><g fill="none" fill-rule="evenodd" transform="translate(182)"><rect width="78" height="34" x="37" y="34" fill="#FAFAFA" rx="3"/><rect width="78" height="34" x="31" y="28" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="3"/><path fill="#FFF" stroke="#FC6D26" stroke-width="3" d="M34 35.8c-.6 0-1.4 0-1.8.4L29 38.8c-1 .7-1.7.4-2-.7l-.6-4c0-.5-.5-1.2-1-1.5L22 30.2c-1-.6-1-1.5 0-2l3.7-2c.5-.2 1-.8 1.2-1.3l1-4.2c.3-1 1-1.3 2-.5l3 3c.3.3 1 .6 1.6.6l4.2-.3c1 0 1.5.7 1 1.7L38 29c-.3.6-.3 1.4 0 2l1.3 3.8c.4 1 0 1.8-1.2 1.6l-4-.6z" stroke-linecap="round"/><path fill="#FDE5D8" d="M51.6 14.3c-.2-.2-.8-.4-1-.3l-2.8.5c-.7 0-1-.4-.8-1l1-2.8V9.5L46.6 7c-.3-.7 0-1.2.8-1h2.7c.3 0 .8-.2 1-.5l2-2c.6-.5 1-.4 1.3.3l.7 2.8c0 .3.4.8.7 1l2.3 1.2c.7.3.7 1 0 1.3l-2.2 1.7-.6 1-.4 3c-.2.6-.7.8-1.3.4l-2-1.7zM5.4 43.2c-.2-.2-.5-.2-.7-.2l-1.8.3c-.6 0-1-.2-.7-.7l.7-1.8V40l-1-1.7c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L6.5 36c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2zM10.4 9.2C10.2 9 10 9 9.7 9L8 9.3c-.6 0-1-.2-.7-.7L8 6.8V6L7 4.3c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L11.5 2c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2z"/><rect width="52" height="4" x="43" y="38" fill="#EEE" rx="2"/><rect width="36" height="4" x="43" y="48" fill="#EEE" rx="2"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="116" height="68" viewBox="181 0 116 68"><g fill="none" fill-rule="evenodd" transform="translate(182)"><rect width="78" height="34" x="37" y="34" fill="#FAFAFA" rx="3"/><rect width="78" height="34" x="31" y="28" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="3"/><path fill="#FFF" stroke="#FC6D26" stroke-width="3" d="M34 35.8c-.6 0-1.4 0-1.8.4L29 38.8c-1 .7-1.7.4-2-.7l-.6-4c0-.5-.5-1.2-1-1.5L22 30.2c-1-.6-1-1.5 0-2l3.7-2c.5-.2 1-.8 1.2-1.3l1-4.2c.3-1 1-1.3 2-.5l3 3c.3.3 1 .6 1.6.6l4.2-.3c1 0 1.5.7 1 1.7L38 29c-.3.6-.3 1.4 0 2l1.3 3.8c.4 1 0 1.8-1.2 1.6l-4-.6z" stroke-linecap="round"/><path fill="#FDE5D8" d="M51.6 14.3c-.2-.2-.8-.4-1-.3l-2.8.5c-.7 0-1-.4-.8-1l1-2.8V9.5L46.6 7c-.3-.7 0-1.2.8-1h2.7c.3 0 .8-.2 1-.5l2-2c.6-.5 1-.4 1.3.3l.7 2.8c0 .3.4.8.7 1l2.3 1.2c.7.3.7 1 0 1.3l-2.2 1.7-.6 1-.4 3c-.2.6-.7.8-1.3.4l-2-1.7zM5.4 43.2c-.2-.2-.5-.2-.7-.2l-1.8.3c-.6 0-1-.2-.7-.7l.7-1.8V40l-1-1.7c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L6.5 36c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2zm5-34C10.2 9 10 9 9.7 9L8 9.3c-.6 0-1-.2-.7-.7L8 6.8V6L7 4.3c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L11.5 2c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2z"/><rect width="52" height="4" x="43" y="38" fill="#EEE" rx="2"/><rect width="36" height="4" x="43" y="48" fill="#EEE" rx="2"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
1
app/assets/images/illustrations/todos_all_done.svg
Normal file
1
app/assets/images/illustrations/todos_all_done.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" fill="#FFF" stroke="#EEE" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
app/assets/images/illustrations/todos_empty.svg
Normal file
1
app/assets/images/illustrations/todos_empty.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
3297
app/assets/images/sprite.symbol.html
Normal file
3297
app/assets/images/sprite.symbol.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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({
|
|||
<section class="empty-state">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-sm-push-6">
|
||||
<aside class="svg-content" v-html="image"></aside>
|
||||
<aside class="svg-content"><img :src="emptyStateSvg"/></aside>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
|
||||
<div class="text-content">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
</modal-header>
|
||||
<modal-list
|
||||
:image="blankStateImage"
|
||||
:issue-link-base="issueLinkBase"
|
||||
:root-path="rootPath"
|
||||
:empty-state-svg="emptyStateSvg"
|
||||
v-if="!loading && showList && !filterLoading"></modal-list>
|
||||
<empty-state
|
||||
v-if="showEmptyState"
|
||||
:image="blankStateImage"
|
||||
:new-issue-path="newIssuePath"></empty-state>
|
||||
:new-issue-path="newIssuePath"
|
||||
:empty-state-svg="emptyStateSvg"></empty-state>
|
||||
<section
|
||||
class="add-issues-list text-center"
|
||||
v-if="loading || filterLoading">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div
|
||||
class="svg-content"
|
||||
v-html="image">
|
||||
class="svg-content">
|
||||
<img :src="emptyStateSvg"/>
|
||||
</div>
|
||||
<div class="text-content">
|
||||
<h4>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -17,6 +17,14 @@
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emptyStateSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
errorStateSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
mixins: [
|
||||
pipelinesMixin,
|
||||
|
|
@ -87,10 +95,12 @@
|
|||
<empty-state
|
||||
v-if="shouldRenderEmptyState"
|
||||
:help-page-path="helpPagePath"
|
||||
:empty-state-svg-path="emptyStateSvgPath"
|
||||
/>
|
||||
|
||||
<error-state
|
||||
v-if="shouldRenderErrorState"
|
||||
:error-state-svg-path="errorStateSvgPath"
|
||||
/>
|
||||
|
||||
<div
|
||||
|
|
|
|||
6
app/assets/javascripts/help/help.js
Normal file
6
app/assets/javascripts/help/help.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// We will render the icons list here
|
||||
if ($('#user-content-gitlab-icons').length > 0) {
|
||||
const $iconsHeader = $('#user-content-gitlab-icons');
|
||||
const $iconsList = $('<div id="iconsList">ICONS</div>');
|
||||
$($iconsList).insertAfter($iconsHeader.parent());
|
||||
}
|
||||
|
|
@ -408,6 +408,10 @@ export const setCiStatusFavicon = (pageUrl) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const spriteIcon = icon => `<svg><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
|
||||
|
||||
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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
<script>
|
||||
import gettingStartedSvg from 'empty_states/monitoring/_getting_started.svg';
|
||||
import loadingSvg from 'empty_states/monitoring/_loading.svg';
|
||||
import unableToConnectSvg from 'empty_states/monitoring/_unable_to_connect.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
documentationPath: {
|
||||
|
|
@ -18,24 +14,36 @@
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emptyGettingStartedSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emptyLoadingSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emptyUnableToConnectSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
states: {
|
||||
gettingStarted: {
|
||||
svg: gettingStartedSvg,
|
||||
svgUrl: this.emptyGettingStartedSvgPath,
|
||||
title: 'Get started with performance monitoring',
|
||||
description: 'Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments.',
|
||||
buttonText: 'Configure Prometheus',
|
||||
},
|
||||
loading: {
|
||||
svg: loadingSvg,
|
||||
svgUrl: this.emptyLoadingSvgPath,
|
||||
title: 'Waiting for performance data',
|
||||
description: 'Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.',
|
||||
buttonText: 'View documentation',
|
||||
},
|
||||
unableToConnect: {
|
||||
svg: unableToConnectSvg,
|
||||
svgUrl: this.emptyUnableToConnectSvgPath,
|
||||
title: 'Unable to connect to Prometheus server',
|
||||
description: 'Ensure connectivity is available from the GitLab server to the ',
|
||||
buttonText: 'View documentation',
|
||||
|
|
@ -66,7 +74,9 @@
|
|||
<template>
|
||||
<div class="prometheus-state">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div>
|
||||
<div class="col-md-4 col-md-offset-4 state-svg svg-content">
|
||||
<img :src="currentState.svgUrl"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
import iconArrowCircle from 'icons/_icon_arrow_circle_o_right.svg';
|
||||
import iconCheck from 'icons/_icon_check_square_o.svg';
|
||||
import iconClock from 'icons/_icon_clock_o.svg';
|
||||
import iconCodeFork from 'icons/_icon_code_fork.svg';
|
||||
import iconComment from 'icons/_icon_comment_o.svg';
|
||||
import iconCommit from 'icons/_icon_commit.svg';
|
||||
import iconEdit from 'icons/_icon_edit.svg';
|
||||
import iconEye from 'icons/_icon_eye.svg';
|
||||
import iconEyeSlash from 'icons/_icon_eye_slash.svg';
|
||||
import iconMerge from 'icons/_icon_merge.svg';
|
||||
import iconMerged from 'icons/_icon_merged.svg';
|
||||
import iconRandom from 'icons/_icon_random.svg';
|
||||
import iconClosed from 'icons/_icon_status_closed.svg';
|
||||
import iconStatusOpen from 'icons/_icon_status_open.svg';
|
||||
import iconStopwatch from 'icons/_icon_stopwatch.svg';
|
||||
import iconTags from 'icons/_icon_tags.svg';
|
||||
import iconUser from 'icons/_icon_user.svg';
|
||||
|
||||
export default {
|
||||
icon_arrow_circle_o_right: iconArrowCircle,
|
||||
icon_check_square_o: iconCheck,
|
||||
icon_clock_o: iconClock,
|
||||
icon_code_fork: iconCodeFork,
|
||||
icon_comment_o: iconComment,
|
||||
icon_commit: iconCommit,
|
||||
icon_edit: iconEdit,
|
||||
icon_eye: iconEye,
|
||||
icon_eye_slash: iconEyeSlash,
|
||||
icon_merge: iconMerge,
|
||||
icon_merged: iconMerged,
|
||||
icon_random: iconRandom,
|
||||
icon_status_closed: iconClosed,
|
||||
icon_status_open: iconStatusOpen,
|
||||
icon_stopwatch: iconStopwatch,
|
||||
icon_tags: iconTags,
|
||||
icon_user: iconUser,
|
||||
};
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import iconsMap from './issue_note_icons';
|
||||
import issueNoteHeader from './issue_note_header.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,9 +23,9 @@
|
|||
isTargetNote() {
|
||||
return this.targetNoteHash === this.noteAnchorId;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.svg = iconsMap[this.note.system_note_icon_name];
|
||||
iconHtml() {
|
||||
return gl.utils.spriteIcon(this.note.system_note_icon_name);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -39,7 +38,7 @@
|
|||
<div class="timeline-entry-inner">
|
||||
<div
|
||||
class="timeline-icon"
|
||||
v-html="svg">
|
||||
v-html="iconHtml">
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="note-header">
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
<script>
|
||||
import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
helpPagePath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emptyStateSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => ({ pipelinesEmptyStateSVG }),
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row empty-state js-empty-state">
|
||||
<div class="col-xs-12">
|
||||
<div class="svg-content" v-html="pipelinesEmptyStateSVG" />
|
||||
<div class="svg-content">
|
||||
<img :src="emptyStateSvgPath"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
<script>
|
||||
import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
|
||||
|
||||
export default {
|
||||
data: () => ({ pipelinesErrorStateSVG }),
|
||||
props: {
|
||||
errorStateSvgPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row empty-state js-pipelines-error-state">
|
||||
<div class="col-xs-12">
|
||||
<div class="svg-content" v-html="pipelinesErrorStateSVG" />
|
||||
<div class="svg-content">
|
||||
<img :src="errorStateSvgPath"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-center">
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@
|
|||
return {
|
||||
endpoint: pipelinesData.endpoint,
|
||||
helpPagePath: pipelinesData.helpPagePath,
|
||||
emptyStateSvgPath: pipelinesData.emptyStateSvgPath,
|
||||
errorStateSvgPath: pipelinesData.errorStateSvgPath,
|
||||
autoDevopsPath: pipelinesData.helpAutoDevopsPath,
|
||||
newPipelinePath: pipelinesData.newPipelinePath,
|
||||
canCreatePipeline: pipelinesData.canCreatePipeline,
|
||||
|
|
@ -182,9 +184,13 @@
|
|||
<empty-state
|
||||
v-if="shouldRenderEmptyState"
|
||||
:help-page-path="helpPagePath"
|
||||
:empty-state-svg-path="emptyStateSvgPath"
|
||||
/>
|
||||
|
||||
<error-state v-if="shouldRenderErrorState" />
|
||||
<error-state
|
||||
v-if="shouldRenderErrorState"
|
||||
:error-state-svg-path="errorStateSvgPath"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="blank-state blank-state-no-icon"
|
||||
|
|
|
|||
|
|
@ -319,16 +319,6 @@
|
|||
padding: $gl-padding;
|
||||
}
|
||||
|
||||
.svg-content {
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
max-width: 425px;
|
||||
width: 100%;
|
||||
padding: $gl-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,3 +9,27 @@
|
|||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.svg-content {
|
||||
text-align: center;
|
||||
padding: $gl-padding;
|
||||
|
||||
svg,
|
||||
img {
|
||||
max-width: 425px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin svg-size($size) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
svg {
|
||||
&.s16 { @include svg-size(16px); }
|
||||
&.s24 { @include svg-size(24px); }
|
||||
&.s32 { @include svg-size(32px); }
|
||||
&.s48 { @include svg-size(48px); }
|
||||
&.s72 { @include svg-size(72px); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,10 +30,4 @@ module AppearancesHelper
|
|||
render 'shared/logo.svg'
|
||||
end
|
||||
end
|
||||
|
||||
def custom_icon(icon_name, size: 16)
|
||||
# We can't simply do the below, because there are some .erb SVGs.
|
||||
# File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
|
||||
render "shared/icons/#{icon_name}.svg", size: size
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -17,6 +17,18 @@ module IconsHelper
|
|||
options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
|
||||
end
|
||||
|
||||
def custom_icon(icon_name, size: 16)
|
||||
# We can't simply do the below, because there are some .erb SVGs.
|
||||
# File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
|
||||
render "shared/icons/#{icon_name}.svg", size: size
|
||||
end
|
||||
|
||||
def sprite_icon(icon_name, size: nil, css_class: nil)
|
||||
css_classes = size ? "s#{size}" : nil
|
||||
css_classes << " #{css_class}" unless css_class.blank?
|
||||
content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes)
|
||||
end
|
||||
|
||||
def audit_icon(names, options = {})
|
||||
case names
|
||||
when "standard"
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
module SystemNoteHelper
|
||||
ICON_NAMES_BY_ACTION = {
|
||||
'commit' => 'icon_commit',
|
||||
'description' => 'icon_edit',
|
||||
'merge' => 'icon_merge',
|
||||
'merged' => 'icon_merged',
|
||||
'opened' => 'icon_status_open',
|
||||
'closed' => 'icon_status_closed',
|
||||
'time_tracking' => 'icon_stopwatch',
|
||||
'assignee' => 'icon_user',
|
||||
'title' => 'icon_edit',
|
||||
'task' => 'icon_check_square_o',
|
||||
'label' => 'icon_tags',
|
||||
'cross_reference' => 'icon_random',
|
||||
'branch' => 'icon_code_fork',
|
||||
'confidential' => 'icon_eye_slash',
|
||||
'visible' => 'icon_eye',
|
||||
'milestone' => 'icon_clock_o',
|
||||
'discussion' => 'icon_comment_o',
|
||||
'moved' => 'icon_arrow_circle_o_right',
|
||||
'outdated' => 'icon_edit',
|
||||
'duplicate' => 'icon_clone'
|
||||
'commit' => 'commit',
|
||||
'description' => 'pencil',
|
||||
'merge' => 'git-merge',
|
||||
'merged' => 'git-merge',
|
||||
'opened' => 'issue-open',
|
||||
'closed' => 'issue-close',
|
||||
'time_tracking' => 'timer',
|
||||
'assignee' => 'user',
|
||||
'title' => 'pencil',
|
||||
'task' => 'task-done',
|
||||
'label' => 'label',
|
||||
'cross_reference' => 'comment-dots',
|
||||
'branch' => 'fork',
|
||||
'confidential' => 'eye-slash',
|
||||
'visible' => 'eye',
|
||||
'milestone' => 'clock',
|
||||
'discussion' => 'comment',
|
||||
'moved' => 'arrow-right',
|
||||
'outdated' => 'pencil',
|
||||
'duplicate' => 'issue-duplicate'
|
||||
}.freeze
|
||||
|
||||
def system_note_icon_name(note)
|
||||
|
|
@ -28,7 +28,7 @@ module SystemNoteHelper
|
|||
|
||||
def icon_for_system_note(note)
|
||||
icon_name = system_note_icon_name(note)
|
||||
custom_icon(icon_name) if icon_name
|
||||
sprite_icon(icon_name) if icon_name
|
||||
end
|
||||
|
||||
extend self
|
||||
|
|
|
|||
|
|
@ -77,13 +77,14 @@
|
|||
%ul.content-list.todos-list
|
||||
= render @todos
|
||||
= paginate @todos, theme: "gitlab"
|
||||
.js-nothing-here-container.todos-all-done.hidden
|
||||
= render "shared/empty_states/icons/todos_all_done.svg"
|
||||
.js-nothing-here-container.todos-all-done.hidden.svg-content
|
||||
= image_tag 'illustrations/todos_all_done.svg'
|
||||
%h4.text-center
|
||||
You're all done!
|
||||
- elsif current_user.todos.any?
|
||||
.todos-all-done
|
||||
= render "shared/empty_states/icons/todos_all_done.svg"
|
||||
.svg-content
|
||||
= image_tag 'illustrations/todos_all_done.svg'
|
||||
- if todos_filter_empty?
|
||||
%h4.text-center
|
||||
= Gitlab.config.gitlab.no_todos_messages.sample
|
||||
|
|
@ -99,8 +100,8 @@
|
|||
There are no todos to show.
|
||||
- else
|
||||
.todos-empty
|
||||
.todos-empty-hero
|
||||
= render "shared/empty_states/icons/todos_empty.svg"
|
||||
.todos-empty-hero.svg-content
|
||||
= image_tag 'illustrations/todos_empty.svg'
|
||||
.todos-empty-content
|
||||
%h4
|
||||
Todos let you see what you should do next.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
- content_for :page_specific_javascripts do
|
||||
= webpack_bundle_tag 'help'
|
||||
- page_title @path.split("/").reverse.map(&:humanize)
|
||||
.documentation.wiki.prepend-top-default
|
||||
= markdown @markdown
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
= nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: {class: 'home'}) do
|
||||
= link_to admin_root_path, class: 'shortcuts-tree' do
|
||||
.nav-icon-container
|
||||
= custom_icon('overview')
|
||||
= sprite_icon('overview')
|
||||
%span.nav-item-name
|
||||
Overview
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
= nav_link(controller: %w(system_info background_jobs logs health_check requests_profiles)) do
|
||||
= link_to admin_system_info_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('monitoring')
|
||||
= sprite_icon('monitor')
|
||||
%span.nav-item-name
|
||||
Monitoring
|
||||
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
= nav_link(controller: :broadcast_messages) do
|
||||
= link_to admin_broadcast_messages_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('messages')
|
||||
= sprite_icon('messages')
|
||||
%span.nav-item-name
|
||||
Messages
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
= nav_link(controller: [:hooks, :hook_logs]) do
|
||||
= link_to admin_hooks_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('system_hooks')
|
||||
= sprite_icon('hook')
|
||||
%span.nav-item-name
|
||||
System Hooks
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
= nav_link(controller: :applications) do
|
||||
= link_to admin_applications_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('applications')
|
||||
= sprite_icon('applications')
|
||||
%span.nav-item-name
|
||||
Applications
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
= nav_link(controller: :abuse_reports) do
|
||||
= link_to admin_abuse_reports_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('abuse_reports')
|
||||
= sprite_icon('slight-frown')
|
||||
%span.nav-item-name
|
||||
Abuse Reports
|
||||
%span.badge.count= number_with_delimiter(AbuseReport.count(:all))
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
= nav_link(controller: :spam_logs) do
|
||||
= link_to admin_spam_logs_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('spam_logs')
|
||||
= sprite_icon('spam')
|
||||
%span.nav-item-name
|
||||
Spam Logs
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
= nav_link(controller: :deploy_keys) do
|
||||
= link_to admin_deploy_keys_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('key')
|
||||
= sprite_icon('key')
|
||||
%span.nav-item-name
|
||||
Deploy Keys
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
= nav_link(controller: :services) do
|
||||
= link_to admin_application_settings_services_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('service_templates')
|
||||
= sprite_icon('template')
|
||||
%span.nav-item-name
|
||||
Service Templates
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
= nav_link(controller: :labels) do
|
||||
= link_to admin_labels_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('labels')
|
||||
= sprite_icon('labels')
|
||||
%span.nav-item-name
|
||||
Labels
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
= nav_link(controller: :appearances) do
|
||||
= link_to admin_appearances_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('appearance')
|
||||
= sprite_icon('appearance')
|
||||
%span.nav-item-name
|
||||
Appearance
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
= nav_link(controller: :application_settings) do
|
||||
= link_to admin_application_settings_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('settings')
|
||||
= sprite_icon('settings')
|
||||
%span.nav-item-name
|
||||
Settings
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
= nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
|
||||
= link_to group_path(@group) do
|
||||
.nav-icon-container
|
||||
= custom_icon('project')
|
||||
= sprite_icon('project')
|
||||
%span.nav-item-name
|
||||
Overview
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
= nav_link(path: ['groups#issues', 'labels#index', 'milestones#index']) do
|
||||
= link_to issues_group_path(@group) do
|
||||
.nav-icon-container
|
||||
= custom_icon('issues')
|
||||
= sprite_icon('issues')
|
||||
%span.nav-item-name
|
||||
Issues
|
||||
%span.badge.count= number_with_delimiter(issues.count)
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
= nav_link(path: 'groups#merge_requests') do
|
||||
= link_to merge_requests_group_path(@group) do
|
||||
.nav-icon-container
|
||||
= custom_icon('mr_bold')
|
||||
= sprite_icon('git-merge')
|
||||
%span.nav-item-name
|
||||
Merge Requests
|
||||
%span.badge.count= number_with_delimiter(merge_requests.count)
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
= nav_link(path: 'group_members#index') do
|
||||
= link_to group_group_members_path(@group) do
|
||||
.nav-icon-container
|
||||
= custom_icon('members')
|
||||
= sprite_icon('users')
|
||||
%span.nav-item-name
|
||||
Members
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
= nav_link(path: %w[groups#projects groups#edit ci_cd#show]) do
|
||||
= link_to edit_group_path(@group) do
|
||||
.nav-icon-container
|
||||
= custom_icon('settings')
|
||||
= sprite_icon('settings')
|
||||
%span.nav-item-name
|
||||
Settings
|
||||
%ul.sidebar-sub-level-items
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
|
||||
= link_to profile_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('profile')
|
||||
= sprite_icon('profile')
|
||||
%span.nav-item-name
|
||||
Profile
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
= nav_link(controller: [:accounts, :two_factor_auths]) do
|
||||
= link_to profile_account_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('account')
|
||||
= sprite_icon('account')
|
||||
%span.nav-item-name
|
||||
Account
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
= nav_link(controller: 'oauth/applications') do
|
||||
= link_to applications_profile_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('applications')
|
||||
= sprite_icon('applications')
|
||||
%span.nav-item-name
|
||||
Applications
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
= nav_link(controller: :chat_names) do
|
||||
= link_to profile_chat_names_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('chat')
|
||||
= sprite_icon('comment')
|
||||
%span.nav-item-name
|
||||
Chat
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
= nav_link(controller: :personal_access_tokens) do
|
||||
= link_to profile_personal_access_tokens_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('access_tokens')
|
||||
= sprite_icon('token')
|
||||
%span.nav-item-name
|
||||
Access Tokens
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
= nav_link(controller: :emails) do
|
||||
= link_to profile_emails_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('emails')
|
||||
= sprite_icon('mail')
|
||||
%span.nav-item-name
|
||||
Emails
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
= nav_link(controller: :passwords) do
|
||||
= link_to edit_profile_password_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('lock')
|
||||
= sprite_icon('lock')
|
||||
%span.nav-item-name
|
||||
Password
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
= nav_link(controller: :notifications) do
|
||||
= link_to profile_notifications_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('notifications')
|
||||
= sprite_icon('notifications')
|
||||
%span.nav-item-name
|
||||
Notifications
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
= nav_link(controller: :keys) do
|
||||
= link_to profile_keys_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('key')
|
||||
= sprite_icon('key')
|
||||
%span.nav-item-name
|
||||
SSH Keys
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
= nav_link(controller: :gpg_keys) do
|
||||
= link_to profile_gpg_keys_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('key_2')
|
||||
= sprite_icon('key-2')
|
||||
%span.nav-item-name
|
||||
GPG Keys
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
= nav_link(controller: :preferences) do
|
||||
= link_to profile_preferences_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('preferences')
|
||||
= sprite_icon('preferences')
|
||||
%span.nav-item-name
|
||||
Preferences
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
= nav_link(path: 'profiles#audit_log') do
|
||||
= link_to audit_log_profile_path do
|
||||
.nav-icon-container
|
||||
= custom_icon('authentication_log')
|
||||
= sprite_icon('log')
|
||||
%span.nav-item-name
|
||||
Authentication log
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
= nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
|
||||
= link_to project_path(@project), class: 'shortcuts-project' do
|
||||
.nav-icon-container
|
||||
= custom_icon('project')
|
||||
= sprite_icon('project')
|
||||
%span.nav-item-name
|
||||
Overview
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
= nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network)) do
|
||||
= link_to project_tree_path(@project), class: 'shortcuts-tree' do
|
||||
.nav-icon-container
|
||||
= custom_icon('doc_text')
|
||||
= sprite_icon('doc_text')
|
||||
%span.nav-item-name
|
||||
Repository
|
||||
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
= nav_link(controller: %w[projects/registry/repositories]) do
|
||||
= link_to project_container_registry_index_path(@project), class: 'shortcuts-container-registry' do
|
||||
.nav-icon-container
|
||||
= custom_icon('container_registry')
|
||||
= sprite_icon('disk')
|
||||
%span.nav-item-name
|
||||
Registry
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
= nav_link(controller: @project.issues_enabled? ? [:issues, :labels, :milestones, :boards] : :issues) do
|
||||
= link_to project_issues_path(@project), class: 'shortcuts-issues' do
|
||||
.nav-icon-container
|
||||
= custom_icon('issues')
|
||||
= sprite_icon('issues')
|
||||
%span.nav-item-name
|
||||
Issues
|
||||
- if @project.issues_enabled?
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
= nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :labels, :milestones]) do
|
||||
= link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests' do
|
||||
.nav-icon-container
|
||||
= custom_icon('mr_bold')
|
||||
= sprite_icon('git-merge')
|
||||
%span.nav-item-name
|
||||
Merge Requests
|
||||
%span.badge.count.merge_counter.js-merge-counter
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
= nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts]) do
|
||||
= link_to project_pipelines_path(@project), class: 'shortcuts-pipelines' do
|
||||
.nav-icon-container
|
||||
= custom_icon('pipeline')
|
||||
= sprite_icon('pipeline')
|
||||
%span.nav-item-name
|
||||
CI / CD
|
||||
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
= nav_link(controller: :wikis) do
|
||||
= link_to get_project_wiki_path(@project), class: 'shortcuts-wiki' do
|
||||
.nav-icon-container
|
||||
= custom_icon('wiki')
|
||||
= sprite_icon('book')
|
||||
%span.nav-item-name
|
||||
Wiki
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
= nav_link(controller: :snippets) do
|
||||
= link_to project_snippets_path(@project), class: 'shortcuts-snippets' do
|
||||
.nav-icon-container
|
||||
= custom_icon('snippets')
|
||||
= sprite_icon('snippet')
|
||||
%span.nav-item-name
|
||||
Snippets
|
||||
%ul.sidebar-sub-level-items.is-fly-out-only
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
= nav_link(path: %w[projects#edit project_members#index integrations#show services#edit repository#show ci_cd#show pages#show]) do
|
||||
= link_to edit_project_path(@project), class: 'shortcuts-tree' do
|
||||
.nav-icon-container
|
||||
= custom_icon('settings')
|
||||
= sprite_icon('settings')
|
||||
%span.nav-item-name
|
||||
Settings
|
||||
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
= nav_link(path: %w[members#show]) do
|
||||
= link_to project_settings_members_path(@project), title: 'Members', class: 'shortcuts-tree' do
|
||||
.nav-icon-container
|
||||
= custom_icon('members')
|
||||
= sprite_icon('users')
|
||||
%span.nav-item-name
|
||||
Members
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
endpoint: endpoint,
|
||||
"help-page-path" => help_page_path('ci/quick_start/README'),
|
||||
"help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
|
||||
"empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
|
||||
"error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
|
||||
} }
|
||||
|
||||
- content_for :page_specific_javascripts do
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@
|
|||
|
||||
#prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
|
||||
"documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
|
||||
"empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started'),
|
||||
"empty-loading-svg-path": image_path('illustrations/monitoring/loading'),
|
||||
"empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect'),
|
||||
"additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
|
||||
"has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } }
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,11 @@
|
|||
%div{ 'class' => container_class }
|
||||
- if show_auto_devops_callout?(@project)
|
||||
= render 'shared/auto_devops_callout'
|
||||
|
||||
#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
|
||||
"help-page-path" => help_page_path('ci/quick_start/README'),
|
||||
"help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
|
||||
"empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
|
||||
"error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
|
||||
"new-pipeline-path" => new_project_pipeline_path(@project),
|
||||
"can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
|
||||
"all-path" => project_pipelines_path(@project),
|
||||
|
|
@ -17,7 +18,7 @@
|
|||
"finished-path" => project_pipelines_path(@project, scope: :finished),
|
||||
"branches-path" => project_pipelines_path(@project, scope: :branches),
|
||||
"tags-path" => project_pipelines_path(@project, scope: :tags),
|
||||
"has-ci" => @project.has_ci?,
|
||||
"has-ci" => @repository.gitlab_ci_yml,
|
||||
"ci-lint-path" => ci_lint_path } }
|
||||
|
||||
= page_specific_javascript_bundle_tag('common_vue')
|
||||
|
|
|
|||
|
|
@ -31,10 +31,10 @@
|
|||
":board-id" => "boardId",
|
||||
":key" => "_uid" }
|
||||
= render "shared/boards/components/sidebar"
|
||||
%board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
|
||||
"new-issue-path" => new_project_issue_path(@project),
|
||||
%board-add-issues-modal{ "new-issue-path" => new_project_issue_path(@project),
|
||||
"milestone-path" => milestones_filter_dropdown_path,
|
||||
"label-path" => labels_filter_path,
|
||||
"empty-state-svg" => image_path('illustrations/issues.svg'),
|
||||
":issue-link-base" => "issueLinkBase",
|
||||
":root-path" => "rootPath",
|
||||
":project-id" => @project.try(:id) }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.row.empty-state
|
||||
.col-xs-12
|
||||
.svg-content
|
||||
= render 'shared/empty_states/icons/issues.svg'
|
||||
= image_tag 'illustrations/issues.svg'
|
||||
.col-xs-12.text-center
|
||||
.text-content
|
||||
- if has_button && current_user
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.row.empty-state.labels
|
||||
.col-xs-12
|
||||
.svg-content
|
||||
= render 'shared/empty_states/icons/labels.svg'
|
||||
= image_tag 'illustrations/labels.svg'
|
||||
.col-xs-12.text-center
|
||||
.text-content
|
||||
%h4 Labels can be applied to issues and merge requests to categorize them.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.row.empty-state.merge-requests
|
||||
.col-xs-12
|
||||
.svg-content
|
||||
= render 'shared/empty_states/icons/merge_requests.svg'
|
||||
= image_tag 'illustrations/merge_requests.svg'
|
||||
.col-xs-12.text-center
|
||||
.text-content
|
||||
- if has_button
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
.text-center
|
||||
= render 'shared/empty_states/icons/priority_labels.svg'
|
||||
.svg-content
|
||||
= image_tag 'illustrations/priority_labels.svg'
|
||||
%p Star labels to start sorting by priority
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.6 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g transform="translate(0 102)"><g fill="#e5e5e5"><rect width="74" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g fill="#31af64" transform="translate(0 4)"><path fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="m64.82 76h33.18c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855c1.725 1.835 4.631 1.833 6.354 0l9.263-9.855"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26" transform="matrix(.70711-.70711.70711.70711 84.34 49.5)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" fill="#FFF" stroke="#EEE" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,110 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 337" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<rect id="a" width="180" height="220" x="66.2" y="74.4" rx="6"/>
|
||||
<mask id="l" width="180" height="220" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#a"/>
|
||||
</mask>
|
||||
<rect id="b" width="180" height="220" rx="6"/>
|
||||
<mask id="m" width="180" height="220" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#b"/>
|
||||
</mask>
|
||||
<rect id="c" width="28" height="28" rx="4"/>
|
||||
<mask id="n" width="28" height="28" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#c"/>
|
||||
</mask>
|
||||
<rect id="d" width="28" height="28" rx="4"/>
|
||||
<mask id="o" width="28" height="28" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#d"/>
|
||||
</mask>
|
||||
<circle id="e" cx="21.5" cy="21.5" r="21.5"/>
|
||||
<mask id="p" width="43" height="43" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#e"/>
|
||||
</mask>
|
||||
<circle id="f" cx="26.5" cy="26.5" r="26.5"/>
|
||||
<mask id="q" width="53" height="53" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#f"/>
|
||||
</mask>
|
||||
<circle id="g" cx="9.5" cy="4.5" r="4.5"/>
|
||||
<mask id="r" width="13" height="13" x="-2" y="-2">
|
||||
<path fill="#fff" d="M3-2h13v13H3z"/>
|
||||
<use xlink:href="#g"/>
|
||||
</mask>
|
||||
<circle id="h" cx="26.5" cy="26.5" r="26.5"/>
|
||||
<mask id="s" width="53" height="53" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#h"/>
|
||||
</mask>
|
||||
<circle id="i" cx="21.5" cy="21.5" r="21.5"/>
|
||||
<mask id="t" width="43" height="43" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#i"/>
|
||||
</mask>
|
||||
<path id="j" d="M18 38h15c10.5 0 19-8.5 19-19S43.5 0 33 0H19C8.5 0 0 8.5 0 19c0 6.3 3 12 7.8 15.3l5.2 9c.6 1 1.4 1 2 0l3-5.3z"/>
|
||||
<mask id="u" width="52" height="44" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#j"/>
|
||||
</mask>
|
||||
<circle id="k" cx="18.5" cy="18.5" r="18.5"/>
|
||||
<mask id="v" width="37" height="37" x="0" y="0" fill="#fff">
|
||||
<use xlink:href="#k"/>
|
||||
</mask>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(-6 -4)">
|
||||
<use stroke="#EEE" stroke-width="6" mask="url(#l)" transform="rotate(-5 156.245 184.425)" xlink:href="#a"/>
|
||||
<g transform="rotate(5 -707.333 618.042)">
|
||||
<use fill="#FFF" stroke="#EEE" stroke-width="6" mask="url(#m)" xlink:href="#b"/>
|
||||
<g transform="translate(29 24)">
|
||||
<path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/>
|
||||
<path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/>
|
||||
<rect width="86" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/>
|
||||
<rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/>
|
||||
</g>
|
||||
<g transform="translate(29 69)">
|
||||
<path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/>
|
||||
<path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/>
|
||||
<rect width="86" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/>
|
||||
<rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/>
|
||||
</g>
|
||||
<g transform="translate(28 160)">
|
||||
<use stroke="#E5E5E5" stroke-width="6" mask="url(#n)" opacity=".7" xlink:href="#c"/>
|
||||
<rect width="26" height="3" x="41" y="7" fill="#ECECEC" rx="1.5"/>
|
||||
<rect width="43" height="3" x="41" y="17" fill="#ECECEC" rx="1.5"/>
|
||||
</g>
|
||||
<g transform="translate(28 116)">
|
||||
<use stroke="#E5E5E5" stroke-width="6" mask="url(#o)" xlink:href="#d"/>
|
||||
<rect width="86" height="3" x="41" y="7" fill="#E5E5E5" rx="1.5"/>
|
||||
<rect width="43" height="3" x="41" y="17" fill="#E5E5E5" rx="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="rotate(-15 601.917 -782.362)">
|
||||
<use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#p)" xlink:href="#e"/>
|
||||
<text fill="#6B4FBB" font-family="SourceSansPro-Black, Source Sans Pro" font-size="20" font-weight="700" letter-spacing="-.1">
|
||||
<tspan x="12" y="27">@</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g transform="rotate(15 -686.59 1035.907)">
|
||||
<use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#q)" xlink:href="#f"/>
|
||||
<path fill="#FC6D26" d="M26.5 38.2c3.3 0 9.5-2.5 9.5-9.6 0-7-2.4-6.6-9.5-6.6-7 0-9.5-.4-9.5 6.6s6.2 9.6 9.5 9.6z"/>
|
||||
<g transform="translate(17 14)">
|
||||
<use fill="#FC6D26" xlink:href="#g"/>
|
||||
<use stroke="#FFF" stroke-width="4" mask="url(#r)" xlink:href="#g"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="rotate(15 -85.125 65.185)">
|
||||
<use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#s)" xlink:href="#h"/>
|
||||
<path fill="#6B4FBB" d="M24 18.5c0-1.4 1-2.5 2.5-2.5 1.4 0 2.5 1 2.5 2.5v9c0 1.4-1 2.5-2.5 2.5-1.4 0-2.5-1-2.5-2.5v-9zM26.5 37c1.4 0 2.5-1 2.5-2.5 0-1.4-1-2.5-2.5-2.5-1.4 0-2.5 1-2.5 2.5 0 1.4 1 2.5 2.5 2.5z"/>
|
||||
</g>
|
||||
<g transform="rotate(-15 716.492 78.873)">
|
||||
<use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#t)" xlink:href="#i"/>
|
||||
<path fill="#FC6D26" d="M20 23v-3h3v3h-3zm0 3v1.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-2.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-3h-1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-2.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h3v-1.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v3h1.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v2.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-3z"/>
|
||||
</g>
|
||||
<g transform="rotate(-15 129.114 -585.74)">
|
||||
<use stroke="#FDE5D8" stroke-width="6" mask="url(#u)" xlink:href="#j"/>
|
||||
<circle cx="16" cy="20" r="2" fill="#FC6D26"/>
|
||||
<circle cx="27" cy="20" r="2" fill="#FC6D26"/>
|
||||
<circle cx="38" cy="20" r="2" fill="#FC6D26"/>
|
||||
</g>
|
||||
<g transform="rotate(-15 1254.8 -458.986)">
|
||||
<use stroke="#FDE5D8" stroke-width="6" mask="url(#v)" xlink:href="#k"/>
|
||||
<path fill="#FC6D26" d="M10.6 19l2-2c.5-.5.5-1 0-1.5-.3-.4-1-.4-1.3 0l-2.8 2.8c-.2.2-.3.4-.3.7 0 .3 0 .5.3.7l2.8 2.8c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-2-2zm14.8 0l-2-2c-.5-.5-.5-1 0-1.5.3-.4 1-.4 1.3 0l2.8 2.8c.2.2.3.4.3.7 0 .3 0 .5-.3.7l-2.8 2.8c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l2-2z"/>
|
||||
<rect width="2" height="7" x="17" y="15.1" fill="#FC6D26" opacity=".5" transform="rotate(15 18.002 18.64)" rx="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.172 14.157l-.344.344-2.485.133a.462.462 0 0 1-.497-.503l.14-2.24a.599.599 0 0 1 .177-.382l5.155-5.155a4 4 0 1 1 2.828 2.828l-1.439 1.44-1.06-.354-.708.707.354 1.06-.707.708-1.06-.354-.708.707.354 1.06zm6.01-8.839a1 1 0 1 0 1.414-1.414 1 1 0 0 0-1.414 1.414z"/></svg>
|
||||
|
Before Width: | Height: | Size: 362 B |
|
|
@ -452,3 +452,15 @@
|
|||
:why: https://github.com/jaredhanson/utils-merge/blob/v1.0.0/LICENSE
|
||||
:versions: []
|
||||
:when: 2017-09-16 05:18:26.193764000 Z
|
||||
- - :approve
|
||||
- svg4everybody
|
||||
- :who: Tim Zallmann
|
||||
:why: CC0 1.0 - https://github.com/jonathantneal/svg4everybody/blob/master/LICENSE.md
|
||||
:versions: []
|
||||
:when: 2017-09-13 17:31:16.425819400 Z
|
||||
- - :approve
|
||||
- gitlab-svgs
|
||||
- :who: Tim Zallmann
|
||||
:why: Our own library - https://gitlab.com/gitlab-org/gitlab-svgs
|
||||
:versions: []
|
||||
:when: 2017-09-19 14:36:32.795496000 Z
|
||||
|
|
|
|||
48
config/svg.config.js
Normal file
48
config/svg.config.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/* eslint-disable no-commonjs */
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const sourcePath = path.join('node_modules', 'gitlab-svgs', 'dist');
|
||||
const sourcePathIllustrations = path.join('node_modules', 'gitlab-svgs', 'dist', 'illustrations');
|
||||
const destPath = path.normalize(path.join('app', 'assets', 'images'));
|
||||
|
||||
// Actual Task copying the 2 files + all illustrations
|
||||
copyFileSync(path.join(sourcePath, 'icons.svg'), destPath);
|
||||
copyFileSync(path.join(sourcePath, 'icons.json'), destPath);
|
||||
copyFolderRecursiveSync(sourcePathIllustrations, destPath);
|
||||
|
||||
// Helper Functions
|
||||
function copyFileSync(source, target) {
|
||||
var targetFile = target;
|
||||
//if target is a directory a new file with the same name will be created
|
||||
if (fs.existsSync(target)) {
|
||||
if (fs.lstatSync(target).isDirectory()) {
|
||||
targetFile = path.join(target, path.basename(source));
|
||||
}
|
||||
}
|
||||
console.log(`Copy SVG File : ${targetFile}`);
|
||||
fs.writeFileSync(targetFile, fs.readFileSync(source));
|
||||
}
|
||||
|
||||
function copyFolderRecursiveSync(source, target) {
|
||||
var files = [];
|
||||
|
||||
//check if folder needs to be created or integrated
|
||||
var targetFolder = path.join(target, path.basename(source));
|
||||
if (!fs.existsSync(targetFolder)) {
|
||||
fs.mkdirSync(targetFolder);
|
||||
}
|
||||
|
||||
//copy
|
||||
if (fs.lstatSync(source).isDirectory()) {
|
||||
files = fs.readdirSync(source);
|
||||
files.forEach(function (file) {
|
||||
var curSource = path.join(source, file);
|
||||
if (fs.lstatSync(curSource).isDirectory()) {
|
||||
copyFolderRecursiveSync(curSource, targetFolder);
|
||||
} else {
|
||||
copyFileSync(curSource, targetFolder);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -45,6 +45,7 @@ var config = {
|
|||
group: './group.js',
|
||||
groups: './groups/index.js',
|
||||
groups_list: './groups_list.js',
|
||||
help: './help/help.js',
|
||||
how_to_merge: './how_to_merge.js',
|
||||
issue_show: './issue_show/index.js',
|
||||
integrations: './integrations',
|
||||
|
|
|
|||
40
doc/development/fe_guide/icons.md
Normal file
40
doc/development/fe_guide/icons.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
# Icons
|
||||
|
||||
We are using SVG Icons in GitLab with a SVG Sprite, due to this the icons are only loaded once and then referenced through an ID. The sprite SVG is located under `/assets/icons.svg`. Our goal is to replace one by one all inline SVG Icons (as those currently bloat the HTML) and also all Font Awesome usages.
|
||||
|
||||
### Usage in HAML/Rails
|
||||
|
||||
To use a sprite Icon in HAML or Rails we use a specific helper function :
|
||||
|
||||
`sprite_icon(icon_name, size: nil, css_class: '')`
|
||||
|
||||
**icon_name** Use the icon_name that you can find in the SVG Sprite (Overview is available under `/assets/sprite.symbol.html`).
|
||||
**size (optional)** Use one of the following sizes : 16,24,32,48,72 (this will be translated into a `s16` class)
|
||||
**css_class (optional)** If you want to add additional css classes
|
||||
|
||||
**Example**
|
||||
|
||||
`= sprite_icon('issues', size: 72, css_class: 'icon-danger')`
|
||||
|
||||
**Output from example above**
|
||||
|
||||
`<svg class="s72 icon-danger"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons.svg#issues"></use></svg>`
|
||||
|
||||
### Usage in HTML/JS
|
||||
|
||||
Please use the following function inside JS to render an icon :
|
||||
`gl.utils.spriteIcon(iconName)`
|
||||
|
||||
## Adding a new icon to the sprite
|
||||
|
||||
All Icons and Illustrations are managed in the [gitlab-svgs](https://gitlab.com/gitlab-org/gitlab-svgs) repository which is added as a dev-dependency.
|
||||
|
||||
To upgrade to a new SVG Sprite version run `yarn upgrade https://gitlab.com/gitlab-org/gitlab-svgs` and then run `yarn run svg`. This task will copy the svg sprite and all illustrations in the correct folders.
|
||||
|
||||
# SVG Illustrations
|
||||
|
||||
Please use from now on for any SVG based illustrations simple `img` tags to show an illustration by simply using either `image_tag` or `image_path` helpers. Please use the class `svg-content` around it to ensure nice rendering. The illustrations are also organised in the [gitlab-svgs](https://gitlab.com/gitlab-org/gitlab-svgs) repository (as they are then automatically optimised).
|
||||
|
||||
**Example**
|
||||
|
||||
`= image_tag 'illustrations/merge_requests.svg'`
|
||||
|
|
@ -98,6 +98,11 @@ Vue specific design patterns and practices.
|
|||
|
||||
---
|
||||
|
||||
## [Icons](icons.md)
|
||||
How we use SVG for our Icons.
|
||||
|
||||
---
|
||||
|
||||
## Style Guides
|
||||
|
||||
### [JavaScript Style Guide](style_guide_js.md)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ module Gitlab
|
|||
gon.gitlab_url = Gitlab.config.gitlab.url
|
||||
gon.revision = Gitlab::REVISION
|
||||
gon.gitlab_logo = ActionController::Base.helpers.asset_path('gitlab_logo.png')
|
||||
gon.sprite_icons = ActionController::Base.helpers.asset_path('icons.svg')
|
||||
|
||||
if current_user
|
||||
gon.current_user_id = current_user.id
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"karma": "karma start config/karma.config.js --single-run",
|
||||
"karma-coverage": "BABEL_ENV=coverage karma start config/karma.config.js --single-run",
|
||||
"karma-start": "karma start config/karma.config.js",
|
||||
"svg": "node config/svg.config.js",
|
||||
"webpack": "webpack --config config/webpack.config.js",
|
||||
"webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
|
||||
},
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
"css-loader": "^0.28.0",
|
||||
"d3": "^3.5.11",
|
||||
"deckar01-task_list": "^2.0.0",
|
||||
"document-register-element": "^1.3.0",
|
||||
"document-register-element": "1.3.0",
|
||||
"dropzone": "^4.2.0",
|
||||
"emoji-unicode-version": "^0.2.1",
|
||||
"eslint-plugin-html": "^2.0.1",
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
"react-dev-utils": "^0.5.2",
|
||||
"select2": "3.5.2-browserify",
|
||||
"sql.js": "^0.4.0",
|
||||
"svg4everybody": "2.1.9",
|
||||
"three": "^0.84.0",
|
||||
"three-orbit-controls": "^82.1.0",
|
||||
"three-stl-loader": "^1.0.4",
|
||||
|
|
@ -78,6 +80,7 @@
|
|||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-jasmine": "^2.1.0",
|
||||
"eslint-plugin-promise": "^3.5.0",
|
||||
"gitlab-svgs": "https://gitlab.com/gitlab-org/gitlab-svgs.git",
|
||||
"istanbul": "^0.4.5",
|
||||
"jasmine-core": "^2.6.3",
|
||||
"jasmine-jquery": "^2.1.1",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,25 @@ describe IconsHelper do
|
|||
end
|
||||
end
|
||||
|
||||
describe 'sprite_icon' do
|
||||
icon_name = 'clock'
|
||||
|
||||
it 'returns svg icon html' do
|
||||
expect(sprite_icon(icon_name).to_s)
|
||||
.to eq "<svg><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
|
||||
end
|
||||
|
||||
it 'returns svg icon html + size classes' do
|
||||
expect(sprite_icon(icon_name, size: 72).to_s)
|
||||
.to eq "<svg class=\"s72\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
|
||||
end
|
||||
|
||||
it 'returns svg icon html + size classes + additional class' do
|
||||
expect(sprite_icon(icon_name, size: 72, css_class: 'icon-danger').to_s)
|
||||
.to eq "<svg class=\"s72 icon-danger\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
|
||||
end
|
||||
end
|
||||
|
||||
describe 'file_type_icon_class' do
|
||||
it 'returns folder class' do
|
||||
expect(file_type_icon_class('folder', 0, 'folder_name')).to eq 'folder'
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
|
|||
propsData: {
|
||||
endpoint: 'endpoint',
|
||||
helpPagePath: 'foo',
|
||||
emptyStateSvgPath: 'foo',
|
||||
errorStateSvgPath: 'foo',
|
||||
autoDevopsHelpPath: 'foo',
|
||||
},
|
||||
}).$mount();
|
||||
|
|
@ -65,6 +67,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
|
|||
propsData: {
|
||||
endpoint: 'endpoint',
|
||||
helpPagePath: 'foo',
|
||||
emptyStateSvgPath: 'foo',
|
||||
errorStateSvgPath: 'foo',
|
||||
autoDevopsHelpPath: 'foo',
|
||||
},
|
||||
}).$mount();
|
||||
|
|
@ -117,6 +121,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
|
|||
propsData: {
|
||||
endpoint: 'endpoint',
|
||||
helpPagePath: 'foo',
|
||||
emptyStateSvgPath: 'foo',
|
||||
errorStateSvgPath: 'foo',
|
||||
autoDevopsHelpPath: 'foo',
|
||||
},
|
||||
}).$mount();
|
||||
|
|
@ -139,6 +145,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
|
|||
propsData: {
|
||||
endpoint: 'endpoint',
|
||||
helpPagePath: 'foo',
|
||||
emptyStateSvgPath: 'foo',
|
||||
errorStateSvgPath: 'foo',
|
||||
autoDevopsHelpPath: 'foo',
|
||||
},
|
||||
}).$mount();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
#pipelines-list-vue{ data: { endpoint: 'foo',
|
||||
"css-class" => 'foo',
|
||||
"help-page-path" => 'foo',
|
||||
"empty-state-svg-path" => 'foo',
|
||||
"error-state-svg-path" => 'foo',
|
||||
"new-pipeline-path" => 'foo',
|
||||
"can-create-pipeline" => 'true',
|
||||
"all-path" => 'foo',
|
||||
|
|
|
|||
|
|
@ -411,5 +411,15 @@ describe('common_utils', () => {
|
|||
commonUtils.ajaxPost(requestURL, data);
|
||||
expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST');
|
||||
});
|
||||
|
||||
describe('gl.utils.spriteIcon', () => {
|
||||
beforeEach(() => {
|
||||
window.gon.sprite_icons = 'icons.svg';
|
||||
});
|
||||
|
||||
it('should return the svg for a linked icon', () => {
|
||||
expect(gl.utils.spriteIcon('test')).toEqual('<svg><use xlink:href="icons.svg#test" /></svg>');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'gettingStarted',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.currentState).toBe(component.states.gettingStarted);
|
||||
|
|
@ -31,6 +34,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'gettingStarted',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.buttonPath).toEqual(statePaths.settingsPath);
|
||||
|
|
@ -42,6 +48,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'loading',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.buttonPath).toEqual(statePaths.documentationPath);
|
||||
|
|
@ -53,6 +62,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'unableToConnect',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.showButtonDescription).toEqual(true);
|
||||
|
|
@ -63,6 +75,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'loading',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.showButtonDescription).toEqual(false);
|
||||
|
|
@ -74,6 +89,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'gettingStarted',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.$el.querySelector('svg')).toBeDefined();
|
||||
|
|
@ -87,6 +105,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'loading',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.$el.querySelector('svg')).toBeDefined();
|
||||
|
|
@ -100,6 +121,9 @@ describe('EmptyState', () => {
|
|||
selectedState: 'unableToConnect',
|
||||
settingsPath: statePaths.settingsPath,
|
||||
documentationPath: statePaths.documentationPath,
|
||||
emptyGettingStartedSvgPath: 'foo',
|
||||
emptyLoadingSvgPath: 'foo',
|
||||
emptyUnableToConnectSvgPath: 'foo',
|
||||
});
|
||||
|
||||
expect(component.$el.querySelector('svg')).toBeDefined();
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ describe('Pipelines Empty State', () => {
|
|||
component = new EmptyStateComponent({
|
||||
propsData: {
|
||||
helpPagePath: 'foo',
|
||||
emptyStateSvgPath: 'foo',
|
||||
},
|
||||
}).$mount();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ describe('Pipelines Error State', () => {
|
|||
beforeEach(() => {
|
||||
ErrorStateComponent = Vue.extend(errorStateComp);
|
||||
|
||||
component = new ErrorStateComponent().$mount();
|
||||
component = new ErrorStateComponent({
|
||||
propsData: {
|
||||
errorStateSvgPath: 'foo',
|
||||
},
|
||||
}).$mount();
|
||||
});
|
||||
|
||||
it('should render error state SVG', () => {
|
||||
|
|
|
|||
1
symbol/icons.svg
Normal file
1
symbol/icons.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 1792 1792" id="clock_o" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9H672q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224V544q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5T1281.5 1561 896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"/></symbol><symbol viewBox="0 0 36 18" id="commit" xmlns="http://www.w3.org/2000/svg"><path d="M34 7h-7.2c-.9-4-4.5-7-8.8-7s-7.9 3-8.8 7H2C.9 7 0 7.9 0 9s.9 2 2 2h7.2c.9 4 4.5 7 8.8 7s7.9-3 8.8-7H34c1.1 0 2-.9 2-2s-.9-2-2-2m-16 7c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5"/></symbol><symbol viewBox="0 0 16 16" id="project" xmlns="http://www.w3.org/2000/svg"><path d="M8.462 2.177l-.038.044a.505.505 0 0 0 .038-.044zm-.787 0a.5.5 0 0 0 .038.043l-.038-.043zM3.706 7h8.725L8.069 2.585 3.706 7zM7 13.369V12a1 1 0 0 1 2 0v1.369h3V9H4v4.369h3zM14 9v4.836c0 .833-.657 1.533-1.5 1.533h-9c-.843 0-1.5-.7-1.5-1.533V9h-.448a1.1 1.1 0 0 1-.783-1.873L6.934.887a1.5 1.5 0 0 1 2.269 0l6.165 6.24A1.1 1.1 0 0 1 14.585 9H14z"/></symbol></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
177
symbol/sprite.symbol.html
Normal file
177
symbol/sprite.symbol.html
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
||||
<script src="https://rawgit.com/jonathantneal/svg4everybody/master/dist/svg4everybody.js"></script>
|
||||
<script>svg4everybody();</script>
|
||||
<title>SVG <symbol> sprite preview | svg-sprite</title>
|
||||
<style>@charset "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial,Helvetica,sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 1em;cursor:default}.icon-box{margin:0;width:144px;height:144px;position:relative;background:#ccc url("data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=") top left repeat;border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style>
|
||||
|
||||
<!--
|
||||
|
||||
Sprite shape dimensions
|
||||
====================================================================================================
|
||||
You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
|
||||
they would become a huge 100% in size. You may use the following dimension classes for doing so.
|
||||
They might well be outsourced to an external stylesheet of course.
|
||||
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
.svg-clock_o-dims { width: 200px; height: 200px; }
|
||||
.svg-commit-dims { width: 36px; height: 18px; }
|
||||
.svg-project-dims { width: 16px; height: 16px; }
|
||||
</style>
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--
|
||||
|
||||
Inline <symbol> SVG sprite
|
||||
====================================================================================================
|
||||
This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
|
||||
below within this document. Please see
|
||||
|
||||
https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#defs--symbol-mode
|
||||
|
||||
for further details on how to create this embeddable sprite variant.
|
||||
|
||||
-->
|
||||
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<symbol viewBox="0 0 1792 1792" id="clock_o" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9H672q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224V544q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5T1281.5 1561 896 1664t-385.5-103T231 1281.5 128 896t103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"/></symbol>
|
||||
<symbol viewBox="0 0 36 18" id="commit" xmlns="http://www.w3.org/2000/svg"><path d="M34 7h-7.2c-.9-4-4.5-7-8.8-7s-7.9 3-8.8 7H2C.9 7 0 7.9 0 9s.9 2 2 2h7.2c.9 4 4.5 7 8.8 7s7.9-3 8.8-7H34c1.1 0 2-.9 2-2s-.9-2-2-2m-16 7c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5"/></symbol>
|
||||
<symbol viewBox="0 0 16 16" id="project" xmlns="http://www.w3.org/2000/svg"><path d="M8.462 2.177l-.038.044a.505.505 0 0 0 .038-.044zm-.787 0a.5.5 0 0 0 .038.043l-.038-.043zM3.706 7h8.725L8.069 2.585 3.706 7zM7 13.369V12a1 1 0 0 1 2 0v1.369h3V9H4v4.369h3zM14 9v4.836c0 .833-.657 1.533-1.5 1.533h-9c-.843 0-1.5-.7-1.5-1.533V9h-.448a1.1 1.1 0 0 1-.783-1.873L6.934.887a1.5 1.5 0 0 1 2.269 0l6.165 6.24A1.1 1.1 0 0 1 14.585 9H14z"/></symbol>
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
<header>
|
||||
<h1>SVG <code><symbol></code> sprite preview</h1>
|
||||
<p>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:</p>
|
||||
<ul>
|
||||
<li>Your browser has to <a href="http://caniuse.com/#feat=svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li>
|
||||
<li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#defs--symbol-mode" target="_blank">see the documentation</a> for details on how to create such an embeddable sprite.</li>
|
||||
<li>Internet Explorer up to version 11 doesn't support external sprites for use with inline SVG. For IE 9-11, you may polyfill this functionality with <a href="https://github.com/jonathantneal/svg4everybody" target="_blank">SVG for Everybody</a>.</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section>
|
||||
|
||||
<!--
|
||||
|
||||
A) Inline SVG with embedded sprite
|
||||
====================================================================================================
|
||||
These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
|
||||
embedded above. They may be styled via CSS.
|
||||
|
||||
-->
|
||||
|
||||
<h3>A) Inline SVG with embedded sprite</h3>
|
||||
<ul>
|
||||
|
||||
<li title="clock_o">
|
||||
<div class="icon-box">
|
||||
|
||||
<!-- clock_o -->
|
||||
<svg class="svg-clock_o-dims">
|
||||
<use xlink:href="#clock_o"></use>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h2>clock_o</h2>
|
||||
</li>
|
||||
<li title="commit">
|
||||
<div class="icon-box">
|
||||
|
||||
<!-- commit -->
|
||||
<svg class="svg-commit-dims">
|
||||
<use xlink:href="#commit"></use>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h2>commit</h2>
|
||||
</li>
|
||||
<li title="project">
|
||||
<div class="icon-box">
|
||||
|
||||
<!-- project -->
|
||||
<svg class="svg-project-dims">
|
||||
<use xlink:href="#project"></use>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h2>project</h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<!--
|
||||
|
||||
B) Inline SVG with external sprite (IE 9-11 with polyfill only)
|
||||
====================================================================================================
|
||||
These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
|
||||
SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only)
|
||||
|
||||
-->
|
||||
|
||||
<h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3>
|
||||
<ul>
|
||||
|
||||
<li title="clock_o">
|
||||
<div class="icon-box">
|
||||
|
||||
<!-- clock_o -->
|
||||
<svg class="svg-clock_o-dims">
|
||||
<use xlink:href="icons.svg#clock_o"></use>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h2>clock_o</h2>
|
||||
</li>
|
||||
<li title="commit">
|
||||
<div class="icon-box">
|
||||
|
||||
<!-- commit -->
|
||||
<svg class="svg-commit-dims">
|
||||
<use xlink:href="icons.svg#commit"></use>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h2>commit</h2>
|
||||
</li>
|
||||
<li title="project">
|
||||
<div class="icon-box">
|
||||
|
||||
<!-- project -->
|
||||
<svg class="svg-project-dims">
|
||||
<use xlink:href="icons.svg#project"></use>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h2>project</h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
====================================================================================================
|
||||
-->
|
||||
|
||||
</section>
|
||||
<footer>
|
||||
<p>Generated at Fri, 25 Aug 2017 12:38:01 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
10
yarn.lock
10
yarn.lock
|
|
@ -1834,7 +1834,7 @@ doctrine@^2.0.0:
|
|||
esutils "^2.0.2"
|
||||
isarray "^1.0.0"
|
||||
|
||||
document-register-element@^1.3.0:
|
||||
document-register-element@1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/document-register-element/-/document-register-element-1.3.0.tgz#fb3babb523c74662be47be19c6bc33e71990d940"
|
||||
|
||||
|
|
@ -2712,6 +2712,10 @@ getpass@^0.1.1:
|
|||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
"gitlab-svgs@https://gitlab.com/gitlab-org/gitlab-svgs.git":
|
||||
version "1.0.2"
|
||||
resolved "https://gitlab.com/gitlab-org/gitlab-svgs.git#7f36f3951dd08904761780da48efcd639f34c3af"
|
||||
|
||||
glob-base@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
|
||||
|
|
@ -5937,6 +5941,10 @@ supports-color@^4.2.1:
|
|||
dependencies:
|
||||
has-flag "^2.0.0"
|
||||
|
||||
svg4everybody@2.1.9:
|
||||
version "2.1.9"
|
||||
resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
|
||||
|
||||
svgo@^0.7.0:
|
||||
version "0.7.2"
|
||||
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
|
||||
|
|
|
|||
Loading…
Reference in a new issue