From afd87e3caa1fedbe8fe5dbaefa485fee1ed85c71 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Sun, 27 Aug 2017 22:31:24 +0200 Subject: many custom fields model and UI enhancements --- client/components/cards/cardDetails.jade | 15 +++++++++++++++ client/components/cards/cardDetails.js | 15 +++++++++++++++ 2 files changed, 30 insertions(+) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 09e0532c..ccb3ae97 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -107,6 +107,7 @@ template(name="cardDetailsActionsPopup") li: a.js-members {{_ 'card-edit-members'}} li: a.js-labels {{_ 'card-edit-labels'}} li: a.js-attachments {{_ 'card-edit-attachments'}} + li: a.js-custom-fields {{_ 'card-edit-custom-fields'}} li: a.js-start-date {{_ 'editCardStartDatePopup-title'}} li: a.js-due-date {{_ 'editCardDueDatePopup-title'}} hr @@ -143,6 +144,20 @@ template(name="cardMembersPopup") if isCardMember i.fa.fa-check +template(name="cardCustomFieldsPopup") + ul.pop-over-list + each board.customFields + li.item(class="") + a.name.js-select-field(href="#") + span.full-name + = name + if isCardMember + i.fa.fa-check + hr + a.quiet-button.full.js-configure-custom-fields + i.fa.fa-cog + span {{_ 'configure-custom-fields'}} + template(name="cardMorePopup") p.quiet span.clearfix diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 7c6c3ce7..f972424f 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -154,6 +154,7 @@ Template.cardDetailsActionsPopup.events({ 'click .js-members': Popup.open('cardMembers'), 'click .js-labels': Popup.open('cardLabels'), 'click .js-attachments': Popup.open('cardAttachments'), + 'click .js-custom-fields': Popup.open('cardCustomFields'), 'click .js-start-date': Popup.open('editCardStartDate'), 'click .js-due-date': Popup.open('editCardDueDate'), 'click .js-move-card': Popup.open('moveCard'), @@ -196,6 +197,20 @@ Template.editCardTitleForm.events({ }, }); +Template.cardCustomFieldsPopup.events({ + 'click .js-select-field'(evt) { + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this.customFieldId; + card.toggleCustomField(customFieldId); + evt.preventDefault(); + }, + 'click .js-configure-custom-fields'(evt) { + EscapeActions.executeUpTo('detailsPane'); + Sidebar.setView('customFields'); + evt.preventDefault(); + } +}); + Template.moveCardPopup.events({ 'click .js-select-list' () { // XXX We should *not* get the currentCard from the global state, but -- cgit v1.2.3-1-g7c22 From d87191f17ee1cd49def9ca5a4d3d1568b041e6a2 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Wed, 30 Aug 2017 02:54:54 +0200 Subject: card model and card ui preparation for custom fields --- client/components/cards/cardDetails.jade | 3 +++ client/components/cards/cardDetails.js | 2 +- client/components/cards/cardDetails.styl | 5 +++-- 3 files changed, 7 insertions(+), 3 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index ccb3ae97..7cb4f8d8 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -45,6 +45,9 @@ template(name="cardDetails") h3.card-details-item-title {{_ 'card-due'}} +cardDueDate + each customFields + .card-details-item.card-details-item-customfield + h3.card-details-item-title {{_ 'some-title' }} //- XXX We should use "editable" to avoid repetiting ourselves if canModifyCard diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index f972424f..1cc39492 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -200,7 +200,7 @@ Template.editCardTitleForm.events({ Template.cardCustomFieldsPopup.events({ 'click .js-select-field'(evt) { const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this.customFieldId; + const customFieldId = this._id; card.toggleCustomField(customFieldId); evt.preventDefault(); }, diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index f209862c..5ad0c9f5 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -70,6 +70,7 @@ .card-details-items display: flex + flex-wrap: wrap margin: 15px 0 .card-details-item @@ -80,8 +81,8 @@ &.card-details-item-members, &.card-details-item-start, &.card-details-item-due - width: 50% - flex-shrink: 1 + max-width: 50% + flex-grow: 1 .card-details-item-title font-size: 14px -- cgit v1.2.3-1-g7c22 From 733b14dcd8f4b94047ffd444e7ab7ded49c245c0 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Wed, 30 Aug 2017 03:23:57 +0200 Subject: card model and card ui preparation for custom fields #2 --- client/components/cards/cardDetails.styl | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 5ad0c9f5..c981e2a2 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -71,16 +71,17 @@ .card-details-items display: flex flex-wrap: wrap - margin: 15px 0 + margin: 0 0 15px .card-details-item - margin-right: 0.5em + margin: 15px 0.5em 0 0 &:last-child margin-right: 0 &.card-details-item-labels, &.card-details-item-members, &.card-details-item-start, - &.card-details-item-due + &.card-details-item-due, + &.card-details-item-customfield max-width: 50% flex-grow: 1 -- cgit v1.2.3-1-g7c22 From 6ff89b43b61ace7ea26d50f091ea6b714fa79c84 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Tue, 5 Sep 2017 02:34:18 +0200 Subject: show custom fields on cards but still with dummy value --- client/components/cards/cardCustomFields.jade | 23 +++++++++++++++ client/components/cards/cardCustomFields.js | 41 +++++++++++++++++++++++++++ client/components/cards/cardDetails.jade | 20 +++---------- client/components/cards/cardDetails.js | 14 --------- 4 files changed, 68 insertions(+), 30 deletions(-) create mode 100644 client/components/cards/cardCustomFields.jade create mode 100644 client/components/cards/cardCustomFields.js (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.jade b/client/components/cards/cardCustomFields.jade new file mode 100644 index 00000000..3c885b93 --- /dev/null +++ b/client/components/cards/cardCustomFields.jade @@ -0,0 +1,23 @@ +template(name="cardCustomFieldsPopup") + ul.pop-over-list + each board.customFields + li.item(class="") + a.name.js-select-field(href="#") + span.full-name + = name + if isCardMember + i.fa.fa-check + hr + a.quiet-button.full.js-configure-custom-fields + i.fa.fa-cog + span {{_ 'configure-custom-fields'}} + +template(name="cardCustomFieldText") + if canModifyCard + .item-title.js-open-inlined-form.is-editable + if value + = value + else + | {{_ 'edit'}} + else + .item-title {{value}} \ No newline at end of file diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js new file mode 100644 index 00000000..73dda02e --- /dev/null +++ b/client/components/cards/cardCustomFields.js @@ -0,0 +1,41 @@ +Template.cardCustomFieldsPopup.events({ + 'click .js-select-field'(evt) { + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this._id; + card.toggleCustomField(customFieldId); + evt.preventDefault(); + }, + 'click .js-configure-custom-fields'(evt) { + EscapeActions.executeUpTo('detailsPane'); + Sidebar.setView('customFields'); + evt.preventDefault(); + } +}); + +const CardCustomField = BlazeComponent.extendComponent({ + template() { + return 'cardCustomFieldText'; + }, + + onCreated() { + const self = this; + self.date = ReactiveVar(); + self.now = ReactiveVar(moment()); + }, + + value() { + return "this is the value"; + }, + + showISODate() { + return this.date.get().toISOString(); + }, + + events() { + return [{ + 'click .js-edit-date': Popup.open('editCardStartDate'), + }]; + }, +}); + +CardCustomField.register('cardCustomField'); \ No newline at end of file diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 7cb4f8d8..f72abe6d 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -45,9 +45,11 @@ template(name="cardDetails") h3.card-details-item-title {{_ 'card-due'}} +cardDueDate - each customFields + each customFieldsWD .card-details-item.card-details-item-customfield - h3.card-details-item-title {{_ 'some-title' }} + h3.card-details-item-title + = definition.name + +cardCustomField //- XXX We should use "editable" to avoid repetiting ourselves if canModifyCard @@ -147,20 +149,6 @@ template(name="cardMembersPopup") if isCardMember i.fa.fa-check -template(name="cardCustomFieldsPopup") - ul.pop-over-list - each board.customFields - li.item(class="") - a.name.js-select-field(href="#") - span.full-name - = name - if isCardMember - i.fa.fa-check - hr - a.quiet-button.full.js-configure-custom-fields - i.fa.fa-cog - span {{_ 'configure-custom-fields'}} - template(name="cardMorePopup") p.quiet span.clearfix diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 1cc39492..8d5c478d 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -197,20 +197,6 @@ Template.editCardTitleForm.events({ }, }); -Template.cardCustomFieldsPopup.events({ - 'click .js-select-field'(evt) { - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this._id; - card.toggleCustomField(customFieldId); - evt.preventDefault(); - }, - 'click .js-configure-custom-fields'(evt) { - EscapeActions.executeUpTo('detailsPane'); - Sidebar.setView('customFields'); - evt.preventDefault(); - } -}); - Template.moveCardPopup.events({ 'click .js-select-list' () { // XXX We should *not* get the currentCard from the global state, but -- cgit v1.2.3-1-g7c22 From caad952bc1b29bb925c1347a14daa5d1ec8ada81 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Thu, 14 Sep 2017 00:50:05 +0200 Subject: text custom fields are now editable using inlinedForm --- client/components/cards/cardCustomFields.jade | 20 +++++++++++++------- client/components/cards/cardCustomFields.js | 21 ++++++++++++++++++++- 2 files changed, 33 insertions(+), 8 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.jade b/client/components/cards/cardCustomFields.jade index 3c885b93..6515aa79 100644 --- a/client/components/cards/cardCustomFields.jade +++ b/client/components/cards/cardCustomFields.jade @@ -5,7 +5,7 @@ template(name="cardCustomFieldsPopup") a.name.js-select-field(href="#") span.full-name = name - if isCardMember + if hasCustomField i.fa.fa-check hr a.quiet-button.full.js-configure-custom-fields @@ -14,10 +14,16 @@ template(name="cardCustomFieldsPopup") template(name="cardCustomFieldText") if canModifyCard - .item-title.js-open-inlined-form.is-editable - if value + +inlinedForm(classNames="js-card-customfield-text") + +editor(autofocus=true) = value - else - | {{_ 'edit'}} - else - .item-title {{value}} \ No newline at end of file + .edit-controls.clearfix + button.primary(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + else + a.js-open-inlined-form + if value + +viewer + = value + else + | {{_ 'edit'}} \ No newline at end of file diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index 73dda02e..7009dede 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -1,3 +1,11 @@ +Template.cardCustomFieldsPopup.helpers({ + hasCustomField() { + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this._id; + return card.customFieldIndex(customFieldId) > -1; + }, +}); + Template.cardCustomFieldsPopup.events({ 'click .js-select-field'(evt) { const card = Cards.findOne(Session.get('currentCard')); @@ -24,7 +32,7 @@ const CardCustomField = BlazeComponent.extendComponent({ }, value() { - return "this is the value"; + return this.data().value; }, showISODate() { @@ -33,9 +41,20 @@ const CardCustomField = BlazeComponent.extendComponent({ events() { return [{ + 'submit .js-card-customfield-text'(evt) { + evt.preventDefault(); + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this.data()._id; + const value = this.currentComponent().getValue(); + card.setCustomField(customFieldId,value); + }, 'click .js-edit-date': Popup.open('editCardStartDate'), }]; }, + + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, }); CardCustomField.register('cardCustomField'); \ No newline at end of file -- cgit v1.2.3-1-g7c22 From 3753337d60e17e5e72ec071aa4a1b28e36297d15 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Mon, 18 Sep 2017 00:46:17 +0200 Subject: dropdown items --- client/components/cards/cardCustomFields.jade | 29 +++++++++++-- client/components/cards/cardCustomFields.js | 62 +++++++++++++++++++-------- 2 files changed, 71 insertions(+), 20 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.jade b/client/components/cards/cardCustomFields.jade index 6515aa79..9e9f7d84 100644 --- a/client/components/cards/cardCustomFields.jade +++ b/client/components/cards/cardCustomFields.jade @@ -8,11 +8,14 @@ template(name="cardCustomFieldsPopup") if hasCustomField i.fa.fa-check hr - a.quiet-button.full.js-configure-custom-fields + a.quiet-button.full.js-settings i.fa.fa-cog - span {{_ 'configure-custom-fields'}} + span {{_ 'settings'}} -template(name="cardCustomFieldText") +template(name="cardCustomField") + +Template.dynamic(template=getTemplate) + +template(name="cardCustomField-text") if canModifyCard +inlinedForm(classNames="js-card-customfield-text") +editor(autofocus=true) @@ -25,5 +28,25 @@ template(name="cardCustomFieldText") if value +viewer = value + else + | {{_ 'edit'}} + +template(name="cardCustomField-dropdown") + if canModifyCard + +inlinedForm(classNames="js-card-customfield-dropdown") + select.inline + each items + if($eq data.value this._id) + option(value=_id selected="selected") {{name}} + else + option(value=_id) {{name}} + .edit-controls.clearfix + button.primary(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + else + a.js-open-inlined-form + if value + +viewer + = selectedItem else | {{_ 'edit'}} \ No newline at end of file diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index 7009dede..f9fa760c 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -13,7 +13,7 @@ Template.cardCustomFieldsPopup.events({ card.toggleCustomField(customFieldId); evt.preventDefault(); }, - 'click .js-configure-custom-fields'(evt) { + 'click .js-settings'(evt) { EscapeActions.executeUpTo('detailsPane'); Sidebar.setView('customFields'); evt.preventDefault(); @@ -21,23 +21,25 @@ Template.cardCustomFieldsPopup.events({ }); const CardCustomField = BlazeComponent.extendComponent({ - template() { - return 'cardCustomFieldText'; + + getTemplate() { + return 'cardCustomField-' + this.data().definition.type; }, onCreated() { const self = this; - self.date = ReactiveVar(); - self.now = ReactiveVar(moment()); }, - value() { - return this.data().value; + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); }, +}); +CardCustomField.register('cardCustomField'); - showISODate() { - return this.date.get().toISOString(); - }, +(class extends CardCustomField { + + onCreated() { + } events() { return [{ @@ -48,13 +50,39 @@ const CardCustomField = BlazeComponent.extendComponent({ const value = this.currentComponent().getValue(); card.setCustomField(customFieldId,value); }, - 'click .js-edit-date': Popup.open('editCardStartDate'), }]; - }, + } - canModifyCard() { - return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); - }, -}); +}).register('cardCustomField-text'); + +(class extends CardCustomField { + + onCreated() { + this._items = this.data().definition.settings.dropdownItems; + this.items = this._items.slice(0); + this.items.unshift({ + _id: "", + name: TAPi18n.__('custom-field-dropdown-none') + }); + } + + selectedItem() { + const selected = this._items.find((item) => { + return item._id == this.data().value; + }); + return (selected) ? selected.name : TAPi18n.__('custom-field-dropdown-unknown'); + } + + events() { + return [{ + 'submit .js-card-customfield-dropdown'(evt) { + evt.preventDefault(); + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this.data()._id; + const value = this.find('select').value; + card.setCustomField(customFieldId,value); + }, + }]; + } -CardCustomField.register('cardCustomField'); \ No newline at end of file +}).register('cardCustomField-dropdown'); \ No newline at end of file -- cgit v1.2.3-1-g7c22 From 8b16955cc27b29ae507be084adccc4fad61b05ef Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Sat, 14 Oct 2017 01:38:25 +0200 Subject: number + date fields --- client/components/cards/cardCustomFields.jade | 24 ++++++ client/components/cards/cardCustomFields.js | 103 ++++++++++++++++++++++++-- client/components/cards/cardDate.jade | 16 ---- client/components/cards/cardDate.js | 91 +---------------------- client/components/cards/cardDate.styl | 19 ----- 5 files changed, 123 insertions(+), 130 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.jade b/client/components/cards/cardCustomFields.jade index 9e9f7d84..65081e3b 100644 --- a/client/components/cards/cardCustomFields.jade +++ b/client/components/cards/cardCustomFields.jade @@ -31,6 +31,30 @@ template(name="cardCustomField-text") else | {{_ 'edit'}} +template(name="cardCustomField-number") + if canModifyCard + +inlinedForm(classNames="js-card-customfield-number") + input(type="number" value=data.value) + .edit-controls.clearfix + button.primary(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + else + a.js-open-inlined-form + if value + = value + else + | {{_ 'edit'}} + +template(name="cardCustomField-date") + if canModifyCard + a.js-edit-date(title="{{showTitle}}" class="{{classes}}") + if value + div.card-date + time(datetime="{{showISODate}}") + | {{showDate}} + else + | {{_ 'edit'}} + template(name="cardCustomField-dropdown") if canModifyCard +inlinedForm(classNames="js-card-customfield-dropdown") diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index f9fa760c..e014de4a 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -20,6 +20,7 @@ Template.cardCustomFieldsPopup.events({ } }); +// cardCustomField const CardCustomField = BlazeComponent.extendComponent({ getTemplate() { @@ -28,6 +29,8 @@ const CardCustomField = BlazeComponent.extendComponent({ onCreated() { const self = this; + self.card = Cards.findOne(Session.get('currentCard')); + self.customFieldId = this.data()._id; }, canModifyCard() { @@ -36,28 +39,118 @@ const CardCustomField = BlazeComponent.extendComponent({ }); CardCustomField.register('cardCustomField'); +// cardCustomField-text (class extends CardCustomField { onCreated() { + super.onCreated(); } events() { return [{ 'submit .js-card-customfield-text'(evt) { evt.preventDefault(); - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this.data()._id; const value = this.currentComponent().getValue(); - card.setCustomField(customFieldId,value); + this.card.setCustomField(this.customFieldId, value); }, }]; } }).register('cardCustomField-text'); +// cardCustomField-number (class extends CardCustomField { onCreated() { + super.onCreated(); + } + + events() { + return [{ + 'submit .js-card-customfield-number'(evt) { + evt.preventDefault(); + const value = parseInt(this.find('input').value); + this.card.setCustomField(this.customFieldId, value); + }, + }]; + } + +}).register('cardCustomField-number'); + +// cardCustomField-date +(class extends CardCustomField { + + onCreated() { + super.onCreated(); + const self = this; + self.date = ReactiveVar(); + self.now = ReactiveVar(moment()); + window.setInterval(() => { + self.now.set(moment()); + }, 60000); + + self.autorun(() => { + self.date.set(moment(self.data().value)); + }); + } + + showDate() { + // this will start working once mquandalle:moment + // is updated to at least moment.js 2.10.5 + // until then, the date is displayed in the "L" format + return this.date.get().calendar(null, { + sameElse: 'llll', + }); + } + + showISODate() { + return this.date.get().toISOString(); + } + + classes() { + if (this.date.get().isBefore(this.now.get(), 'minute') && + this.now.get().isBefore(this.data().value)) { + return 'current'; + } + return ''; + } + + showTitle() { + return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`; + } + + events() { + return [{ + 'click .js-edit-date': Popup.open('cardCustomField-date'), + }]; + } + +}).register('cardCustomField-date'); + +// cardCustomField-datePopup +(class extends DatePicker { + onCreated() { + super.onCreated(); + const self = this; + self.card = Cards.findOne(Session.get('currentCard')); + self.customFieldId = this.data()._id; + this.data().value && this.date.set(moment(this.data().value)); + } + + _storeDate(date) { + this.card.setCustomField(this.customFieldId, date); + } + + _deleteDate() { + this.card.setCustomField(this.customFieldId, ''); + } +}).register('cardCustomField-datePopup'); + +// cardCustomField-dropdown +(class extends CardCustomField { + + onCreated() { + super.onCreated(); this._items = this.data().definition.settings.dropdownItems; this.items = this._items.slice(0); this.items.unshift({ @@ -77,10 +170,8 @@ CardCustomField.register('cardCustomField'); return [{ 'submit .js-card-customfield-dropdown'(evt) { evt.preventDefault(); - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this.data()._id; const value = this.find('select').value; - card.setCustomField(customFieldId,value); + this.card.setCustomField(this.customFieldId, value); }, }]; } diff --git a/client/components/cards/cardDate.jade b/client/components/cards/cardDate.jade index 525f27ed..2e447506 100644 --- a/client/components/cards/cardDate.jade +++ b/client/components/cards/cardDate.jade @@ -1,19 +1,3 @@ -template(name="editCardDate") - .edit-card-date - form.edit-date - .fields - .left - label(for="date") {{_ 'date'}} - input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus) - .right - label(for="time") {{_ 'time'}} - input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat) - .js-datepicker - if error.get - .warning {{_ error.get}} - button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}} - button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}} - template(name="dateBadge") if canModifyCard a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}") diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js index 3f69f384..09a6761b 100644 --- a/client/components/cards/cardDate.js +++ b/client/components/cards/cardDate.js @@ -1,91 +1,4 @@ // Edit start & due dates -const EditCardDate = BlazeComponent.extendComponent({ - template() { - return 'editCardDate'; - }, - - onCreated() { - this.error = new ReactiveVar(''); - this.card = this.data(); - this.date = new ReactiveVar(moment.invalid()); - }, - - onRendered() { - const $picker = this.$('.js-datepicker').datepicker({ - todayHighlight: true, - todayBtn: 'linked', - language: TAPi18n.getLanguage(), - }).on('changeDate', function(evt) { - this.find('#date').value = moment(evt.date).format('L'); - this.error.set(''); - this.find('#time').focus(); - }.bind(this)); - - if (this.date.get().isValid()) { - $picker.datepicker('update', this.date.get().toDate()); - } - }, - - showDate() { - if (this.date.get().isValid()) - return this.date.get().format('L'); - return ''; - }, - showTime() { - if (this.date.get().isValid()) - return this.date.get().format('LT'); - return ''; - }, - dateFormat() { - return moment.localeData().longDateFormat('L'); - }, - timeFormat() { - return moment.localeData().longDateFormat('LT'); - }, - - events() { - return [{ - 'keyup .js-date-field'() { - // parse for localized date format in strict mode - const dateMoment = moment(this.find('#date').value, 'L', true); - if (dateMoment.isValid()) { - this.error.set(''); - this.$('.js-datepicker').datepicker('update', dateMoment.toDate()); - } - }, - 'keyup .js-time-field'() { - // parse for localized time format in strict mode - const dateMoment = moment(this.find('#time').value, 'LT', true); - if (dateMoment.isValid()) { - this.error.set(''); - } - }, - 'submit .edit-date'(evt) { - evt.preventDefault(); - - // if no time was given, init with 12:00 - const time = evt.target.time.value || moment(new Date().setHours(12, 0, 0)).format('LT'); - - const dateString = `${evt.target.date.value} ${time}`; - const newDate = moment(dateString, 'L LT', true); - if (newDate.isValid()) { - this._storeDate(newDate.toDate()); - Popup.close(); - } - else { - this.error.set('invalid-date'); - evt.target.date.focus(); - } - }, - 'click .js-delete-date'(evt) { - evt.preventDefault(); - this._deleteDate(); - Popup.close(); - }, - }]; - }, -}); - Template.dateBadge.helpers({ canModifyCard() { return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); @@ -93,7 +6,7 @@ Template.dateBadge.helpers({ }); // editCardStartDatePopup -(class extends EditCardDate { +(class extends DatePicker { onCreated() { super.onCreated(); this.data().startAt && this.date.set(moment(this.data().startAt)); @@ -109,7 +22,7 @@ Template.dateBadge.helpers({ }).register('editCardStartDatePopup'); // editCardDueDatePopup -(class extends EditCardDate { +(class extends DatePicker { onCreated() { super.onCreated(); this.data().dueAt && this.date.set(moment(this.data().dueAt)); diff --git a/client/components/cards/cardDate.styl b/client/components/cards/cardDate.styl index 1631baa5..87a3ed25 100644 --- a/client/components/cards/cardDate.styl +++ b/client/components/cards/cardDate.styl @@ -1,22 +1,3 @@ -.edit-card-date - .fields - .left - width: 56% - .right - width: 38% - .datepicker - width: 100% - table - width: 100% - border: none - border-spacing: 0 - border-collapse: collapse - thead - background: none - td, th - box-sizing: border-box - - .card-date display: block border-radius: 4px -- cgit v1.2.3-1-g7c22 From 7186b947b25d0f7d1d4fb08d1d29cd173dd69ff3 Mon Sep 17 00:00:00 2001 From: IgnatzHome Date: Thu, 17 May 2018 21:49:14 +0200 Subject: correcting style errors --- client/components/cards/cardDetails.styl | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index e18c07a1..f4ca107b 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -69,11 +69,10 @@ .card-details-items display: flex - flex-wrap: wrap - margin: 0 0 15px + margin: 15px 0 .card-details-item - margin: 15px 0.5em 0 0 + margin-right: 0.5em &:last-child margin-right: 0 &.card-details-item-labels, -- cgit v1.2.3-1-g7c22 From 0dfc62c025c10ebe4b821dbea8e4508601daf671 Mon Sep 17 00:00:00 2001 From: IgnatzHome Date: Thu, 17 May 2018 21:57:54 +0200 Subject: Removing Doupling start / end and more style corrections --- client/components/cards/cardDetails.jade | 10 ---------- client/components/cards/cardDetails.styl | 6 ++---- 2 files changed, 2 insertions(+), 14 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index b888210b..8201928e 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -65,16 +65,6 @@ template(name="cardDetails") a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}") i.fa.fa-plus - if startAt - .card-details-item.card-details-item-start - h3.card-details-item-title {{_ 'card-start'}} - +cardStartDate - - if dueAt - .card-details-item.card-details-item-due - h3.card-details-item-title {{_ 'card-due'}} - +cardDueDate - each customFieldsWD .card-details-item.card-details-item-customfield h3.card-details-item-title diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index f4ca107b..dc6ab94f 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -80,12 +80,10 @@ &.card-details-item-received, &.card-details-item-start, &.card-details-item-due, - &.card-details-item-end + &.card-details-item-end, + &.card-details-item-customfield width: 50% flex-shrink: 1 - &.card-details-item-customfield - max-width: 50% - flex-grow: 1 .card-details-item-title font-size: 16px -- cgit v1.2.3-1-g7c22 From 80088174fcb90b0a0556f16e5af7860f51d58032 Mon Sep 17 00:00:00 2001 From: IgnatzHome Date: Thu, 17 May 2018 22:08:17 +0200 Subject: More style corrections --- client/components/cards/cardDetails.jade | 1 + client/components/cards/cardDetails.styl | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 8201928e..55ee8d32 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -65,6 +65,7 @@ template(name="cardDetails") a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}") i.fa.fa-plus + .card-details-items each customFieldsWD .card-details-item.card-details-item-customfield h3.card-details-item-title diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index dc6ab94f..cb9728c9 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -69,6 +69,7 @@ .card-details-items display: flex + flex-wrap: wrap margin: 15px 0 .card-details-item @@ -80,10 +81,12 @@ &.card-details-item-received, &.card-details-item-start, &.card-details-item-due, - &.card-details-item-end, - &.card-details-item-customfield + &.card-details-item-end width: 50% flex-shrink: 1 + &.card-details-item-customfield + width: 50% + flex-grow: 1 .card-details-item-title font-size: 16px -- cgit v1.2.3-1-g7c22 From f9df38d3333e810e5eec39d93ef310539973de7c Mon Sep 17 00:00:00 2001 From: IgnatzHome Date: Thu, 17 May 2018 22:14:41 +0200 Subject: Style Changes --- client/components/cards/cardDetails.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index cb9728c9..367f3fbc 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -85,7 +85,7 @@ width: 50% flex-shrink: 1 &.card-details-item-customfield - width: 50% + max-width: 50% flex-grow: 1 .card-details-item-title -- cgit v1.2.3-1-g7c22 From b43779e4085a3b2f9e4f3f2cbb65cc0518f2daea Mon Sep 17 00:00:00 2001 From: IgnatzHome Date: Thu, 17 May 2018 22:15:35 +0200 Subject: That should do it --- client/components/cards/cardDetails.styl | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 367f3fbc..7dbe8732 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -81,9 +81,7 @@ &.card-details-item-received, &.card-details-item-start, &.card-details-item-due, - &.card-details-item-end - width: 50% - flex-shrink: 1 + &.card-details-item-end, &.card-details-item-customfield max-width: 50% flex-grow: 1 -- cgit v1.2.3-1-g7c22 From d6cfac0122dc5e6819c82f73c728488e0600cb70 Mon Sep 17 00:00:00 2001 From: Ignatz Date: Fri, 18 May 2018 10:24:51 +0200 Subject: linter corrections --- client/components/cards/cardCustomFields.js | 256 ++++++++++++++-------------- 1 file changed, 128 insertions(+), 128 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index e014de4a..821ca02b 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -1,179 +1,179 @@ Template.cardCustomFieldsPopup.helpers({ - hasCustomField() { - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this._id; - return card.customFieldIndex(customFieldId) > -1; - }, + hasCustomField() { + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this._id; + return card.customFieldIndex(customFieldId) > -1; + }, }); Template.cardCustomFieldsPopup.events({ - 'click .js-select-field'(evt) { - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this._id; - card.toggleCustomField(customFieldId); - evt.preventDefault(); - }, - 'click .js-settings'(evt) { - EscapeActions.executeUpTo('detailsPane'); - Sidebar.setView('customFields'); - evt.preventDefault(); - } + 'click .js-select-field'(evt) { + const card = Cards.findOne(Session.get('currentCard')); + const customFieldId = this._id; + card.toggleCustomField(customFieldId); + evt.preventDefault(); + }, + 'click .js-settings'(evt) { + EscapeActions.executeUpTo('detailsPane'); + Sidebar.setView('customFields'); + evt.preventDefault(); + }, }); // cardCustomField const CardCustomField = BlazeComponent.extendComponent({ - getTemplate() { - return 'cardCustomField-' + this.data().definition.type; - }, + getTemplate() { + return 'cardCustomField-${this.data().definition.type}'; + }, - onCreated() { - const self = this; - self.card = Cards.findOne(Session.get('currentCard')); - self.customFieldId = this.data()._id; - }, + onCreated() { + const self = this; + self.card = Cards.findOne(Session.get('currentCard')); + self.customFieldId = this.data()._id; + }, - canModifyCard() { - return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); - }, + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, }); CardCustomField.register('cardCustomField'); // cardCustomField-text (class extends CardCustomField { - onCreated() { - super.onCreated(); - } + onCreated() { + super.onCreated(); + } - events() { - return [{ - 'submit .js-card-customfield-text'(evt) { - evt.preventDefault(); - const value = this.currentComponent().getValue(); - this.card.setCustomField(this.customFieldId, value); - }, - }]; - } + events() { + return [{ + 'submit .js-card-customfield-text'(evt) { + evt.preventDefault(); + const value = this.currentComponent().getValue(); + this.card.setCustomField(this.customFieldId, value); + }, + }]; + } }).register('cardCustomField-text'); // cardCustomField-number (class extends CardCustomField { - onCreated() { - super.onCreated(); - } + onCreated() { + super.onCreated(); + } - events() { - return [{ - 'submit .js-card-customfield-number'(evt) { - evt.preventDefault(); - const value = parseInt(this.find('input').value); - this.card.setCustomField(this.customFieldId, value); - }, - }]; - } + events() { + return [{ + 'submit .js-card-customfield-number'(evt) { + evt.preventDefault(); + const value = parseInt(this.find('input').value, 10); + this.card.setCustomField(this.customFieldId, value); + }, + }]; + } }).register('cardCustomField-number'); // cardCustomField-date (class extends CardCustomField { - onCreated() { - super.onCreated(); - const self = this; - self.date = ReactiveVar(); - self.now = ReactiveVar(moment()); - window.setInterval(() => { - self.now.set(moment()); - }, 60000); - - self.autorun(() => { - self.date.set(moment(self.data().value)); - }); - } - - showDate() { + onCreated() { + super.onCreated(); + const self = this; + self.date = ReactiveVar(); + self.now = ReactiveVar(moment()); + window.setInterval(() => { + self.now.set(moment()); + }, 60000); + + self.autorun(() => { + self.date.set(moment(self.data().value)); + }); + } + + showDate() { // this will start working once mquandalle:moment // is updated to at least moment.js 2.10.5 // until then, the date is displayed in the "L" format - return this.date.get().calendar(null, { - sameElse: 'llll', - }); - } + return this.date.get().calendar(null, { + sameElse: 'llll', + }); + } - showISODate() { - return this.date.get().toISOString(); - } + showISODate() { + return this.date.get().toISOString(); + } - classes() { - if (this.date.get().isBefore(this.now.get(), 'minute') && + classes() { + if (this.date.get().isBefore(this.now.get(), 'minute') && this.now.get().isBefore(this.data().value)) { - return 'current'; - } - return ''; + return 'current'; } + return ''; + } - showTitle() { - return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`; - } + showTitle() { + return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`; + } - events() { - return [{ - 'click .js-edit-date': Popup.open('cardCustomField-date'), - }]; - } + events() { + return [{ + 'click .js-edit-date': Popup.open('cardCustomField-date'), + }]; + } }).register('cardCustomField-date'); // cardCustomField-datePopup (class extends DatePicker { - onCreated() { - super.onCreated(); - const self = this; - self.card = Cards.findOne(Session.get('currentCard')); - self.customFieldId = this.data()._id; - this.data().value && this.date.set(moment(this.data().value)); - } - - _storeDate(date) { - this.card.setCustomField(this.customFieldId, date); - } - - _deleteDate() { - this.card.setCustomField(this.customFieldId, ''); - } + onCreated() { + super.onCreated(); + const self = this; + self.card = Cards.findOne(Session.get('currentCard')); + self.customFieldId = this.data()._id; + this.data().value && this.date.set(moment(this.data().value)); + } + + _storeDate(date) { + this.card.setCustomField(this.customFieldId, date); + } + + _deleteDate() { + this.card.setCustomField(this.customFieldId, ''); + } }).register('cardCustomField-datePopup'); // cardCustomField-dropdown (class extends CardCustomField { - onCreated() { - super.onCreated(); - this._items = this.data().definition.settings.dropdownItems; - this.items = this._items.slice(0); - this.items.unshift({ - _id: "", - name: TAPi18n.__('custom-field-dropdown-none') - }); - } - - selectedItem() { - const selected = this._items.find((item) => { - return item._id == this.data().value; - }); - return (selected) ? selected.name : TAPi18n.__('custom-field-dropdown-unknown'); - } - - events() { - return [{ - 'submit .js-card-customfield-dropdown'(evt) { - evt.preventDefault(); - const value = this.find('select').value; - this.card.setCustomField(this.customFieldId, value); - }, - }]; - } + onCreated() { + super.onCreated(); + this._items = this.data().definition.settings.dropdownItems; + this.items = this._items.slice(0); + this.items.unshift({ + _id: '', + name: TAPi18n.__('custom-field-dropdown-none'), + }); + } + + selectedItem() { + const selected = this._items.find((item) => { + return item._id === this.data().value; + }); + return (selected) ? selected.name : TAPi18n.__('custom-field-dropdown-unknown'); + } + + events() { + return [{ + 'submit .js-card-customfield-dropdown'(evt) { + evt.preventDefault(); + const value = this.find('select').value; + this.card.setCustomField(this.customFieldId, value); + }, + }]; + } -}).register('cardCustomField-dropdown'); \ No newline at end of file +}).register('cardCustomField-dropdown'); -- cgit v1.2.3-1-g7c22 From 838578657da4ed46be0e32091120c7554b07c102 Mon Sep 17 00:00:00 2001 From: Ignatz Date: Fri, 18 May 2018 10:43:43 +0200 Subject: template literals correction --- client/components/cards/cardCustomFields.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index 821ca02b..019fcab5 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -24,7 +24,7 @@ Template.cardCustomFieldsPopup.events({ const CardCustomField = BlazeComponent.extendComponent({ getTemplate() { - return 'cardCustomField-${this.data().definition.type}'; + return `cardCustomField-${this.data().definition.type}`; }, onCreated() { -- cgit v1.2.3-1-g7c22 From ef99e6a6b1cd8d55fdab9ff94e7bfc3d5c538b8f Mon Sep 17 00:00:00 2001 From: Ignatz Date: Fri, 18 May 2018 11:13:01 +0200 Subject: indend corrections --- client/components/cards/cardCustomFields.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index 019fcab5..aa50caec 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -95,9 +95,9 @@ CardCustomField.register('cardCustomField'); } showDate() { - // this will start working once mquandalle:moment - // is updated to at least moment.js 2.10.5 - // until then, the date is displayed in the "L" format + // this will start working once mquandalle:moment + // is updated to at least moment.js 2.10.5 + // until then, the date is displayed in the "L" format return this.date.get().calendar(null, { sameElse: 'llll', }); -- cgit v1.2.3-1-g7c22