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

create button layout ref and split subtle button into "btn--text btn--secondary" (darker) and "btn--text btn--subtle" (lighter)

Browse source
This commit is contained in:
Felix Niklas 2015-06-26 11:47:28 +02:00
parent 05048921de
commit 65db49831d
26 changed files with 167 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
View file

@ -5,8 +5,7 @@ class App.TicketCreate extends App.Controller
events:
'click .type-tabs .tab': 'changeFormType'
'submit form': 'submit'
'click .submit': 'submit'
'click .cancel': 'cancel'
'click .js-cancel': 'cancel'
constructor: (params) ->
super

12
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -1501,4 +1501,16 @@ class calendarSubscriptionsRef extends App.ControllerContent
App.Config.set( 'layout_ref/calendar_subscriptions', calendarSubscriptionsRef, 'Routes' )
class ButtonsRef extends App.ControllerContent
constructor: ->
super
@render()
render: ->
@html App.view('layout_ref/buttons')
App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' )
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

8
app/assets/javascripts/app/views/agent_ticket_create.jst.eco
View file

@ -36,9 +36,9 @@
<div class="ticket-form-bottom"></div>
</div>
<div class="form-actions horizontal">
<a class="subtle-link standalone cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
<button type="submit" class="btn btn--success submit align-right"><%- @T('Create') %></button>
<div class="form-controls">
<a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
<button type="submit" class="btn btn--success align-right"><%- @T('Create') %></button>
</div>
</form>
</div>
@ -147,7 +147,7 @@
</ul>
<div class="horizontal">
<button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
<a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
<a class="btn btn--text btn--secondary js-cancel align-right u-clickable"><%- @T('Cancel') %></a>
</div>
</form>
</div>

2
app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco
View file

@ -8,7 +8,7 @@
<div class="horizontal">
<div id="form-ticket-bulk-typeVisibility" class="form-inline"></div>
<div class="bulkAction-controls align-right">
<a class="subtle-link standalone js-cancel"><%- @T( 'Go Back' ) %></a>
<a class="btn btn--text btn--secondary js-cancel"><%- @T( 'Go Back' ) %></a>
<input type="submit" class="btn btn--primary js-submit" value="<%- @T('Update') %>">
</div>
</div>

2
app/assets/javascripts/app/views/agent_user_create.jst.eco
View file

@ -9,7 +9,7 @@
</div>
<div class="modal-body" id="form-user"></div>
<div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
</div>
</div>

4
app/assets/javascripts/app/views/customer_ticket_create.jst.eco
View file

@ -17,8 +17,8 @@
</div>
<div class="form-actions horizontal">
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<div class="form-controls">
<a class="btn btn--text btn--subtle cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn--success submit align-right"><%- @T( 'Create' ) %></button>
</div>
</form>

2
app/assets/javascripts/app/views/getting_started/admin.jst.eco
View file

@ -5,7 +5,7 @@
<h2><%- @T('Administrator Account') %></h2>
<div class="wizard-body vertical justified js-admin-form"></div>
<div class="wizard-controls center">
<a class="subtle-link" href="#getting_started"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#getting_started"><%- @T('Go Back') %></a>
<button class="btn btn--success align-right"><%- @T( 'Create' ) %></button>
</div>
</div>

2
app/assets/javascripts/app/views/getting_started/channel.jst.eco
View file

@ -17,7 +17,7 @@
</div>
</div>
<div class="wizard-controls center">
<a class="subtle-link" href="#getting_started/base"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#getting_started/base"><%- @T('Go Back') %></a>
<a class="btn align-right" href="#getting_started/finish"><%- @T( 'Skip' ) %></a>
</div>
</div>

6
app/assets/javascripts/app/views/getting_started/email.jst.eco
View file

@ -22,7 +22,7 @@
</fieldset>
</div>
<div class="wizard-controls center">
<a class="subtle-link" href="#getting_started/channel"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#getting_started/channel"><%- @T('Go Back') %></a>
<button class="btn btn--primary align-right"><%- @T( 'Connect' ) %></button>
</div>
</div>
@ -70,7 +70,7 @@
<div class="base-inbound-settings"></div>
</div>
<div class="wizard-controls center">
<a class="subtle-link js-back" data-slide="js-intro"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary js-back" data-slide="js-intro"><%- @T('Go Back') %></a>
<button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
</div>
</div>
@ -85,7 +85,7 @@
<div class="base-outbound-settings"></div>
</div>
<div class="wizard-controls center">
<a class="subtle-link js-back" data-slide="js-inbound"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary js-back" data-slide="js-inbound"><%- @T('Go Back') %></a>
<button class="btn btn--primary align-right"><%- @T( 'Continue' ) %></button>
</div>
</div>

2
app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
View file

@ -13,7 +13,7 @@
<p class="help-block help-block--center"><%- @T('If you want to use more email adresses, you can configure them later.') %></p>
</div>
<div class="wizard-controls center">
<a class="subtle-link" href="#getting_started/base"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#getting_started/base"><%- @T('Go Back') %></a>
<a class="btn align-right" href="#getting_started/finish"><%- @T( 'Finish' ) %></a>
</div>
</div>

2
app/assets/javascripts/app/views/import/index.jst.eco
View file

@ -11,7 +11,7 @@
</div>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" href="#getting_started"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#getting_started"><%- @T('Go Back') %></a>
</div>
</div>
</div>

6
app/assets/javascripts/app/views/import/otrs.jst.eco
View file

@ -9,7 +9,7 @@
</p>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
</div>
</div>
<div class="wizard-slide vertical hide" data-slide="otrs-plugin">
@ -21,7 +21,7 @@
<a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
<div class="btn btn--primary align-right hide js-otrs-link"><%- @T('Next') %></div>
</div>
</div>
@ -45,7 +45,7 @@
</div>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
<a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
<div class="btn btn--primary align-right hide js-migration-start" data-target="otrs-start-migration"><%- @T('Migrate OTRS Data') %></div>
</div>
</div>

57
app/assets/javascripts/app/views/layout_ref/buttons.jst.eco Normal file
View file

@ -0,0 +1,57 @@
<div class="main flex">
<h1>Buttons</h1>
<h2>Normal Buttons</h2>
<h3>Default</h3>
<div class="btn">Default Button</div>
<div class="btn btn--slim">Slim Button</div>
<div class="btn is-disabled">Disabled Button</div>
<h3>Primary</h3>
<div class="btn btn--primary">Primary Button</div>
<div class="btn btn--secondary">Secondary Button</div>
<h3>Positive</h3>
<div class="btn btn--positive">Positive Button</div>
<div class="btn btn--positive btn--secondary">Positive Secondary Button</div>
<h3>Dangerous</h3>
<div class="btn btn--danger">Dangerous Button</div>
<div class="btn btn--danger btn--secondary">Dangerous Secondary Button</div>
<h3>Split</h3>
<div class="horizontal">
<div class="btn btn--split--first">Split First Button</div>
<div class="btn btn--split">Split Button</div>
<div class="btn btn--split--last">Split Last Button</div>
</div>
<h2>Text Buttons</h2>
<h3>Default</h3>
<div class="btn btn--text">Text Button</div>
<div class="btn btn--secondary btn--text">Secondary Text Button</div>
<h3>Positive</h3>
<div class="btn btn--positive btn--text">Positive Text Button</div>
<h3>Dangerous</h3>
<div class="btn btn--danger btn--text">Dangerous Text Button</div>
<h3>Subtle</h3>
<div class="btn btn--text btn--secondary">Subtle Button</div>
<h2>Action Buttons</h2>
<h3>Default</h3>
<div class="btn btn--action">Action Button</div>
<h3>Split</h3>
<div class="horizontal">
<div class="btn btn--action btn--split--first">Split First</div>
<div class="btn btn--action btn--split">Split</div>
<div class="btn btn--action btn--split--last">Split Last</div>
</div>
</div>

6
app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
View file

@ -16,7 +16,7 @@
</p>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
</div>
</div>
<div class="wizard-slide hide" data-slide="otrs-plugin">
@ -29,7 +29,7 @@
<svg class="icon-download"><use xlink:href="#icon-download" /></svg> Personal Migration Plugin</a>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
<div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div>
</div>
</div>
@ -52,7 +52,7 @@
</div>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="otrs-plugin">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="otrs-plugin">Go Back</a>
<div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div>
</div>
</div>

1
app/assets/javascripts/app/views/layout_ref/index.jst.eco
View file

@ -4,6 +4,7 @@
<ul>
<li><a href="#layout_ref/buttons">👇👉👈👆 All the Buttons</a></li>
<li><a href="#layout_ref/calendar_subscription">Calendar Subscription</a></li>
<li><a href="#layout_ref/search_select">Searchable Select</a></li>
<li><a href="#layout_ref/schedulers">Schedulers</a></li>

2
app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
View file

@ -290,7 +290,7 @@
</fieldset>
</div>
<div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
<a class="btn btn--text btn--subtle js-cancel" href="#/">Cancel & Go Back</a>
<button type="submit" class="btn btn--success js-submit align-right">Update & Back</button>
</div>
</div>

16
app/assets/javascripts/app/views/layout_ref/setup.jst.eco
View file

