Skip to content
Snippets Groups Projects
Commit a2938824 authored by Karl Prieb's avatar Karl Prieb
Browse files

fix svg icons

parent 10fa852d
No related branches found
No related tags found
No related merge requests found
Showing
with 93 additions and 77 deletions
......@@ -4,7 +4,7 @@
{{> accountBox lighten=true }}
<button class="sidebar-flex__back-button sidebar-flex-content-active" data-action="back">
<svg class="sidebar-flex__back-icon">
<use xlink:href="/images/icons.svg#arrow-back"></use>
<use href="#icon-arrow-back"></use>
</svg>
<span>Back to chat</span>
</button>
......
......@@ -4,7 +4,7 @@
{{> accountBox lighten=true }}
<button class="sidebar-flex__back-button sidebar-flex-content-active" data-action="back">
<svg class="sidebar-flex__back-icon">
<use xlink:href="/images/icons.svg#arrow-back"></use>
<use href="#icon-arrow-back"></use>
</svg>
<span>Back to chat</span>
</button>
......@@ -40,7 +40,7 @@
<div class="rc-input__wrapper">
<div class="rc-input__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--magnifier">
<use href="/images/icons.svg#magnifier"></use>
<use href="#icon-magnifier"></use>
</svg>
</div>
<input type="text" class="rc-input__element rc-input__element--small" name="settings-search" placeholder="{{_ 'Search'}}">
......
......@@ -31,4 +31,6 @@ Package.onUse(function(api) {
api.addFiles('client/main.js', 'client');
api.addFiles('server/inject.js', 'server');
api.addAssets('public/icons.svg', 'server');
api.addAssets('public/loading.css', 'server');
});
<svg xmlns="http://www.w3.org/2000/svg" display="none">
<symbol id="icon-arrow-down" viewBox="0 0 10 6"><title>arrow-down</title><path d="M8.657.828L4.828 4.657 1 .828" stroke-width="1.5" fill="none"/></symbol>
<symbol id="icon-arrow-back" viewBox="0 0 20 14"><title>arrow-back</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M8 13.071L1.929 7 8 .929"/><path d="M3 7h14.003C18.106 7 19 7.89 19 9v3.5"/></g></symbol>
<symbol id="icon-at" viewBox="0 0 16 16"><title>at</title><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="3"/><path d="M9.68 13.469A7 7 0 1 1 14 7v.542"/><path d="M14 7.49c0 1.387-.781 2.51-2 2.51-1.219 0-2-1.112-2-2.51V3"/></g></symbol>
<symbol id="icon-cross" viewBox="0 0 12 12"><title>cross</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.243 1.757l-8.486 8.486M1.757 1.757l8.486 8.486"/></g></symbol>
<symbol id="icon-customize" viewBox="0 0 16 16"><title>customize</title><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M0 7h8m4 0h2M0 2h2m3.996 0H14M0 12h3m4 0h7" stroke-linecap="square"/><circle cx="4" cy="2" r="2"/><circle cx="10" cy="7" r="2"/><circle cx="5" cy="12" r="2"/></g></symbol>
<symbol id="icon-hashtag" viewBox="0 0 16 16"><title>hashtag</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M5 1v14M11 1v14M1 5h14M1 11h14"/></g></symbol>
<symbol id="icon-lock" viewBox="0 0 14 20"><title>lock</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M1 9h12v10H1zM3 5c0-2.21 1.795-4 4-4 2.21 0 4 1.795 4 4v4H3V5z"/></g></symbol>
<symbol id="icon-magnifier" viewBox="0 0 19 19"><title>magnifier</title><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><circle cx="6.5" cy="6.5" r="6.5"/><path d="M17 17l-5-5" stroke-linecap="square"/></g></symbol>
<symbol id="icon-plus" viewBox="0 0 14 14"><title>plus</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M7 1v12M13 7H1"/></g></symbol>
<symbol id="icon-user" viewBox="0 0 18 19"><title>user</title><path d="M1 16.832c0-4.948 6-3.958 6-5.937 0 0 .115-1.314-.546-1.98C5.63 8.092 5 7.102 5 5.454 5 2.993 6.79 1 9 1s4 1.994 4 4.453c0 1.625-.614 2.637-1.474 3.463-.628.648-.526 1.979-.526 1.979 0 1.979 6 .99 6 5.937 0 0-1.593 1.168-8 1.168s-8-1.168-8-1.168z" stroke-width="1.5" fill="none" fill-rule="evenodd"/></symbol>
<symbol id="icon-user-rounded" viewBox="0 0 18 18"><title>user-rounded</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><rect x=".75" y=".75" width="16.5" height="16.5" rx="2"/><path d="M3.002 17c0-3.75 4.499-3 4.499-4.5 0 0 .086-.996-.41-1.5-.618-.625-1.09-1.376-1.09-2.625C6.001 6.511 7.344 5 9 5c1.656 0 2.999 1.511 2.999 3.375 0 1.232-.46 2-1.105 2.625-.471.491-.395 1.5-.395 1.5 0 1.5 4.499.75 4.499 4.5"/></g></symbol>
<symbol id="icon-warning" viewBox="0 0 20 20"><title>warning</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M10 3l8 14H2z"/><path d="M10 9v5" stroke-linecap="square"/></g></symbol>
</svg>
.loading-animation {
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
position: absolute;
justify-content: center;
text-align: center;
}
.loading-animation > div {
width: 10px;
height: 10px;
margin: 2px;
border-radius: 100%;
display: inline-block;
background-color: rgba(255, 255, 255, 0.6);
-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
animation: loading-bouncedelay 1.4s infinite ease-in-out both;
}
.loading-animation .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loading-animation .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes loading-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes loading-bouncedelay {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
......@@ -45,9 +45,9 @@ export default () => {
const properties = [fontFamily, colors, customCss];
const run = list => {
return list.filter(setting => setting.value && setting.properties || setting.type !== 'color')
.sort((a, b) => a._id.length - b._id.length)
.map(setting => properties.reduce((ret, f) => ret || f(setting), ''))
.join('\n');
.sort((a, b) => a._id.length - b._id.length)
.map(setting => properties.reduce((ret, f) => ret || f(setting), ''))
.join('\n');
};
DynamicCss.run = debounce(() => {
......
......@@ -17,50 +17,9 @@ RocketChat.models.Settings.find({_id:/theme-/}, {fields: { value: 1, properties:
Inject.rawHead('dynamic', `<script>(${ require('./dynamic-css.js').default.toString() })()</script>`);
Inject.rawHead('page-loading', `
<style>
.loading-animation {
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
position: absolute;
justify-content: center;
text-align: center;
}
.loading-animation > div {
width: 10px;
height: 10px;
margin: 2px;
border-radius: 100%;
display: inline-block;
background-color: rgba(255,255,255,0.6);
-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
animation: loading-bouncedelay 1.4s infinite ease-in-out both;
}
.loading-animation .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loading-animation .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes loading-bouncedelay {
0%,
80%,
100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes loading-bouncedelay {
0%,
80%,
100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
</style>`);
Inject.rawHead('page-loading', `<style>${ Assets.getText('public/loading.css') }</style>`);
Inject.rawBody('icons', Assets.getText('public/icons.svg'));
Inject.rawBody('page-loading-div', `
<div id="initial-page-loading" class="page-loading">
......
......@@ -51,7 +51,7 @@
<ul class="rc-popover__list">
<li class="rc-popover__item" data-action="open" data-open="administration">
<svg class="rc-popover__item-icon rc-popover__item-icon--customize">
<use xlink:href="/images/icons.svg#customize"></use>
<use href="#icon-customize"></use>
</svg>
<span>{{_ "Administration"}}</span>
</li>
......@@ -64,7 +64,7 @@
<div class="sidebar__account-status-bullet {{bullet}}" title="{{visualStatus}}"></div>
<div class="sidebar__account-username">{{visualStatus}}</div>
<svg class="sidebar__account-arrow">
<use xlink:href="/images/icons.svg#arrow-down"></use>
<use href="#icon-arrow-down"></use>
</svg>
</label>
</div>
......
......@@ -7,7 +7,7 @@
<div class="sidebar-item__picture">
{{#if icon}}
<svg class="sidebar-item__icon sidebar-item__icon--{{icon}}">
<use xlink:href="/images/icons.svg#{{icon}}"></use>
<use href="#icon-{{icon}}"></use>
</svg>
{{else}}
<div class="sidebar-item__user-thumb">
......
......@@ -7,13 +7,13 @@
<div class="rc-input__wrapper">
<div class="rc-input__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--magnifier">
<use href="/images/icons.svg#magnifier"></use>
<use href="#icon-magnifier"></use>
</svg>
</div>
<input type="text" class="rc-input__element rc-input__element--small" placeholder="{{getPlaceholder}}">
<div class="rc-input__icon rc-input__icon--right">
<svg class="rc-input__icon-svg rc-input__icon-svg--cross">
<use href="/images/icons.svg#cross"></use>
<use href="#icon-cross"></use>
</svg>
</div>
</div>
......@@ -23,7 +23,7 @@
{{#if canCreate}}
<button class="rc-button rc-button--square rc-tooltip" aria-label="{{ _ 'Create_A_New_Channel' }}">
<svg class="toolbar__icon toolbar__search-create-channel">
<use xlink:href="/images/icons.svg#plus"></use>
<use href="#icon-plus"></use>
</svg>
</button>
{{/if}}
......
......@@ -5,7 +5,7 @@
<div class="rc-input__wrapper">
<div class="rc-input__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--at">
<use href="/images/icons.svg#at"></use>
<use href="#icon-at"></use>
</svg>
</div>
{{ selectedUsers }}
......
......@@ -38,7 +38,7 @@
<div class="rc-input__wrapper">
<div class="rc-input__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--{{iconType}}">
<use href="/images/icons.svg#{{iconType}}"></use>
<use href="#icon-{{iconType}}"></use>
</svg>
</div>
<input name="name" type="text" class="rc-input__element" placeholder="Type channel name" autofocus>
......@@ -49,7 +49,7 @@
<div class="rc-input__error">
<div class="rc-input__error-icon">
<svg class="rc-input__error-icon-svg rc-input__error-icon--warning">
<use href="/images/icons.svg#warning"></use>
<use href="#icon-warning"></use>
</svg>
</div>
<div class="rc-input__error-message">canal já existe</div>
......@@ -62,7 +62,7 @@
<div class="rc-input__wrapper">
<div class="rc-input__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--at">
<use href="/images/icons.svg#at"></use>
<use href="#icon-at"></use>
</svg>
</div>
<div class="rc-tags">
......@@ -73,7 +73,7 @@
</span>
<span class="rc-tags__tag-username">{{user}}</span>
<svg class="rc-tags__tag-icon">
<use href="/images/icons.svg#cross"></use>
<use href="#icon-cross"></use>
</svg>
</span>
{{/each}}
......
......@@ -4,7 +4,7 @@
<button class="full-modal__back-button sidebar-content">
<span class="full-modal__back-text">{{_ "Cancel"}}</span>
<svg class="full-modal__back-icon">
<use href="/images/icons.svg#cross"></use>
<use href="#icon-cross"></use>
</svg>
</button>
{{> Template.dynamic template=template}}
......
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="arrow-down" viewBox="0 0 10 6"><title>arrow-down</title><path d="M8.657.828L4.828 4.657 1 .828" stroke-width="1.5" fill="none"/></symbol>
<symbol id="arrow-back" viewBox="0 0 20 14"><title>arrow-back</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M8 13.071L1.929 7 8 .929"/><path d="M3 7h14.003C18.106 7 19 7.89 19 9v3.5"/></g></symbol>
<symbol id="at" viewBox="0 0 16 16"><title>at</title><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="3"/><path d="M9.68 13.469A7 7 0 1 1 14 7v.542"/><path d="M14 7.49c0 1.387-.781 2.51-2 2.51-1.219 0-2-1.112-2-2.51V3"/></g></symbol>
<symbol id="cross" viewBox="0 0 12 12"><title>cross</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M10.243 1.757l-8.486 8.486M1.757 1.757l8.486 8.486"/></g></symbol>
<symbol id="customize" viewBox="0 0 16 16"><title>customize</title><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M0 7h8m4 0h2M0 2h2m3.996 0H14M0 12h3m4 0h7" stroke-linecap="square"/><circle cx="4" cy="2" r="2"/><circle cx="10" cy="7" r="2"/><circle cx="5" cy="12" r="2"/></g></symbol>
<symbol id="hashtag" viewBox="0 0 16 16"><title>hashtag</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M5 1v14M11 1v14M1 5h14M1 11h14"/></g></symbol>
<symbol id="lock" viewBox="0 0 14 20"><title>lock</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M1 9h12v10H1zM3 5c0-2.21 1.795-4 4-4 2.21 0 4 1.795 4 4v4H3V5z"/></g></symbol>
<symbol id="magnifier" viewBox="0 0 19 19"><title>magnifier</title><g transform="translate(1 1)" stroke-width="1.5" fill="none" fill-rule="evenodd"><circle cx="6.5" cy="6.5" r="6.5"/><path d="M17 17l-5-5" stroke-linecap="square"/></g></symbol>
<symbol id="plus" viewBox="0 0 14 14"><title>plus</title><g stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M7 1v12M13 7H1"/></g></symbol>
<symbol id="user" viewBox="0 0 18 19"><title>user</title><path d="M1 16.832c0-4.948 6-3.958 6-5.937 0 0 .115-1.314-.546-1.98C5.63 8.092 5 7.102 5 5.454 5 2.993 6.79 1 9 1s4 1.994 4 4.453c0 1.625-.614 2.637-1.474 3.463-.628.648-.526 1.979-.526 1.979 0 1.979 6 .99 6 5.937 0 0-1.593 1.168-8 1.168s-8-1.168-8-1.168z" stroke-width="1.5" fill="none" fill-rule="evenodd"/></symbol>
<symbol id="user-rounded" viewBox="0 0 18 18"><title>user-rounded</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><rect x=".75" y=".75" width="16.5" height="16.5" rx="2"/><path d="M3.002 17c0-3.75 4.499-3 4.499-4.5 0 0 .086-.996-.41-1.5-.618-.625-1.09-1.376-1.09-2.625C6.001 6.511 7.344 5 9 5c1.656 0 2.999 1.511 2.999 3.375 0 1.232-.46 2-1.105 2.625-.471.491-.395 1.5-.395 1.5 0 1.5 4.499.75 4.499 4.5"/></g></symbol>
<symbol id="warning" viewBox="0 0 20 20"><title>warning</title><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M10 3l8 14H2z"/><path d="M10 9v5" stroke-linecap="square"/></g></symbol>
</svg>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment