bterkuile/ember-cli-dunlop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add better class names to modals to allow for better customized css targeting

Browse Source
This commit is contained in:
Benjamin ter Kuile
2018-12-06 09:45:05 -05:00
parent 1ee8ab64a0
commit 9881c5d7d4
9 changed files with 24 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addon/components/user-filters-manager.coffee
+4
View File
@@ -1,9 +1,13 @@
import Ember from 'ember'
export default Ember.Component.extend
tagName: 'button'
scope_key: null
content: null
classNames: 'user-filters-manager ui icon button'
classNameBindings: ['class']
class: 'tiny black'
actions:
open_modal: ->
@modal 'user-filters-manager/modal', scope_key: @get('scope_key'), content: @get('content'), title_path: 'user_filters.modal_title'
click: -> @send 'open_modal'
addon/mixins/application-route.coffee
+1
View File
@@ -163,6 +163,7 @@ export default Ember.Mixin.create ApplicationRouteMixin,
return
controller.set 'partialName', partialPath
@incrementProperty 'router.globals.modals_counter'
controller.privateWillOpenModal() # setup expected attributes to be used in willOpenModal
controller.willOpenModal() # can be implemented to setup stuff before rendering and hooks
@render 'modals/layout',
into: 'application'
addon/mixins/modal-base.coffee
+8 -1
View File
@@ -5,6 +5,13 @@ export default Ember.Component.extend
layoutName: 'modals/layout'
willOpenModal: -> # can be implemented, is fired after loading attributes, before rendering
is_saving: false # temporary state to prevent double triggering
class: '' # manual set or component name derived
component_name_based_class: ''
privateWillOpenModal: ->
component_name = @toString().replace(/.*(controller|component):/, '').replace(/::ember.*$/, '').replace(/\W+$/, '')
@set 'component_name', component_name
@set 'component_name_based_class', '' + @get('class') + ' ' + component_name.replace(/\//g, ' modal-')
title: (->
# return title if directly set by options
return @get('modal_options.title') if @get('modal_options.title')
@@ -30,7 +37,7 @@ export default Ember.Component.extend
return partialNameTranslation.htmlSafe() if partialNameTranslation = tspan(partial_title_path, translation_params)
# @toString() => <frontend@component:workflow-action-definition/modals/edit-workflow-action-definition::ember873>
underscored = @toString().replace(/.*(controller|component):/, '').replace(/::ember.*$/, '').replace(/\W+$/, '').underscore().replace(/\//g, '.')
underscored = component_name.underscore().replace(/\//g, '.')
return convention_translation.htmlSafe() if convention_translation = tspan("#{underscored}.title", translation_params)
# Return a kind of humanized version of the title
app/components/user-filters-manager/modal.coffee
-81
View File
@@ -1,81 +0,0 @@
import ModalBase from 'ember-cli-dunlop/mixins/modal-base'
import Ember from 'ember'
{set} = Ember
relative_matcher = /(start of|end of) (day|week|month)/
export default ModalBase.extend
scope_key: Ember.computed.alias 'modal_options.scope_key'
content: Ember.computed.alias 'modal_options.content'
error: ''
new_filter_name_blank: Ember.computed 'new_filter_name', ->
return true unless name = @get('new_filter_name')
return true unless typeof name is 'string'
return true if name.match /^\s*$/
false
willOpenModal: ->
now = moment()
if now.day() is 1
@set 'cannot_create_filter_message', t('user_filters.cannot_create_on_monday')
else if now.format('D') is '1'
@set 'cannot_create_filter_message', t('user_filters.cannot_create_on_first_day_of_month')
user_filters: Ember.computed 'scope_key', ->
return Ember.A() unless scope_key = @get('scope_key')
@store.peekAll('dunlop/user-filter').filterBy('scope_key', scope_key).sortBy('name')
actions:
apply_filter: (user_filter) ->
return @set('error', 'no content given') unless content = @get('content')
return @set('error', 'content has no filters object to manipulate') unless typeof content.filters is 'object'
Object.keys(content.filters).forEach (key) -> delete content.filters[key]
for key, value of user_filter.get('filters')
if typeof value is 'string' && match = value.match relative_matcher
boundary_function = if match[1] is 'end of' then 'endOf' else 'startOf'
period_name = switch match[2]
when 'week' then 'isoWeek'
else match[2]
filter_value = moment()[boundary_function](period_name)
else
filter_value = switch value
when 'today'
boundary_function = if key.match(/_lt/) then 'endOf' else 'startOf'
moment()[boundary_function]('day')
else value
set content.filters, key, filter_value
content.reload() if typeof content.reload is 'function'
@set 'globals.flash_message', "Filter #{user_filter.get('name')}"
@send 'close'
create_new_filter: ->
return @set('error', 'no content given') unless content = @get('content')
return @set('error', 'content has no filters object to manipulate') unless typeof content.filters is 'object'
return @set('error', 'Current given content filters do not respond to toProperties method') unless typeof content.filters.toProperties is 'function'
filters = content.filters.toProperties()
today_date_string = moment().format('YYYY-MM-DD')
start_of_week_string = moment().startOf('isoWeek').format('YYYY-MM-DD')
end_of_week_string = moment().endOf('isoWeek').format('YYYY-MM-DD')
start_of_month_string = moment().startOf('month').format('YYYY-MM-DD')
end_of_month_string = moment().endOf('month').format('YYYY-MM-DD')
filter_storage = {}
for key, value of content.filters.toProperties()
if typeof value is 'string' && match = value.match(/^(\d\d\d\d-\d\d-\d\d)/)
date_value = switch match[1]
when today_date_string then 'today'
when start_of_week_string then 'start of week'
when end_of_week_string then 'end of week'
when start_of_month_string then 'start of month'
when end_of_month_string then 'end of month'
else value
filter_storage[key] = date_value
# use relative notation if can be inferred
else
# literal copy
filter_storage[key] = value
new_filter = @store.createRecord 'dunlop/user-filter',
name: @get('new_filter_name')
scope_key: @get('scope_key')
filters: filter_storage
new_filter.save().then =>
@store.query('dunlop/user-filter', q: {scope_key_eq: @get('scope_key')})
@get('content').reload()
@send 'close'
app/templates/components/user-filters-manager.emblem
-1
View File
@@ -1,3 +1,2 @@
button.ui.icon.button class=class click='open_modal'
i.filter.icon
= yield
app/templates/components/user-filters-manager/-modal.emblem
+4 -9
View File
@@ -3,14 +3,7 @@ if error
.ui.negative.message= error
.ui.middle.aligned.divided.list
each user_filters as |user_filter|
li.item
.right.floated.content
button.ui.tiny.secondary.button{action 'apply_filter' user_filter}= t 'general.apply'
.content
if user_filter.is_default
.header= user_filter.name
else
= user_filter.name
user-filters-manager/filter-row apply_filter=(action 'apply_filter') user_filter=user_filter
.ui.horizontal.divider= t 'user_filters.create_new_filter_title'
if cannot_create_filter_message
.ui.visible.warning.message= cannot_create_filter_message
@@ -18,4 +11,6 @@ else
.ui.action.input
= input value=new_filter_name
button.ui.primary.button disabled=new_filter_name_blank click='create_new_filter'
span= t 'user_filter.create_new_filter_button'
span= t 'user_filters.create_new_filter_button'
.modal-actions.sticky
button.ui.button.modal-save.right{action 'close'}= t 'general.close'
app/templates/modals/layout.emblem
+1 -1
View File
@@ -1,5 +1,5 @@
.overlay{action "closeOnOverlay"}
.modal{action "modalClick" bubbles=false preventDefault=false}
.modal class=component_name_based_class click='"modalClick" bubbles=false preventDefault=false'
.modal-header
h3.flush--top= title
.ui.divider
tests/dummy/app/i18n/translations.coffee
+1
View File
@@ -77,3 +77,4 @@ window.$translations =
create_new_filter_button: '${general.create}'
cannot_create_on_monday: 'Creating a filter on Monday is ambiguous since the smart relative time feature cannot distinguish today from the start of the week'
cannot_create_on_first_day_of_month: 'Creating a filter on the first day of the month is ambiguous since the smart relative time feature cannot distinguish today from the start of the month'
make_default: 'Make default'
tests/dummy/mirage/config.coffee
+4
View File
@@ -17,6 +17,10 @@ config = ->
attributes = JSON.parse(request.requestBody)['dunlop/user_filter']
schema.dunlopUserFilters.create(attributes)
@delete '/dunlop/user_filters/:id', (schema, request) ->
model = schema.dunlopUserFilters.find(request.params.id)
null
# These comments are here to help you get started. Feel free to delete them.
###