@ -41,7 +41,7 @@
</fieldset>
</div>
<div class="wizard-controls center">
<a class="subtle-link" data-target="home">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
<div class="btn btn--success align-right" data-target="company">Create</div>
</div>
</div>
@ -67,7 +67,7 @@
</fieldset>
</div>
<div class="wizard-controls center">
<a class="subtle-link" data-target="home">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
<div class="btn btn--primary align-right" data-target="channels">Next</div>
</div>
</div>
@ -91,7 +91,7 @@
</div>
</div>
<div class="wizard-controls center">
<a class="subtle-link" data-target="company">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="company">Go Back</a>
<div class="btn align-right" data-target="agent">Skip</div>
</div>
</div>
@ -115,7 +115,7 @@
</div>
<div class="wizard-controls center">
<div class="btn" data-target="channels">Cancel</div>
<a class="subtle-link align-right" data-target="channels">Go Back</a>
<a class="btn btn--text btn--secondary align-right" data-target="channels">Go Back</a>
<div class="btn btn--primary" data-target="emailCheck">Connect</div>
</div>
</div>
@ -161,7 +161,7 @@
</div>
<div class="wizard-controls center">
<div class="btn js-cancelChannelSetup" data-target="channels">Cancel</div>
<a class="subtle-link align-right" data-target="emailStart">Go Back</a>
<a class="btn btn--text btn--secondary align-right" data-target="emailStart">Go Back</a>
<div class="btn btn--primary" data-target="inboundCheck">Connect</div>
</div>
</div>
@ -195,8 +195,8 @@
</fieldset>
</div>
<div class="wizard-controls center">
<div class="btn btn--subtle js-cancelChannelSetup" data-target="channels">Cancel</div>
<div class="btn btn--subtle align-right" data-target="emailStart">Go Back</div>
<div class="btn btn--text btn--secondary js-cancelChannelSetup" data-target="channels">Cancel</div>
<div class="btn btn--text btn--secondary align-right" data-target="emailStart">Go Back</div>
<div class="btn btn--primary" data-target="outboundCheck">Connect</div>
</div>
</div>
@ -263,7 +263,7 @@
</fieldset>
</div>
<div class="wizard-controls center">
<a class="subtle-link" data-target="moreChannels">Go Back</a>
<a class="btn btn--text btn--secondary" data-target="moreChannels">Go Back</a>
<div class="btn btn--primary align-right" data-target="setupFinished">Continue</div>
<div class="btn btn--success js-inviteAgent">Invite</div>
</div>

2
app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
View file

@ -180,7 +180,7 @@
</div>
<h2>Schedule</h2>
<h3>Business Hours <span class="subtitle">in European Central Time <a class="btn btn--text btn--subtle" href="#">(change)</a></span></h3>
<h3>Business Hours <span class="subtitle">in European Central Time (<a class="btn btn--text btn--subtle" href="#">change</a>)</span></h3>
<table class="settings-list settings-list--toggleColumn">
<thead>
<tr>

4
app/assets/javascripts/app/views/login.jst.eco
View file

@ -24,11 +24,11 @@
<label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
</div>
<div class="form-controls">
<div class="form-controls horizontal">
<button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
<% if @C('user_lost_password'): %>
<a href="#password_reset" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
<a href="#password_reset" class="btn btn--text btn--secondary align-right"><%- @T( 'Forgot password?' ) %></a>
<% end %>
</div>

2
app/assets/javascripts/app/views/modal.jst.eco
View file

@ -23,7 +23,7 @@
<div class="modal-footer">
<% if @cancel: %>
<div class="modal-leftFooter">
<a class="subtle-link standalone js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<a class="btn btn--text btn--subtle js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
</div>
<% end %>
<% for button in @centerButtons: %>

2
app/assets/javascripts/app/views/object_manager/index.jst.eco
View file

@ -11,7 +11,7 @@
<h2>Database Update required</h2>
<p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
<div class="box-controls">
<div class="subtle-link standalone js-discard">Discard Changes</div>
<div class="btn btn--text btn--secondary js-discard">Discard Changes</div>
<div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
</div>
</div>

4
app/assets/javascripts/app/views/password/reset.jst.eco
View file

@ -10,8 +10,8 @@
<form class="form-password">
<div class="form-password-item"></div>
<div class="form-controls">
<a class="subtle-link standalone pull-left cancel" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
<a class="btn btn--text btn--subtle cancel" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit align-right"><%- @T( 'Submit' ) %></button>
</div>
</form>
<% end %>

4
app/assets/javascripts/app/views/password/reset_change.jst.eco
View file

