From a504d4535c9db97c59c38002fe48219768f831aa Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 15 Sep 2014 18:08:23 +0200 Subject: [PATCH] create component tabsSidebar using tabsSidebarSpace as spacer for the body --- .../_application_controller_generic.js.coffee | 24 +- .../controllers/agent_ticket_create.js.coffee | 2 +- .../app/controllers/layout_ref.js.coffee | 22 ++ .../app/controllers/ticket_zoom.js.coffee | 2 +- .../app/views/agent_ticket_create.jst.eco | 318 +++++++++--------- .../app/views/generic/sidebar_tabs.jst.eco | 8 +- .../content_sidebar_tabs_right.jst.eco | 14 +- .../javascripts/app/views/ticket_zoom.jst.eco | 9 +- app/assets/stylesheets/application.css | 4 +- app/assets/stylesheets/layout.css | 4 +- app/assets/stylesheets/zzz.css.erb | 72 ++-- 11 files changed, 240 insertions(+), 239 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee index 6b7aca1a2..a7b4b4dbd 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee @@ -417,15 +417,15 @@ class App.GenericHistory extends App.ControllerModal class App.Sidebar extends App.Controller events: - 'click .sidebar-tabs': 'toggleTab' - 'click .close-sidebar': 'toggleSidebar' + 'click .tabsSidebar-tab': 'toggleTab' + 'click .tabsSidebar-close': 'toggleSidebar' constructor: -> super @render() # get first tab - name = @el.find('.sidebar-tab').first().data('content') + name = @el.find('.tabsSidebar-tab').first().data('content') # activate first tab @toggleTabAction(name) @@ -439,17 +439,17 @@ class App.Sidebar extends App.Controller item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) ) toggleSidebar: -> - $('.content.active > div').toggleClass('state--sidebar-hidden') + $('.content.active .tabsSidebarSpace').toggleClass('is-closed') + $('.content.active .tabsSidebar').toggleClass('is-closed') showSidebar: -> - # show sidebar if not shown - if $('.content.active > div').hasClass('state--sidebar-hidden') - $('.content.active > div').removeClass('state--sidebar-hidden') + $('.content.active .tabsSidebarSpace').removeClass('is-closed') + $('.content.active .tabsSidebar').removeClass('is-closed') toggleTab: (e) -> # get selected tab - name = $(e.target).closest('.sidebar-tab').data('content') + name = $(e.target).closest('.tabsSidebar-tab').data('content') if name @@ -466,10 +466,10 @@ class App.Sidebar extends App.Controller return if !name # remove active state - @el.find('.sidebar-tab').removeClass('active') + @el.find('.tabsSidebar-tab').removeClass('active') # add active state - @el.find('.sidebar-tab[data-content=' + name + ']').addClass('active') + @el.find('.tabsSidebar-tab[data-content=' + name + ']').addClass('active') # hide all content tabs @el.find('.sidebar-content').addClass('hide') @@ -483,7 +483,7 @@ class App.Sidebar extends App.Controller @el.find('.sidebar h2').html(title) # set tab actions - @el.find('.sidebar-tab-actions').html('') + @el.find('.tabsSidebar-tabActions').html('') # add item acctions for item in @items @@ -491,7 +491,7 @@ class App.Sidebar extends App.Controller if item.actions for action in item.actions do (action) => - @el.find('.sidebar-tab-actions').append("
").find(".sidebar-tab-action").last().bind( + @el.find('.tabsSidebar-tabActions').append("
").find(".tabsSidebar-tabAction").last().bind( 'click' (e) => e.stopPropagation() diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee index cea22c336..102a1b283 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee @@ -469,7 +469,7 @@ class Sidebar extends App.Controller } new App.Sidebar( - el: @el.find('.sidebar-holder') + el: @el.find('.tabsSidebar') items: items ) diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee index 983bd4dc2..a614574f5 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee @@ -43,10 +43,32 @@ App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSide class ContentSidebarTabsRight extends App.ControllerContent + elements: + '.tabsSidebar' : 'sidebar' + constructor: -> super @render() + items = [ + head: 'Ticket Settings' + name: 'ticket' + icon: 'message' + , + head: 'Customer' + name: 'customer' + icon: 'person' + , + head: 'Organization' + name: 'organization' + icon: 'group' + ] + + new App.Sidebar( + el: sidebar + items: items + ) + render: -> @html App.view('layout_ref/content_sidebar_tabs_right')() diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index 2ec41b0cb..3c8328b64 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -235,7 +235,7 @@ class App.TicketZoom extends App.Controller } new App.Sidebar( - el: @el.find('.sidebar-holder') + el: @el.find('.tabsSidebar') items: items ) diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco index fbc75db25..b0fd72455 100644 --- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco +++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco @@ -1,174 +1,168 @@ -
-
-
-
+
+
+
+
+

<%- @T( @head ) %>

+
-
-
-

<%- @T( @head ) %>

+
    + +
  • +
    + <%- @T( 'Received Call' ) %> +
    • + +
  • +
    + <%- @T( 'Outbound Call' ) %> +
    • + +
  • + + <%- @T( 'Send E-Mail' ) %> +
    • +
