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

style modals

Browse source
This commit is contained in:
Felix Niklas 2014-09-16 10:15:57 +02:00
parent 87861f00a7
commit c4e6715797
13 changed files with 132 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/images/sprite.svg
View file

@ -197,5 +197,6 @@
<path d="M6.5,1.6 C8.1,0.8 9.9,0.6 11.8,1 L12.1,4.38538095e-15 C7.2,-1.2 2.9,1.4 1.4,5.7 C0.6,8 0.6,10.3 1.6,12.4 L2.1,13.2 L0,13.8 L4.5,17 L4.9,12.1 L4.9,12 L4.9,11.5 L3,12.9 L2.7,12.1 C1.8,10.2 1.7,8.1 2.4,6.1 C3.1,4.1 4.6,2.5 6.5,1.6 Z M17.4,4 L19.5,3.5 L15,0.3 L14.6,5.8 L16.6,4.3 L17.1,5.2 C18.1,7.1 18.3,9.3 17.6,11.3 C16.9,13.3 15.6,15 13.7,15.9 C12.1,16.7 9.8,16.7 8.8,16.6 L8.5,17.6 C12.4,18.4 17.2,16 18.7,11.7 C19.5,9.4 19.2,7 18.1,4.8 L17.4,4 Z" id="change" fill-opacity="0.7" sketch:type="MSShapeGroup"></path>
</g>
<path d="M76.4767712,343.142686 L81.2904338,338.295361 C81.679595,337.903479 82.3127561,337.901273 82.7046388,338.290434 C83.0965214,338.679595 83.0987275,339.312756 82.7095663,339.704639 L77.8909934,344.556908 L82.7039017,349.369816 C83.094426,349.760341 83.094426,350.393506 82.7039017,350.78403 C82.3133774,351.174554 81.6802124,351.174554 81.2896881,350.78403 L76.4817074,345.976049 L71.7095663,350.781562 C71.3204051,351.173444 70.6872439,351.175651 70.2953613,350.786489 C69.9034787,350.397328 69.9012726,349.764167 70.2904338,349.372284 L75.0674852,344.561827 L70.2127651,339.707107 C69.8222408,339.316583 69.8222408,338.683418 70.2127651,338.292893 C70.6032893,337.902369 71.2364543,337.902369 71.6269786,338.292893 L76.4767712,343.142686 Z" id="white-close" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M89.4767712,343.142686 L94.2904338,338.295361 C94.679595,337.903479 95.3127561,337.901273 95.7046388,338.290434 C96.0965214,338.679595 96.0987275,339.312756 95.7095663,339.704639 L90.8909934,344.556908 L95.7039017,349.369816 C96.094426,349.760341 96.094426,350.393506 95.7039017,350.78403 C95.3133774,351.174554 94.6802124,351.174554 94.2896881,350.78403 L89.4817074,345.976049 L84.7095663,350.781562 C84.3204051,351.173444 83.6872439,351.175651 83.2953613,350.786489 C82.9034787,350.397328 82.9012726,349.764167 83.2904338,349.372284 L88.0674852,344.561827 L83.2127651,339.707107 C82.8222408,339.316583 82.8222408,338.683418 83.2127651,338.292893 C83.6032893,337.902369 84.2364543,337.902369 84.6269786,338.292893 L89.4767712,343.142686 Z" id="dark-close" fill="#000000" sketch:type="MSShapeGroup"></path>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 91 KiB

23
app/assets/javascripts/app/controllers/_application_controller.js.coffee
View file

