Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

todo: use inline icons

Browse source
This commit is contained in:
Felix Niklas 2016-02-05 12:29:26 +01:00
parent 10a61558f7
commit 34f8604a25
2 changed files with 55 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/assets/javascripts/app/views/dashboard.jst.eco
View file

@ -8,22 +8,58 @@
<div class="box box--paper">
<% if @isAdmin: %>
<h3><%- @T('Configuration') %></h3>
<div class="todo is-done"><%- @T('Branding') %></div>
<div class="todo"><%- @T('Your Email Configuration') %></div>
<div class="todo"><%- @T('Invite Agents/Colleges') %></div>
<a class="todo is-done">
<%- @Icon('checkmark') %>
<%- @T('Branding') %>
</a>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Your Email Configuration') %>
</a>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Invite Agents/Colleges') %>
</a>
<% end %>
<h3><%- @T('How to use it') %></h3>
<div class="todo"><a href="#" class="intro"><%- @T('Intro') %></a></div>
<div class="todo is-done"><%- @T('Create a Test Ticket') %></div>
<div class="todo"><%- @T('Create new Overviews') %></div>
<div class="todo is-done"><%- @T('Create Text Modues') %></div>
<div class="todo"><%- @T('Create Macros') %></div>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Intro') %></a>
</a>
<a class="todo is-done">
<%- @Icon('checkmark') %>
<%- @T('Create a Test Ticket') %>
</a>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Create new Overviews') %>
</a>
<a class="todo is-done">
<%- @Icon('checkmark') %>
<%- @T('Create Text Modues') %>
</a>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Create Macros') %>
</a>
<% if @isAdmin: %>
<h3><%- @T('Additionals Channels') %></h3>
<div class="todo"><%- @T('Twitter') %></div>
<div class="todo"><%- @T('Facebook') %></div>
<div class="todo is-done"><%- @T('Chat') %></div>
<div class="todo"><%- @T('Widget') %></div>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Twitter') %>
</a>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Facebook') %>
</a>
<a class="todo is-done">
<%- @Icon('checkmark') %>
<%- @T('Chat') %>
</a>
<a class="todo">
<%- @Icon('small-dot') %>
<%- @T('Widget') %>
</a>
<% end %>
</div>
</div>

47
app/assets/stylesheets/zammad.scss
View file

@ -17,28 +17,6 @@ $highlight-color: hsl(205,90%,60%);
$largeScreenBreakpoint: 1280px;
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@function icon($name, $color) {
$data-uri: asset-data-url("/assets/images/icons/#{$name}");
$replace-src: str-replace("@{data-uri}", "#50E3C2", $color);
@return $replace-src;
}
html {
height: 100%;
}
@ -7765,28 +7743,17 @@ output {
}
.todo {
padding: 0 22px;
position: relative;
display: block;
/* circle */
&:before {
content: "";
position: absolute;
left: 5px;
top: 12px;
width: 6px;
height: 6px;
border-radius: 100%;
background: rgba(0,0,0,.1);
.icon {
fill: hsl(0,0%,80%);
vertical-align: middle;
margin: -2px 3px 0 0;
}
&.is-done {
// background: icon("checkmark.svg", $supergood-color) no-repeat 0 9px;
background: url("images/icons/checkmark.svg") no-repeat 0 9px;
&:before {
display: none;
}
&.is-done .icon {
fill: $supergood-color;
}
}