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

show edit controls on click

Browse source
This commit is contained in:
Felix Niklas 2014-08-28 09:03:44 +02:00
parent 1f9e7e37b1
commit 83f1f7821d
3 changed files with 88 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -318,6 +318,8 @@ class Edit extends App.Controller
'click .visibility.toggle': 'toggle_visibility'
'click .pop-selectable': 'select_type'
'click .pop-selected': 'show_selectable_types'
'focus textarea': 'show_controls'
'blur textarea': 'hide_controls'
constructor: ->
super
@ -466,6 +468,15 @@ class Edit extends App.Controller
@type = type
typeIcon.addClass @type
show_controls: =>
@el.addClass('mode--edit')
# scroll to bottom
@el.scrollParent().scrollTop(99999)
hide_controls: =>
if !@el.find('textarea').val()
@el.removeClass('mode--edit')
autosaveStop: =>
@clearInterval( 'autosave' )

48
app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
View file

@ -2,31 +2,33 @@
<div class="bubble-grid horizontal">
<div class="vertical center">
<div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
<div class="dark pop-select">
<div class="pop-selected clickable centered">
<div class="gray <%- @type %> channel icon"></div>
</div>
<div class="pop-selector hide">
<div class="horizontal">
<div class="pop-selectable clickable centered" data-value="email">
<div class="white email channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="facebook">
<div class="white facebook channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="twitter">
<div class="white twitter channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="phone">
<div class="white phone channel icon"></div>
<div class="edit-controls">
<div class="dark pop-select">
<div class="pop-selected clickable centered">
<div class="gray <%- @type %> channel icon"></div>
</div>
<div class="pop-selector hide">
<div class="horizontal">
<div class="pop-selectable clickable centered" data-value="email">
<div class="white email channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="facebook">
<div class="white facebook channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="twitter">
<div class="white twitter channel icon"></div>
</div>
<div class="pop-selectable clickable centered" data-value="phone">
<div class="white phone channel icon"></div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="visibility toggle clickable centered">
<div class="public visibility icon"></div>
<div class="internal visibility icon"></div>
<hr>
<div class="visibility toggle clickable centered">
<div class="public visibility icon"></div>
<div class="internal visibility icon"></div>
</div>
</div>
</div>
<div class="flex article-content bubble-gap">
@ -37,7 +39,7 @@
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
</div>
</div>
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
<button type="submit" class="edit-controls btn btn-primary submit"><%- @T( 'Send' ) %></button>
</div>
</div>
</form>

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

@ -1593,7 +1593,7 @@ footer {
.btn {
font-size: 14px;
padding: 9px 14px;
padding: 9px 24px 8px;
}
.btn.primary,
@ -2536,45 +2536,6 @@ footer {
border-color: hsl(300,43%,84%);
}
.ticket-edit .text-bubble {
padding: 0;
border-color: #b3b3b3;
white-space: normal;
border-radius: 5px;
}
.ticket-edit textarea {
width: 100%;
height: 38px;
padding: 10px 20px;
vertical-align: bottom;
border: none;
background: none;
outline: none;
transition: 500ms;
}
.ticket-edit textarea:focus {
height: 105px;
}
.ticket-edit textarea:focus + .bubble-placeholder {
display: none;
}
.ticket-edit .bubble-arrow:after {
border-color: #b3b3b3;
box-shadow: none;
}
.bubble-placeholder {
position: absolute;
color: #b3b3b3;
left: 20px;
top: 10px;
pointer-events: none;
}
.bubble-arrow {
position: absolute;
width: 7px;
@ -2648,6 +2609,10 @@ footer {
margin-bottom: 37px;
}
.ticket-edit.mode--edit {
margin-bottom: 12px;
}
.bottom-form {
background: white;
}
@ -2667,6 +2632,14 @@ footer {
margin-bottom: 3px;
}
.ticket-edit .edit-controls {
display: none;
}
.ticket-edit.mode--edit .edit-controls {
display: block;
}
.ticket-edit .pop-selectable .icon {
opacity: 0.3;
pointer-events: none;
@ -2705,6 +2678,44 @@ footer {
display: none;
}
.ticket-edit .text-bubble {
padding: 0;
border-color: #b3b3b3;
white-space: normal;
border-radius: 5px;
}
.ticket-edit textarea {
width: 100%;
height: 38px;
padding: 10px 20px;
vertical-align: bottom;
border: none;
background: none;
outline: none;
}
.ticket-edit.mode--edit textarea {
height: 115px;
}
.ticket-edit.mode--edit .bubble-placeholder {
display: none;
}
.ticket-edit .bubble-arrow:after {
border-color: #b3b3b3;
box-shadow: none;
}
.bubble-placeholder {
position: absolute;
color: #b3b3b3;
left: 20px;
top: 10px;
pointer-events: none;
}
.pop-select {
position: relative;
z-index: 2;
@ -2718,7 +2729,7 @@ footer {
.pop-selected,
.pop-selectable {
width: 36px;
width: 38px;
height: 36px;
}