@ -438,14 +438,13 @@ class App.ControllerContent extends App.Controller
@navShow()
class App.ControllerModal extends App.Controller
className: 'modal fade',
tag: 'div',
className: 'modal fade'
events:
'submit form': 'submit',
'click .submit': 'submit',
'click .cancel': 'modalHide',
'click .close': 'modalHide',
'submit form': 'submit'
'click .js-submit': 'submit'
'click .js-cancel': 'modalHide'
'click .js-close': 'modalHide'
constructor: (options) ->
@ -466,21 +465,21 @@ class App.ControllerModal extends App.Controller
render: ->
@html App.view('modal')(
title: @title,
title: @title
message: @message
detail: @detail
close: @close
)
@modalShow(
backdrop: @backdrop,
keyboard: @keyboard,
backdrop: @backdrop
keyboard: @keyboard
)
modalShow: (params) ->
defaults = {
backdrop: true,
keyboard: true,
show: true,
backdrop: true
keyboard: true
show: true
}
data = $.extend({}, defaults, params)
@el.modal(data)

13
app/assets/javascripts/app/views/agent_ticket_customer.jst.eco
View file

@ -1,13 +1,16 @@
<form class="form-horizontal">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h2 class="modal-title"><%- @T( 'Change Customer' ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'Change Customer' ) %></h1>
</div>
<div class="modal-body" id="form-customer"></div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Submit' ) %></button>
</div>
</div>
</div>

11
app/assets/javascripts/app/views/agent_ticket_merge.jst.eco
View file

@ -2,8 +2,10 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h2 class="modal-title"><%- @T( 'Merge' ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'Merge' ) %></h1>
</div>
<div class="modal-body">
<h4><%- @T( 'Merge to Ticket#' ) %></h4>
@ -15,8 +17,9 @@
<h4><%- @T( 'Recent Views Tickets' ) %></h4>
<div id="ticket-merge-recent-tickets"></div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Submit' ) %></button>
</div>
</div>
</div>

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

@ -1,14 +1,16 @@
<form class="form-horizontal">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h2 class="modal-title"><%- @T( @head ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( @head ) %></h1>
</div>
<div class="modal-body" id="form-user"></div>
<div class="modal-footer">
<button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
<button class="btn secondary cancel"><%- @T( 'Cancel' ) %></button>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Create' ) %></button>
</div>
</div>
</div>

14
app/assets/javascripts/app/views/dashboard/ticket_settings.jst.eco
View file

@ -1,16 +1,18 @@
<form class="form-horizontal">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h2 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @overview.name ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @overview.name ) %></h1>
</div>
<div class="modal-body">
<div id="form-setting"></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
<button class="btn cancel"><%- @T( 'Cancel' ) %></button>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T('Submit') %></button>
</div>
</div>
</div>

15
app/assets/javascripts/app/views/generic/admin/edit.jst.eco
View file

@ -1,15 +1,16 @@
<form class="form-horizontal">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" title="<%- @Ti( 'close' ) %>">&times;</a>
<h2 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h1>
</div>
<div class="modal-body" id="object_edit"></div>
<div class="modal-footer">
<button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
<button class="btn cancel"><%- @T( 'Cancel' ) %></button>
</div>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T( 'Submit' ) %></button>
</div>
</div>
</div>

14
app/assets/javascripts/app/views/generic/admin/new.jst.eco
View file

@ -1,14 +1,16 @@
<form class="form-horizontal">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" title="<%- @Ti( 'close' ) %>">&times;</a>
<h2 class="modal-title"><%- @T( 'Neu' ) %>: <%- @T( @head ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'Neu' ) %>: <%- @T( @head ) %></h1>
</div>
<div class="modal-body" id="object_new"></div>
<div class="modal-footer">
<button class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
<button class="btn cancel"><%- @T( 'Cancel' ) %></button>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T('Submit') %></button>
</div>
</div>
</div>

6
app/assets/javascripts/app/views/generic/history.jst.eco
View file

@ -1,8 +1,10 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h2 class="modal-title"><%- @T( 'History' ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'History' ) %></h1>
<a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
</div>
<div class="modal-body">

13
app/assets/javascripts/app/views/link/add.jst.eco
View file

