From dbb369acb970b063a33060eb60f1190fc24b8763 Mon Sep 17 00:00:00 2001 From: Benjamin ter Kuile Date: Fri, 27 Jun 2014 16:26:20 +0200 Subject: [PATCH] Better supplier section view --- .../supplier/app/templates/section.emblem | 31 +++++++++---------- .../app/templates/section_tables.emblem | 2 ++ .../supplier/app/templates/table.emblem | 2 +- .../app/views/section_table_view.js.coffee | 2 +- ...s.coffee => section_tables_view.js.coffee} | 4 ++- .../supplier/foundation1/application.js.erb | 4 +++ .../base1-shared/section_tables.css.sass | 22 +++++++++++-- .../supplier/foundation1/_qdashboard.css.sass | 4 ++- .../foundation1/_section_tab_headers.css.sass | 2 ++ wip.md | 2 +- 10 files changed, 52 insertions(+), 23 deletions(-) create mode 100644 app/assets/javascripts/supplier/app/templates/section_tables.emblem rename app/assets/javascripts/supplier/app/views/{section_view.js.coffee => section_tables_view.js.coffee} (83%) diff --git a/app/assets/javascripts/supplier/app/templates/section.emblem b/app/assets/javascripts/supplier/app/templates/section.emblem index 29e986e1..7004479d 100644 --- a/app/assets/javascripts/supplier/app/templates/section.emblem +++ b/app/assets/javascripts/supplier/app/templates/section.emblem @@ -4,7 +4,7 @@ view Qsupplier.App.SectionTabHeaderView context=section .section-manage-tables.pull-right if editmode - .btn-group + /.btn-group /a.btn.dropdown-toggle data-toggle="dropdown" href="#section-background" span Background span.caret @@ -12,19 +12,19 @@ each texture in textures li a{ action setTexture texture } {{texture}} - .btn-group - button.btn.dropdown-toggle data-toggle="dropdown" - span Action - span.caret - ul#section-actions.dropdown-menu - li - a{action addTables} {{t 'section.add_tables.button_label'}} - li - a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}} - li - a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}} - li - a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}} + a.tiny.button.dropdown href="#" data-dropdown="section-action-list" Action + /button.btn.dropdown-toggle data-toggle="dropdown" + span Action + span.caret + ul#section-action-list.f-dropdown data-dropdown-content=true + li + a{action addTables} {{t 'section.add_tables.button_label'}} + li + a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}} + li + a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}} + li + a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}} view Ember.TextField valueBinding="title" class="section-edit-title-field" view Ember.TextField valueBinding="width" class="dimension section-edit-width-field" span x @@ -32,5 +32,4 @@ a.section-normal-mode-button{ action finishEditable }: span else a.section-edit-mode-button{ action makeEditable }: span -each table in tables - view 'Qsupplier.App.SectionTableView' contentBinding="table" +Qsupplier.App.SectionTablesView contentBinding="tables" diff --git a/app/assets/javascripts/supplier/app/templates/section_tables.emblem b/app/assets/javascripts/supplier/app/templates/section_tables.emblem new file mode 100644 index 00000000..0b10c79e --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/section_tables.emblem @@ -0,0 +1,2 @@ +each table in tables + Qsupplier.App.SectionTableView contentBinding="table" diff --git a/app/assets/javascripts/supplier/app/templates/table.emblem b/app/assets/javascripts/supplier/app/templates/table.emblem index 3c4c0392..d01f0c1c 100644 --- a/app/assets/javascripts/supplier/app/templates/table.emblem +++ b/app/assets/javascripts/supplier/app/templates/table.emblem @@ -15,7 +15,7 @@ div class="table-actions table-actions-#{unbound table.id}" a href="suppliers_table_path(@table)" {{t 'section.tables_view.table_actions.got_to_table'}} each user in table.active_list.users img src=user.facebook_image -if editmode +if editmodedisabled .table-settings select option Round diff --git a/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee b/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee index 5ddd9479..22326c4f 100644 --- a/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee +++ b/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee @@ -52,7 +52,7 @@ Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable, #@$('.table-actions .title').remove() content.hide() @$el.on 'click', => - content.toggle() + content.toggle() if @$el.hasClass('occupied') #@$el.qtip #content: #text: content diff --git a/app/assets/javascripts/supplier/app/views/section_view.js.coffee b/app/assets/javascripts/supplier/app/views/section_tables_view.js.coffee similarity index 83% rename from app/assets/javascripts/supplier/app/views/section_view.js.coffee rename to app/assets/javascripts/supplier/app/views/section_tables_view.js.coffee index 08bad4ab..6a0e82ab 100644 --- a/app/assets/javascripts/supplier/app/views/section_view.js.coffee +++ b/app/assets/javascripts/supplier/app/views/section_tables_view.js.coffee @@ -1,5 +1,6 @@ -Qsupplier.App.SectionView = Ember.View.extend DragNDrop.Droppable, +Qsupplier.App.SectionTablesView = Ember.View.extend DragNDrop.Droppable, classNames: ['well', 'section-tables-container', 'section-tables-active'] + templateName: 'section_tables' didInsertElement: -> @$el = $(@get('element')) height = @$el.width() * @get('controller.model.height') / @get('controller.model.width') @@ -12,6 +13,7 @@ Qsupplier.App.SectionView = Ember.View.extend DragNDrop.Droppable, height = @$el.width() * @get('controller.model.height') / @get('controller.model.width') @$el.css('height', height) ).observes('controller.model.height', 'controller.model.width') + tables: (->@get('content')).property('content') didInsertElement: -> # the first observable event is triggered without the container having its dimensions @get('controller.model').notifyPropertyChange('width').notifyPropertyChange('height') diff --git a/app/assets/javascripts/supplier/foundation1/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb index 72bfd6cb..5f2b56e9 100644 --- a/app/assets/javascripts/supplier/foundation1/application.js.erb +++ b/app/assets/javascripts/supplier/foundation1/application.js.erb @@ -1,6 +1,8 @@ //= require jquery //= require jquery_ujs //= require jquery.ui.sortable +//= require vendor/modernizr +//= require foundation //= require js-routes //= require translations //= require qwaiter @@ -18,6 +20,8 @@ var Qstorage = localStorage; $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>); $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>); +$(document).foundation(); + String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); } diff --git a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass b/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass index 40561bac..c969d522 100644 --- a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass +++ b/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass @@ -1,9 +1,27 @@ .section-title font-size: 24px padding: 4px 0px +.section-manage-tables + margin: -32px 6px 4px 6px + min-width: 470px + text-align: right + .section-edit-title-field + display: inline-block + width: 120px + .section-edit-width-field + display: inline-block + width: 40px + .section-edit-height-field + display: inline-block + width: 40px + #section-action-list + text-align: left .section-tables-container - .section-manage-tables - margin: -32px 6px 4px 6px + $section-border: 1px solid black + border-left: $section-border + border-right: $section-border + border-bottom: $section-border + border: $section-border .section-table background-color: #ccc //TODO remove width and height for ember control diff --git a/app/assets/stylesheets/supplier/foundation1/_qdashboard.css.sass b/app/assets/stylesheets/supplier/foundation1/_qdashboard.css.sass index c66ccf21..72271fe7 100644 --- a/app/assets/stylesheets/supplier/foundation1/_qdashboard.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/_qdashboard.css.sass @@ -1,6 +1,8 @@ .dashboard-section-selection float: right - white-space: nowrap + min-width: 124px + select + width: calc(100% - 30px) .active-lists-table width: 100% .mark_list_as_helped diff --git a/app/assets/stylesheets/supplier/foundation1/_section_tab_headers.css.sass b/app/assets/stylesheets/supplier/foundation1/_section_tab_headers.css.sass index 8666d185..76ebf99b 100644 --- a/app/assets/stylesheets/supplier/foundation1/_section_tab_headers.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/_section_tab_headers.css.sass @@ -9,8 +9,10 @@ font-weight: bold background-color: rgba(200,200,200,0.4) color: #333 + margin-bottom: 2px &.active border-bottom-width: 0 + margin-top: 2px &.table-hover, &.table-dragging background-size: 100px background-position: center center diff --git a/wip.md b/wip.md index 558bb8f7..754fb577 100644 --- a/wip.md +++ b/wip.md @@ -44,7 +44,7 @@ General: - search for class btn and replace with font awesome correct styling if needed Bugs: - - New order in supplier main board has no price yet + - Dragging supplier table from one section to the other fails Post release ------------