+ +
+ +
+
+ +
+
+
+
+ + +
+ <%- @T( 'Cancel & Go Back' ) %> + +
+
+
+
+
+ +
+
+--> \ No newline at end of file diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco index c5b857797..37a3da5a8 100644 --- a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco +++ b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco @@ -1,8 +1,8 @@

-
-
+
+
@@ -13,9 +13,9 @@ <% end %>
-
+
<% for item in @items: %> -
+
<% end %> diff --git a/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco b/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco index 3622aec19..650043922 100644 --- a/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco @@ -1,5 +1,4 @@ -
- +

content

@@ -13,10 +12,9 @@ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-
-
+
@@ -72,17 +70,17 @@ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit no
-
+
-
+
-
+
-
+
diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco index ecd0ccbc4..c01e67917 100644 --- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco @@ -1,7 +1,7 @@ -
+
-
-
+
+
@@ -26,10 +26,9 @@
-
-
+
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index ac0ce43ba..ae832a7a7 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,9 +10,11 @@ *= require ./bootstrap-tokenfield.css *= require ./noty_theme_twitter.css *= require ./sew.css - *= require ./layout.css *= require ./zzz.css *= require ./fonts/fira-sans.css + *= require ./layout.css + * + * layout.css after zzz.css because .fix's position absolute should overwrite others * *= require_tree ./custom/ * diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index 4edcf2028..6097e3a06 100755 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -59,8 +59,8 @@ position: absolute; top: 0; left: 0; - height: 100%; - width: 100%; + bottom: 0; + right: 0; } body.fit { diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index e3ed93080..0862f1e32 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -2322,31 +2322,11 @@ footer { appearance: none; } -.ticket-zoom { - overflow: hidden; +.ticketZoom { background: #f8f9fa; } -.ticket-zoom .main { - right: 0; - left: 0; - top: 0; - bottom: 0; - margin-right: 280px; - position: absolute; - transition: 500ms; -} - -.ticket-zoom .flex-overflow { - overflow: hidden; - min-height: 100%; -} - - .ticket-zoom.state--sidebar-hidden .main { - margin-right: 0; - } - -.ticket-zoom .page-header { +.ticketZoom .page-header { margin-top: 62px; margin-bottom: 46px; border-bottom: none; @@ -2811,16 +2791,26 @@ footer { border-radius: 0 4px 4px 0; } -.ticket-zoom .sidebar { +.tabsSidebarSpace { + padding-right: 62px !important; + margin-right: 280px; + transition: 500ms; +} + +.tabsSidebarSpace.is-closed { + margin-right: 0; +} + +.tabsSidebar .sidebar { width: 280px; border-left: 1px solid #e6e6e6; } - .ticket-zoom .sidebar h2 { + .tabsSidebar .sidebar h2 { margin: 5px 0 0; } - .close-sidebar { + .tabsSidebar-close { padding: 20px; margin: -15px; } @@ -2833,7 +2823,7 @@ footer { 0 -4px rgba(0,0,0,.005) inset; } - .sidebar-holder { + .tabsSidebar { position: absolute; right: 0; top: 0; @@ -2841,28 +2831,24 @@ footer { transition: 500ms; } - .ticket-zoom.state--sidebar-hidden .sidebar-holder { + .tabsSidebar.is-closed { -webkit-transform: translateX(280px); transform: translateX(280px); } - .sidebar-tabs { + .tabsSidebar-tabs { position: absolute; left: -55px; top: 0; bottom: 0; } - .sidebar-tabs--spacing { - padding-right: 62px; - } - .test { position: absolute; width: 100%; } - .sidebar-tab { + .tabsSidebar-tab { width: 56px; height: 60px; background: hsl(197,20%,93%); @@ -2871,7 +2857,7 @@ footer { border-top: 1px solid hsl(202,12%,87%); } - .sidebar-tab.is-changed:before { + .tabsSidebar-tab.is-changed:before { position: absolute; content: ''; left: -3px; @@ -2884,20 +2870,20 @@ footer { box-shadow: 0 0 0 2px hsl(210,17%,98%); } - .sidebar-tab:first-child { + .tabsSidebar-tab:first-child { border-top-left-radius: 8px; border-top: none; } - .sidebar-tab:last-child { + .tabsSidebar-tab:last-child { border-bottom-left-radius: 8px; } - .sidebar-tab .icon { + .tabsSidebar-tab .icon { opacity: 0.3; } - .sidebar-tab.active .icon { + .tabsSidebar-tab.active .icon { opacity: 1; } @@ -2937,17 +2923,17 @@ footer { opacity: 0.5; } -.create-new .main { +.newTicket { padding: 34px; } - .create-new .sidebar { + .newTicket .sidebar { width: 290px; } - .create-new .form-control:not(:focus):not(.focus) { + .newTicket .form-control:not(:focus):not(.focus) { border-color: hsl(0,0%,90%); } - .create-new .subtle-link { + .newTicket .subtle-link { color: hsl(0,0%,89%); } @@ -3065,7 +3051,7 @@ footer { margin-top: 20px; } -.create-new .templates { +.newTicket .templates { border-bottom: 1px solid hsl(240,4%,95%); padding-bottom: 14px; }