@ -1,9 +1,11 @@
<form class="form-horizontal">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h2 class="modal-title"><%- @T( 'Link' ) %></h2>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<h1 class="modal-title"><%- @T( 'Link' ) %></h1>
</div>
<div class="modal-body">
<%- @T( 'Link' ) %>
@ -27,8 +29,9 @@
</ul>
-->
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary"><%- @T( 'Submit' ) %></button>
<div class="modal-footer horizontal">
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T('Submit') %></button>
</div>
</div>
</div>

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

@ -1,7 +1,7 @@
<div class="page-header">
<h1><%- @T('Maintenance Message') %><small></small></h1>
</div>
<form class="form-horizontal form-large" id="maintenanceForm">
<form class="form-large" id="maintenanceForm">
<fieldset>
<div class="form-group">
<label for="title"><%- @T('Title') %></label>

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

@ -2,24 +2,26 @@
<div class="modal-content">
<div class="modal-header">
<% if @close: %>
<a href="#" class="close">&times;</a>
<div class="modal-close js-close">
<div class="close icon"></div>
</div>
<% end %>
<h2 class="modal-title"><%- @T( @title ) %></h2>
<h1 class="modal-title"><%- @T( @title ) %></h1>
</div>
<div class="modal-body">
<form class="form-horizontal">
<form>
<p><%= @message %></p>
<% if @detail: %>
<pre><%= @detail %></p>
<% end %>
</form>
</div>
<div class="modal-footer">
<% if @button: %>
<button class="btn btn-primary submit"><%- @T( @button ) %></button>
<% end %>
<div class="modal-footer horizontal">
<% if @cancel: %>
<button class="btn cancel"><%- @T( 'Cancel' ) %></button>
<a class="subtle-link standalone js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
<% end %>
<% if @button: %>
<button type="submit" class="btn btn-create js-submit align-right"><%- @T( @button ) %></button>
<% end %>
</div>
</div>

93
app/assets/stylesheets/zzz.css.erb
View file

@ -459,21 +459,6 @@ label {
z-index: 1;
}
.form-horizontal label {
text-align: right;
float: left;
margin-left: 0;
margin-right: 0;
width: 130px;
margin-top: 7px;
}
.form-horizontal .form-group .checkbox label {
text-align: left;
width: 100%;
margin-top: 0;
margin-bottom: 4px;
}
.form-stacked .checkbox label {
color: inherit;
font-size: 13px;
@ -531,17 +516,6 @@ label {
.help-block {
color: #bcbcbc;
}
.form-horizontal .help-inline, .form-horizontal .help-block {
font-size: 12px;
margin-top: 4px;
}
.form-horizontal .control-label {
width: 130px;
}
.form-horizontal .controls {
margin-left: 150px;
}
/* replace music icon with attachment */
.icon-attachment {
@ -1227,6 +1201,12 @@ ol.tabs li {
background-position: -70px -338px;
}
.close.icon {
width: 13px;
height: 13px;
background-position: -83px -338px;
}
/*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@ -1248,23 +1228,6 @@ form a.standalone {
margin-left: auto;
}
.modal-header {
padding: 10px 15px;
}
.modal .form-group .controls {
width: 65%;
}
.modal .form-group {
margin-bottom: 2px;
}
.modal-footer {
margin-top: 0;
padding: 14px 20px 20px;
}
footer {
clear: both;
padding-top: 10px;
@ -3099,6 +3062,50 @@ footer {
top: 45px;
}
.modal-dialog {
width: 660px;
margin-top: 35px;
margin-bottom: 35px;
}
.modal-content {
border-radius: 0;
border: 1px solid hsl(0,0%,90%);
box-shadow: none;
}
.modal-header {
padding: 30px 23px 23px;
border: none;
}
.modal-header h1 {
text-align: center;
}
.modal-close {
padding: 23px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.modal-close .close.icon {
opacity: 0.18;
}
.modal-body {
padding: 0 23px;
}
.modal-footer {
padding: 23px 23px 20px;
border: none;
}
/*
----------------