clues v1
This commit is contained in:
Felix Niklas
parent
c6a051af43
commit
f8d7301677
5 changed files with 229 additions and 7 deletions
|
|
@ -36,7 +36,7 @@ class Content extends App.ControllerContent
|
|||
|
||||
holder.addClass 'unique'
|
||||
|
||||
rng = new Math.seedrandom(id);
|
||||
rng = new Math.seedrandom(id)
|
||||
x = rng() * (width - size)
|
||||
y = rng() * (height - size)
|
||||
holder.css('background-position', "-#{ x }px -#{ y }px")
|
||||
|
|
@ -133,7 +133,7 @@ class CommunicationOverview extends App.ControllerContent
|
|||
height: container.attr('data-height')
|
||||
options:
|
||||
duration: 300
|
||||
complete: -> overflowContainer.addClass('hide');
|
||||
complete: -> overflowContainer.addClass('hide')
|
||||
|
||||
render: ->
|
||||
@html App.view('layout_ref/communication_overview')()
|
||||
|
|
@ -369,7 +369,7 @@ class LayoutRefCommunicationReply extends App.ControllerContent
|
|||
@attachmentPlaceholder.addClass('hide')
|
||||
@attachmentUpload.removeClass('hide')
|
||||
|
||||
progress = 0;
|
||||
progress = 0
|
||||
duration = fileSize / 1024
|
||||
|
||||
for i in [0..100]
|
||||
|
|
@ -712,7 +712,7 @@ class RichText extends App.ControllerContent
|
|||
|
||||
# add marker for cursor
|
||||
getFirstRange = ->
|
||||
sel = rangy.getSelection();
|
||||
sel = rangy.getSelection()
|
||||
if sel.rangeCount
|
||||
sel.getRangeAt(0)
|
||||
else
|
||||
|
|
@ -735,8 +735,8 @@ class RichText extends App.ControllerContent
|
|||
|
||||
return
|
||||
)
|
||||
#editable.style.borderColor = '#54c8eb';
|
||||
#aloha(editable);
|
||||
#editable.style.borderColor = '#54c8eb'
|
||||
#aloha(editable)
|
||||
return
|
||||
|
||||
render: ->
|
||||
|
|
@ -933,4 +933,126 @@ class highlightRef extends App.ControllerContent
|
|||
|
||||
App.Config.set( 'layout_ref/highlight', highlightRef, 'Routes' )
|
||||
|
||||
|
||||
class cluesRef extends App.ControllerContent
|
||||
|
||||
clues: [
|
||||
{
|
||||
container: '.search'
|
||||
headline: 'Suche'
|
||||
text: 'Hier finden sie alles!'
|
||||
},
|
||||
{
|
||||
container: '.user-menu'
|
||||
headline: 'Erstellen'
|
||||
text: 'Hier können sie Tickets, Kunden und Organisationen anlegen.'
|
||||
action: 'click .add .js-action'
|
||||
}
|
||||
]
|
||||
|
||||
events:
|
||||
'click .js-next': 'next'
|
||||
'click .js-previous': 'previous'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
###
|
||||
|
||||
options
|
||||
clues: list of clues
|
||||
onComplete: a callback for when the user is done
|
||||
|
||||
###
|
||||
|
||||
@options.onComplete = ->
|
||||
@position = 0
|
||||
@render()
|
||||
|
||||
next: (event) =>
|
||||
event.stopPropagation()
|
||||
@navigate 1
|
||||
|
||||
previous: (event) =>
|
||||
event.stopPropagation()
|
||||
@navigate -1
|
||||
|
||||
navigate: (direction) ->
|
||||
@cleanUp()
|
||||
@position += direction
|
||||
|
||||
if @position < @clues.length
|
||||
@render()
|
||||
else
|
||||
@onComplete()
|
||||
|
||||
cleanUp: ->
|
||||
clue = @clues[@position]
|
||||
container = $(clue.container)
|
||||
container.removeClass('selected-clue')
|
||||
|
||||
# maybe undo perform
|
||||
|
||||
@el.find('.clue').remove()
|
||||
|
||||
render: ->
|
||||
clue = @clues[@position]
|
||||
container = $(clue.container)
|
||||
container.addClass('selected-clue')
|
||||
|
||||
center =
|
||||
x: container.offset().left + container.width()/2
|
||||
y: container.offset().top + container.height()/2
|
||||
|
||||
@html App.view('layout_ref/clues')
|
||||
headline: clue.headline
|
||||
text: clue.text
|
||||
width: container.outerWidth()
|
||||
height: container.outerHeight()
|
||||
center: center
|
||||
position: @position
|
||||
max: @clues.length
|
||||
|
||||
if clue.action
|
||||
@perform clue.action, container
|
||||
|
||||
@placeWindow(container)
|
||||
|
||||
placeWindow: (container) ->
|
||||
clueWindow = @el.find('.clue-window')
|
||||
|
||||
# see if we can place it above or below target
|
||||
if clueWindow.outerHeight() + container.outerHeight() < $(window).outerHeight()
|
||||
clueWindow.css('left', container.offset().left)
|
||||
|
||||
# below or above ?
|
||||
if container.offset().top + container.outerHeight() + clueWindow.outerHeight() < $(window).outerHeight()
|
||||
# place below
|
||||
clueWindow.css('top', container.offset().top + container.outerHeight())
|
||||
else
|
||||
# place above
|
||||
clueWindow.css('top', container.offset().top - container.outerHeight() - clueWindow.outerHeight())
|
||||
else
|
||||
clueWindow.css('top', container.offset().top)
|
||||
# okay, let's try right or left then
|
||||
if container.offset().left + container.outerWidth() + clueWindow.outerWidth() < $(window).outerWidth()
|
||||
# place right
|
||||
clueWindow.css('left', container.offset().left + container.outerWidth())
|
||||
else
|
||||
# place left
|
||||
clueWindow.css('left', container.offset().left - container.outerWidth() - clueWindow.outerWidth())
|
||||
|
||||
# show window
|
||||
clueWindow.addClass('is-visible')
|
||||
|
||||
|
||||
perform: (action, container) ->
|
||||
eventName = action.substr 0, action.indexOf(' ')
|
||||
selector = action.substr action.indexOf(' ') + 1
|
||||
container.find(selector)[0][eventName]()
|
||||
|
||||
App.Config.set( 'layout_ref/clues', cluesRef, 'Routes' )
|
||||
|
||||
|
||||
|
||||
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
||||
29
app/assets/javascripts/app/views/layout_ref/clues.jst.eco
Normal file
29
app/assets/javascripts/app/views/layout_ref/clues.jst.eco
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<div class="clue">
|
||||
<div class="clue-backdrop" style="background:
|
||||
radial-gradient(
|
||||
ellipse <%= @width + 400 %>px <%= @height + 400 %>px
|
||||
at <%= @center.x %>px <%= @center.y %>px,
|
||||
hsla(202,68%,54%,.4),
|
||||
hsla(202,68%,54%,.8)
|
||||
)
|
||||
"></div>
|
||||
<div class="clue-window">
|
||||
<div class="clue-inner">
|
||||
<div class="clue-header"><%= @headline %></div>
|
||||
<div class="clue-body"><%= @text %></div>
|
||||
<div class="clue-controls">
|
||||
<div class="clue-control">
|
||||
<div class="<% if @position is 0: %>is-disabled <% end %>btn btn--text js-previous"><%- @T( 'Previous' ) %></div>
|
||||
</div>
|
||||
<div class="clue-control clue-count"><%= @position+1 %>/<%= @max %></div>
|
||||
<div class="clue-control">
|
||||
<% if @position+1 is @max: %>
|
||||
<div class="btn btn--text js-next"><%- @T( 'Finish' ) %></div>
|
||||
<% else: %>
|
||||
<div class="btn btn--text js-next"><%- @T( 'Next' ) %></div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
|
||||
<ul>
|
||||
<li><a href="#layout_ref/clues">First Steps (Clues)</a></li>
|
||||
<li><a href="#layout_ref/highlight">Highlight</a></li>
|
||||
<li>Content <a href="#layout_ref/content">Example</a></li>
|
||||
<li>Content + Sidebar Right <a href="#layout_ref/content_sidebar_right">Example</a></li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<% for item in @items: %>
|
||||
<% if item.child: %>
|
||||
<li class="<% if item.class: %><%- item.class %><% end %> dropup <% if @open_tab[item.target] : %>open<% end %>">
|
||||
<a class="list-button dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<% if item.translate: %><%- @Ti( item.name ) %><% else: %><%= item.name %><% end %>">
|
||||
<a class="list-button dropdown-toggle js-action" data-toggle="dropdown" href="<%= item.target %>" title="<% if item.translate: %><%- @Ti( item.name ) %><% else: %><%= item.name %><% end %>">
|
||||
<span class="dropdown-nose"></span>
|
||||
<% if item.class is 'user': %>
|
||||
<span class="js-avatar"></span>
|
||||
|
|
|
|||
|
|
@ -898,6 +898,75 @@ textarea,
|
|||
}
|
||||
}
|
||||
|
||||
.selected-clue {
|
||||
@extend .zIndex-9;
|
||||
}
|
||||
|
||||
.clue {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@extend .zIndex-8;
|
||||
}
|
||||
|
||||
.clue-backdrop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.clue-window {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
padding: 18px;
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.clue-inner {
|
||||
min-width: 260px;
|
||||
padding: 24px 24px 14px;
|
||||
background: white;
|
||||
color: hsl(60,1%,34%);
|
||||
box-shadow:
|
||||
0 8px 17px 0 rgba(0, 0, 0, 0.1),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.clue-controls {
|
||||
background: hsl(210,5%,97%);
|
||||
margin: 24px -24px -14px;
|
||||
padding: 7px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.clue-control {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
|
||||
.btn.is-disabled {
|
||||
opacity: 1;
|
||||
color: hsl(240,5%,83%);
|
||||
}
|
||||
}
|
||||
|
||||
.clue-header {
|
||||
margin-bottom: 7px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.clue-body {
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.form-stacked .checkbox label {
|
||||
color: inherit;
|
||||
font-size: 13px;
|
||||
|
|
@ -1755,6 +1824,7 @@ footer {
|
|||
border-bottom: 1px solid rgba(240, 250, 255, .05);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.search-holder {
|
||||
|
|
|
|||
Loading…
Reference in a new issue