@ -4,8 +4,8 @@
<form>
<div class="form-password-change"></div>
<div class="form-controls">
<a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
<a class="btn btn--text btn--subtle cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit align-right"><%- @T( 'Submit' ) %></button>
</div>
</form>
</div>

2
app/assets/javascripts/app/views/password/reset_failed.jst.eco
View file

@ -3,7 +3,7 @@
<div class="hero-unit fullscreen-body">
<h2><%- @T( @head ) %><small></small></h2>
<p><%- @message %></p>
<a href="#password_reset" class="subtle retry">&raquo; <%- @T('try again') %> &laquo;</a>
<a href="#password_reset" class="btn btn--text btn--secondary retry">&raquo; <%- @T('try again') %> &laquo;</a>
</div>
</div>
</div>

4
app/assets/javascripts/app/views/signup.jst.eco
View file

@ -4,8 +4,8 @@
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
<form>
<div class="form-controls">
<a class="subtle-link standalone pull-left" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button>
<a class="btn btn--text btn--subtle" href="#login"><%- @T( 'Cancel & Go Back' ) %></a>
<button class="btn btn--primary submit align-right"><%- @T( 'Create my account' ) %></button>
</div>
</form>
</div>

95
app/assets/stylesheets/zammad.css.scss
View file

@ -317,7 +317,7 @@ span[data-tooltip]:hover:before {
text-transform: uppercase;
color: hsl(0,0%,60%);
font-size: 12px;
letter-spacing: 0.1em;
letter-spacing: 0.05em;
height: 31px;
padding: 6px 11px !important;
display: inline-flex;
@ -356,10 +356,13 @@ span[data-tooltip]:hover:before {
background: hsl(145,51%,35%);
}
&.btn--secondary,
&.btn--secondary:active {
&.btn--secondary {
background: white;
color: hsl(145,51%,45%);
&:active {
background: hsl(0,0%,98%);
}
}
}
@ -370,10 +373,13 @@ span[data-tooltip]:hover:before {
background: hsl(0,65%,45%);
}
&.btn--secondary,
&.btn--secondary:active {
&.btn--secondary {
background: white;
color: hsl(0,65%,55%);
&:active {
background: hsl(0,0%,98%);
}
}
}
@ -385,29 +391,44 @@ span[data-tooltip]:hover:before {
background: none;
vertical-align: baseline;
&:active {
color: hsl(203,65%,45%);
}
}
&.btn--subtle {
padding-left: 0;
padding-right: 0;
border: none;
color: rgba(0,0,0,.32);
text-decoration: underline;
background: none;
@extend .u-clickable;
&:active {
color: rgba(0,0,0,.42);
}
&:hover {
color: rgba(0,0,0,.5);
color: hsl(203,65%,40%);
}
+ .btn:not(.align-right) {
margin-left: 20px;
&.btn--secondary {
color: hsl(0,0%,68%);
text-decoration: underline;
&:active {
color: hsl(0,0%,53%);
}
}
&.btn--positive {
color: hsl(145,51%,45%);
&:active {
color: hsl(145,51%,30%);
background: none;
}
}
&.btn--danger {
color: hsl(0,65%,55%);
&:active {
color: hsl(0,65%,40%);
background: none;
}
}
&.btn--subtle {
text-decoration: underline;
letter-spacing: 0.04em;
color: hsl(0,0%,85%);
&:active {
color: hsl(0,0%,75%);
}
}
}
@ -418,7 +439,7 @@ span[data-tooltip]:hover:before {
&.btn--split--last {
border-radius: 0;
border-left: none;
margin-left: 0;
margin-left: 0 !important;
}
&.btn--split--last {
border-radius: 0 3px 3px 0;
@ -433,7 +454,6 @@ span[data-tooltip]:hover:before {
margin-left: auto;
}
.subtle-link.align-right ~ .btn,
.btn.align-right ~ .btn {
margin-left: 15px;
}
@ -1345,16 +1365,6 @@ kbd {
display: inline-block;
}
.subtle-link {
color: rgba(0,0,0,.32);
text-decoration: underline;
@extend .u-clickable;
}
.subtle-link:hover {
color: rgba(0,0,0,.5);
}
ol.tabs {
list-style: decimal inside;
}
@ -1588,7 +1598,13 @@ form {
.form-controls {
@extend .clearfix;
display: flex;
align-items: center;
margin-top: 10px;
.btn + .btn:not(.align-right) {
margin-left: 20px;
}
}
form a.standalone {
@ -3944,9 +3960,6 @@ footer {
.newTicket .form-control:not(:focus):not(.focus) {
border-color: hsl(0,0%,90%);
}
.newTicket .subtle-link {
color: hsl(0,0%,89%);
}
.newTicket .article-form-top {
margin-top: 15px;
}