diff options
Diffstat (limited to 'client')
45 files changed, 1333 insertions, 107 deletions
diff --git a/client/components/activities/activities.jade b/client/components/activities/activities.jade index 9ff73864..fad147fc 100644 --- a/client/components/activities/activities.jade +++ b/client/components/activities/activities.jade @@ -26,6 +26,12 @@ template(name="boardActivities") +viewer = comment.text + if($eq activityType 'addChecklist') + | {{{_ 'activity-checklist-added' cardLink}}}. + .activity-checklist(href="{{ card.absoluteUrl }}") + +viewer + = checklist.title + if($eq activityType 'archivedCard') | {{{_ 'activity-archived' cardLink}}}. @@ -41,6 +47,9 @@ template(name="boardActivities") if($eq activityType 'createList') | {{_ 'activity-added' list.title boardLabel}}. + if($eq activityType 'removeList') + | {{_ 'activity-removed' title boardLabel}}. + if($eq activityType 'importBoard') | {{{_ 'activity-imported-board' boardLabel sourceLink}}}. @@ -103,6 +112,11 @@ template(name="cardActivities") | {{{_ 'activity-attached' attachmentLink cardLabel}}}. if attachment.isImage img.attachment-image-preview(src=attachment.url) + if($eq activityType 'addChecklist') + | {{{_ 'activity-checklist-added' cardLabel}}}. + .activity-checklist + +viewer + = checklist.title if($eq activityType 'addComment') +inlinedForm(classNames='js-edit-comment') diff --git a/client/components/activities/activities.js b/client/components/activities/activities.js index 0bd6a272..6600849c 100644 --- a/client/components/activities/activities.js +++ b/client/components/activities/activities.js @@ -12,10 +12,12 @@ BlazeComponent.extendComponent({ const capitalizedMode = Utils.capitalize(mode); const id = Session.get(`current${capitalizedMode}`); const limit = this.page.get() * activitiesPerPage; + const user = Meteor.user(); + const hideSystem = user ? user.hasHiddenSystemMessages() : false; if (id === null) return; - this.subscribe('activities', mode, id, limit, () => { + this.subscribe('activities', mode, id, limit, hideSystem, () => { this.loadNextPageLocked = false; // If the sibear peak hasn't increased, that mean that there are no more diff --git a/client/components/activities/activities.styl b/client/components/activities/activities.styl index 1f0494c7..2285fc0a 100644 --- a/client/components/activities/activities.styl +++ b/client/components/activities/activities.styl @@ -26,6 +26,14 @@ margin-top: 5px padding: 5px + .activity-checklist + display: block + border-radius: 3px + background: white + text-decoration: none + box-shadow: 0 1px 2px rgba(0,0,0,.2) + margin-top: 5px + padding: 5px .activity-meta font-size: 0.8em color: darken(white, 40%) diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 288590da..fe10c921 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -25,7 +25,7 @@ template(name="boardBody") +list(this) if currentCardIsInThisList +cardDetails(currentCard) - if currentUser.isBoardMember + if canSeeAddList +addListForm template(name="addListForm") diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 4703bc91..370db13b 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -204,3 +204,9 @@ BlazeComponent.extendComponent({ }]; }, }).register('addListForm'); + +Template.boardBody.helpers({ + canSeeAddList() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}); diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index 03768b36..e61aea35 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -65,7 +65,7 @@ template(name="boardHeaderBar") if $eq watchLevel "muted" i.fa.fa-bell-slash span {{_ watchLevel}} - + else a.board-header-btn.js-log-in( title="{{_ 'log-in'}}") @@ -81,7 +81,7 @@ template(name="boardHeaderBar") a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}") i.fa.fa-times-thin - if currentUser.isBoardMember + if canModifyBoard a.board-header-btn.js-multiselection-activate( title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}" class="{{#if MultiSelection.isActive}}emphasis{{/if}}") @@ -92,7 +92,7 @@ template(name="boardHeaderBar") i.fa.fa-times-thin .separator - a.board-header-btn.js-open-board-menu + a.board-header-btn.js-open-board-menu(title="{{_ 'boardMenuPopup-title'}}") i.board-header-btn-icon.fa.fa-navicon template(name="boardMenuPopup") @@ -170,7 +170,7 @@ template(name="boardChangeColorPopup") if isSelected i.fa.fa-check -template(name="createBoardPopup") +template(name="createBoard") form label | {{_ 'title'}} diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js index b72bb162..44532c3e 100644 --- a/client/components/boards/boardHeader.js +++ b/client/components/boards/boardHeader.js @@ -33,7 +33,7 @@ Template.boardChangeTitlePopup.events({ const newDesc = tpl.$('.js-board-desc').val().trim(); if (newTitle) { this.rename(newTitle); - this.setDesciption(newDesc); + this.setDescription(newDesc); Popup.close(); } evt.preventDefault(); @@ -97,6 +97,12 @@ BlazeComponent.extendComponent({ }, }).register('boardHeaderBar'); +Template.boardHeaderBar.helpers({ + canModifyBoard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}); + BlazeComponent.extendComponent({ backgroundColors() { return Boards.simpleSchema()._schema.color.allowedValues; @@ -119,10 +125,15 @@ BlazeComponent.extendComponent({ }, }).register('boardChangeColorPopup'); -BlazeComponent.extendComponent({ +const CreateBoard = BlazeComponent.extendComponent({ + template() { + return 'createBoard'; + }, + onCreated() { this.visibilityMenuIsOpen = new ReactiveVar(false); this.visibility = new ReactiveVar('private'); + this.boardId = new ReactiveVar(''); }, visibilityCheck() { @@ -143,15 +154,12 @@ BlazeComponent.extendComponent({ const title = this.find('.js-new-board-title').value; const visibility = this.visibility.get(); - const boardId = Boards.insert({ + this.boardId.set(Boards.insert({ title, permission: visibility, - }); + })); - Utils.goBoardId(boardId); - - // Immediately star boards crated with the headerbar popup. - Meteor.user().toggleBoardStar(boardId); + Utils.goBoardId(this.boardId.get()); }, events() { @@ -166,6 +174,14 @@ BlazeComponent.extendComponent({ }, }).register('createBoardPopup'); +(class HeaderBarCreateBoard extends CreateBoard { + onSubmit(evt) { + super.onSubmit(evt); + // Immediately star boards crated with the headerbar popup. + Meteor.user().toggleBoardStar(this.boardId.get()); + } +}).register('headerBarCreateBoardPopup'); + BlazeComponent.extendComponent({ visibilityCheck() { const currentBoard = Boards.findOne(Session.get('currentBoard')); diff --git a/client/components/cards/cardDate.jade b/client/components/cards/cardDate.jade new file mode 100644 index 00000000..525f27ed --- /dev/null +++ b/client/components/cards/cardDate.jade @@ -0,0 +1,26 @@ +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}}") + time(datetime="{{showISODate}}") + | {{showDate}} + else + a.card-date(title="{{showTitle}}" class="{{classes}}") + time(datetime="{{showISODate}}") + | {{showDate}} + diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js new file mode 100644 index 00000000..3f69f384 --- /dev/null +++ b/client/components/cards/cardDate.js @@ -0,0 +1,234 @@ +// 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(); + }, +}); + +// editCardStartDatePopup +(class extends EditCardDate { + onCreated() { + super.onCreated(); + this.data().startAt && this.date.set(moment(this.data().startAt)); + } + + _storeDate(date) { + this.card.setStart(date); + } + + _deleteDate() { + this.card.unsetStart(); + } +}).register('editCardStartDatePopup'); + +// editCardDueDatePopup +(class extends EditCardDate { + onCreated() { + super.onCreated(); + this.data().dueAt && this.date.set(moment(this.data().dueAt)); + } + + onRendered() { + super.onRendered(); + if (moment.isDate(this.card.startAt)) { + this.$('.js-datepicker').datepicker('setStartDate', this.card.startAt); + } + } + + _storeDate(date) { + this.card.setDue(date); + } + + _deleteDate() { + this.card.unsetDue(); + } +}).register('editCardDueDatePopup'); + + +// Display start & due dates +const CardDate = BlazeComponent.extendComponent({ + template() { + return 'dateBadge'; + }, + + onCreated() { + const self = this; + self.date = ReactiveVar(); + self.now = ReactiveVar(moment()); + window.setInterval(() => { + self.now.set(moment()); + }, 60000); + }, + + 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(); + }, +}); + +class CardStartDate extends CardDate { + onCreated() { + super.onCreated(); + const self = this; + self.autorun(() => { + self.date.set(moment(self.data().startAt)); + }); + } + + classes() { + if (this.date.get().isBefore(this.now.get(), 'minute') && + this.now.get().isBefore(this.data().dueAt)) { + return 'current'; + } + return ''; + } + + showTitle() { + return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`; + } + + events() { + return super.events().concat({ + 'click .js-edit-date': Popup.open('editCardStartDate'), + }); + } +} +CardStartDate.register('cardStartDate'); + +class CardDueDate extends CardDate { + onCreated() { + super.onCreated(); + const self = this; + self.autorun(() => { + self.date.set(moment(self.data().dueAt)); + }); + } + + classes() { + if (this.now.get().diff(this.date.get(), 'days') >= 2) + return 'long-overdue'; + else if (this.now.get().diff(this.date.get(), 'minute') >= 0) + return 'due'; + else if (this.now.get().diff(this.date.get(), 'days') >= -1) + return 'almost-due'; + return ''; + } + + showTitle() { + return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`; + } + + events() { + return super.events().concat({ + 'click .js-edit-date': Popup.open('editCardDueDate'), + }); + } +} +CardDueDate.register('cardDueDate'); + +(class extends CardStartDate { + showDate() { + return this.date.get().format('l'); + } +}).register('minicardStartDate'); + +(class extends CardDueDate { + showDate() { + return this.date.get().format('l'); + } +}).register('minicardDueDate'); diff --git a/client/components/cards/cardDate.styl b/client/components/cards/cardDate.styl new file mode 100644 index 00000000..1631baa5 --- /dev/null +++ b/client/components/cards/cardDate.styl @@ -0,0 +1,58 @@ +.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 + padding: 1px 3px + + background-color: #dbdbdb + &:hover, &.is-active + background-color: #b3b3b3 + + &.current, &.almost-due, &.due, &.long-overdue + color: #fff + + &.current + background-color: #5ba639 + &:hover, &.is-active + background-color: darken(#5ba639, 10) + + &.almost-due + background-color: #edc909 + &:hover, &.is-active + background-color: darken(#edc909, 10) + + &.due + background-color: #fa3f00 + &:hover, &.is-active + background-color: darken(#fa3f00, 10) + + &.long-overdue + background-color: #fd5d47 + &:hover, &.is-active + background-color: darken(#fd5d47, 7) + + time + &::before + font: normal normal normal 14px/1 FontAwesome + font-size: inherit + -webkit-font-smoothing: antialiased + content: "\f017" // clock symbol + margin-right: 0.3em
\ No newline at end of file diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 734fc7e3..9c95e92f 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -8,7 +8,7 @@ template(name="cardDetails") if currentUser.isBoardMember a.fa.fa-navicon.card-details-menu.js-open-card-details-menu h2.card-details-title.js-card-title( - class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") + class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}") = title if isWatching i.fa.fa-eye.card-details-watch @@ -22,21 +22,32 @@ template(name="cardDetails") each members +userAvatar(userId=this cardId=../_id) | {{! XXX Hack to hide syntaxic coloration /// }} - if currentUser.isBoardMember + if canModifyCard a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}") i.fa.fa-plus .card-details-item.card-details-item-labels h3.card-details-item-title {{_ 'labels'}} - a(class="{{#if currentUser.isBoardMember}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}") + a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}") each labels span.card-label(class="card-label-{{color}}" title=name)= name - if currentUser.isBoardMember + if canModifyCard 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 + + //- XXX We should use "editable" to avoid repetiting ourselves - if currentUser.isBoardMember + if canModifyCard h3.card-details-item-title {{_ 'description'}} +inlinedCardDescription(classNames="card-description js-card-description") +editor(autofocus=true) @@ -61,6 +72,10 @@ template(name="cardDetails") h3.card-details-item-title {{_ 'description'}} +viewer = description + + hr + +checklists(cardId = _id) + if attachments.count hr h2 @@ -86,21 +101,24 @@ template(name="editCardTitleForm") template(name="cardDetailsActionsPopup") ul.pop-over-list li: a.js-toggle-watch-card {{#if isWatching}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}} - hr - ul.pop-over-list - li: a.js-members {{_ 'card-edit-members'}} - li: a.js-labels {{_ 'card-edit-labels'}} - li: a.js-attachments {{_ 'card-edit-attachments'}} - hr - ul.pop-over-list - li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}} - li: a.js-move-card-to-bottom {{_ 'moveCardToBottom-title'}} - hr - ul.pop-over-list - li: a.js-move-card {{_ 'moveCardPopup-title'}} - unless archived - li: a.js-archive {{_ 'archive-card'}} - li: a.js-more {{_ 'cardMorePopup-title'}} + if canModifyCard + hr + ul.pop-over-list + li: a.js-members {{_ 'card-edit-members'}} + li: a.js-labels {{_ 'card-edit-labels'}} + li: a.js-attachments {{_ 'card-edit-attachments'}} + li: a.js-start-date {{_ 'editCardStartDatePopup-title'}} + li: a.js-due-date {{_ 'editCardDueDatePopup-title'}} + hr + ul.pop-over-list + li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}} + li: a.js-move-card-to-bottom {{_ 'moveCardToBottom-title'}} + hr + ul.pop-over-list + li: a.js-move-card {{_ 'moveCardPopup-title'}} + unless archived + li: a.js-archive {{_ 'archive-card'}} + li: a.js-more {{_ 'cardMorePopup-title'}} template(name="moveCardPopup") +boardLists diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index b6f17c23..b39f8e59 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -28,6 +28,10 @@ BlazeComponent.extendComponent({ return card.findWatcher(Meteor.userId()); }, + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, + scrollParentContainer() { const cardPanelWidth = 510; const bodyBoardComponent = this.parentComponent(); @@ -65,6 +69,9 @@ BlazeComponent.extendComponent({ [`${CSSEvents.transitionend} .js-card-details`]() { this.isLoaded.set(true); }, + [`${CSSEvents.animationend} .js-card-details`]() { + this.isLoaded.set(true); + }, }; return [{ @@ -137,12 +144,18 @@ Template.cardDetailsActionsPopup.helpers({ isWatching() { return this.findWatcher(Meteor.userId()); }, + + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, }); Template.cardDetailsActionsPopup.events({ 'click .js-members': Popup.open('cardMembers'), 'click .js-labels': Popup.open('cardLabels'), 'click .js-attachments': Popup.open('cardAttachments'), + 'click .js-start-date': Popup.open('editCardStartDate'), + 'click .js-due-date': Popup.open('editCardDueDate'), 'click .js-move-card': Popup.open('moveCard'), 'click .js-move-card-to-top'(evt) { evt.preventDefault(); diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index d7d29551..f209862c 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -73,8 +73,13 @@ margin: 15px 0 .card-details-item + margin-right: 0.5em + &:last-child + margin-right: 0 &.card-details-item-labels, - &.card-details-item-members + &.card-details-item-members, + &.card-details-item-start, + &.card-details-item-due width: 50% flex-shrink: 1 diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade new file mode 100644 index 00000000..a0d89351 --- /dev/null +++ b/client/components/cards/checklists.jade @@ -0,0 +1,71 @@ +template(name="checklists") + h2 {{_ 'checklists'}} + .card-checklist-items + each checklist in currentCard.checklists + +checklistDetail(checklist = checklist) + if canModifyCard + +inlinedForm(classNames="js-add-checklist" cardId = cardId) + +addChecklistItemForm + else + a.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-checklist'}}... + +template(name="checklistDetail") + +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist) + +editChecklistItemForm(checklist = checklist) + else + .checklist-title + .checkbox.fa.fa-check-square-o + if canModifyCard + a.js-delete-checklist {{_ "delete"}}... + span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}} + if canModifyCard + h2.title.js-open-inlined-form.is-editable {{checklist.title}} + else + h2.title {{checklist.title}} + +checklistItems(checklist = checklist) + +template(name="addChecklistItemForm") + textarea.js-add-checklist-item(rows='1' autofocus) + .edit-controls.clearfix + button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + +template(name="editChecklistItemForm") + textarea.js-edit-checklist-item(rows='1' autofocus) + if $eq type 'item' + = item.title + else + = checklist.title + .edit-controls.clearfix + button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + span(title=createdAt) {{ moment createdAt }} + if canModifyCard + a.js-delete-checklist-item {{_ "delete"}}... + +template(name="checklistItems") + .checklist-items + each item in checklist.items + +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist) + +editChecklistItemForm(type = 'item' item = item checklist = checklist) + else + +itemDetail(item = item checklist = checklist) + if canModifyCard + +inlinedForm(classNames="js-add-checklist-item" checklist = checklist) + +addChecklistItemForm + else + a.add-checklist-item.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-checklist-item'}}... + +template(name='itemDetail') + .item + if canModifyCard + .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") + .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}} + else + .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") + .item-title(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}} + diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js new file mode 100644 index 00000000..b8f5e443 --- /dev/null +++ b/client/components/cards/checklists.js @@ -0,0 +1,99 @@ +BlazeComponent.extendComponent({ + addChecklist(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-add-checklist-item'); + const title = textarea.value.trim(); + const cardId = this.currentData().cardId; + Checklists.insert({ + cardId, + title, + }); + }, + + addChecklistItem(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-add-checklist-item'); + const title = textarea.value.trim(); + const checklist = this.currentData().checklist; + checklist.addItem(title); + }, + + editChecklist(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-edit-checklist-item'); + const title = textarea.value.trim(); + const checklist = this.currentData().checklist; + checklist.setTitle(title); + }, + + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, + + editChecklistItem(event) { + event.preventDefault(); + + const textarea = this.find('textarea.js-edit-checklist-item'); + const title = textarea.value.trim(); + const itemId = this.currentData().item._id; + const checklist = this.currentData().checklist; + checklist.editItem(itemId, title); + }, + + deleteItem() { + const checklist = this.currentData().checklist; + const item = this.currentData().item; + if (checklist && item && item._id) { + checklist.removeItem(item._id); + } + }, + + deleteChecklist() { + const checklist = this.currentData().checklist; + if (checklist && checklist._id) { + Checklists.remove(checklist._id); + } + }, + + pressKey(event) { + //If user press enter key inside a form, submit it, so user doesn't have to leave keyboard to submit a form. + if (event.keyCode === 13) { + event.preventDefault(); + const $form = $(event.currentTarget).closest('form'); + $form.find('button[type=submit]').click(); + } + }, + + events() { + return [{ + 'submit .js-add-checklist': this.addChecklist, + 'submit .js-edit-checklist-title': this.editChecklist, + 'submit .js-add-checklist-item': this.addChecklistItem, + 'submit .js-edit-checklist-item': this.editChecklistItem, + 'click .js-delete-checklist-item': this.deleteItem, + 'click .js-delete-checklist': this.deleteChecklist, + keydown: this.pressKey, + }]; + }, +}).register('checklists'); + +Template.itemDetail.helpers({ + canModifyCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}); + +BlazeComponent.extendComponent({ + toggleItem() { + const checklist = this.currentData().checklist; + const item = this.currentData().item; + if (checklist && item && item._id) { + checklist.toggleItem(item._id); + } + }, + events() { + return [{ + 'click .item .check-box': this.toggleItem, + }]; + }, +}).register('itemDetail'); diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl new file mode 100644 index 00000000..885d7528 --- /dev/null +++ b/client/components/cards/checklists.styl @@ -0,0 +1,68 @@ +.js-add-checklist + color: #8c8c8c + +textarea.js-add-checklist-item, textarea.js-edit-checklist-item + overflow: hidden + word-wrap: break-word + resize: none + height: 34px + +.delete-text + color: #8c8c8c + text-decoration: underline + word-wrap: break-word + float: right + padding-top: 6px + &:hover + color: inherit + +.checklist-title + .checkbox + float: left + width: 30px + height 30px + font-size: 18px + line-height: 30px + + .title + font-size: 18px + line-height: 30px + + .checklist-stat + margin: 0 0.5em + float: right + padding-top: 6px + &.is-finished + color: #3cb500 + + .js-delete-checklist + @extends .delete-text + +.checklist-items + margin: 0 0 0.5em 1.33em + + .item + line-height: 25px + font-size: 1.1em + margin-top: 3px + display: flex + + .check-box + margin-top: 5px + &.is-checked + border-bottom: 2px solid #3cb500 + border-right: 2px solid #3cb500 + + .item-title + padding-left: 10px; + &.is-checked + color: #8c8c8c + font-style: italic + + .js-delete-checklist-item + @extends .delete-text + padding: 12px 0 0 0 + + .add-checklist-item + padding-top: 0.5em + display: inline-block diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 1dfd2f8e..5409ec62 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -7,6 +7,13 @@ template(name="minicard") each labels .minicard-label(class="card-label-{{color}}" title="{{name}}") .minicard-title= title + .dates + if startAt + .date + +minicardStartDate + if dueAt + .date + +minicardDueDate if members .minicard-members.js-minicard-members each members @@ -14,7 +21,7 @@ template(name="minicard") .badges if comments.count .badge(title="{{_ 'card-comments-title' comments.count }}") - span.badge-icon.fa.fa-comment-o + span.badge-icon.fa.fa-comment-o.badge-comment span.badge-text= comments.count if description .badge.badge-state-image-only(title=description) @@ -23,3 +30,7 @@ template(name="minicard") .badge span.badge-icon.fa.fa-paperclip span.badge-text= attachments.count + if checklists.count + .badge(class="{{#if checklistFinished}}is-finished{{/if}}") + span.badge-icon.fa.fa-check-square-o + span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}} diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 0f6f8ad2..a6aad896 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -77,7 +77,12 @@ height: @width border-radius: 2px margin-left: 3px - + .dates + display: flex; + flex-direction: row; + flex-wrap: wrap; + .date + margin-right: 3px .badges float: left margin-top: 7px @@ -91,15 +96,28 @@ margin-right: 11px margin-bottom: 3px font-size: 0.9em + &.is-finished + background: #3cb500 + padding: 0px 3px + border-radius: 3px + color: white + + &:last-of-type + margin-right: 0 .badge-icon, .badge-text - vertical-align: top + vertical-align: middle + &.badge-comment + margin-bottom: 0.1rem .badge-text font-size: 0.9em padding-left: 2px line-height: 14px + .check-list-text + padding-left: 0px + line-height: 12px .minicard-members float: right diff --git a/client/components/lists/list.js b/client/components/lists/list.js index e1909783..9c191348 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -44,7 +44,7 @@ BlazeComponent.extendComponent({ placeholder: 'minicard-wrapper placeholder', start(evt, ui) { ui.placeholder.height(ui.helper.height()); - EscapeActions.executeUpTo('popup'); + EscapeActions.executeUpTo('popup-close'); boardComponent.setIsDragging(true); }, stop(evt, ui) { @@ -79,10 +79,10 @@ BlazeComponent.extendComponent({ }); function userIsMember() { - return Meteor.user() && Meteor.user().isBoardMember(); + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); } - // Disable drag-dropping if the current user is not a board member + // Disable drag-dropping if the current user is not a board member or is comment only this.autorun(() => { $cards.sortable('option', 'disabled', !userIsMember()); }); diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index e659b179..01aa7179 100644 --- a/client/components/lists/listBody.jade +++ b/client/components/lists/listBody.jade @@ -12,7 +12,7 @@ template(name="listBody") .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection( class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}") +minicard(this) - if currentUser.isBoardMember + if canSeeAddCard +inlinedForm(autoclose=false position="bottom") +addCardForm(listId=_id position="bottom") else diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index 34c2dcd6..bdc812c7 100644 --- a/client/components/lists/listBody.js +++ b/client/components/lists/listBody.js @@ -239,3 +239,10 @@ BlazeComponent.extendComponent({ }); }, }).register('addCardForm'); + + +Template.listBody.helpers({ + canSeeAddCard() { + return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); + }, +}); diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index f9fe065f..3f6ce0eb 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -6,6 +6,10 @@ template(name="listHeader") h2.list-header-name( class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") = title + if showCardsCountForList cards.count + = cards.count + span.lowercase + | {{_ 'cards'}} if currentUser.isBoardMember if isWatching i.list-header-watch-icon.fa.fa-eye @@ -21,14 +25,18 @@ template(name="editListTitleForm") template(name="listActionPopup") ul.pop-over-list li: a.js-toggle-watch-list {{#if isWatching}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}} - hr - ul.pop-over-list - li: a.js-add-card {{_ 'add-card'}} - if cards.count - li: a.js-select-cards {{_ 'list-select-cards'}} - hr - ul.pop-over-list - li: a.js-close-list {{_ 'archive-list'}} + unless currentUser.isCommentOnly + hr + ul.pop-over-list + li: a.js-add-card {{_ 'add-card'}} + if cards.count + li: a.js-select-cards {{_ 'list-select-cards'}} + hr + ul.pop-over-list + li: a.js-close-list {{_ 'archive-list'}} + hr + ul.pop-over-list + li: a.js-remove-list {{_ 'remove-list'}} template(name="boardLists") ul.pop-over-list diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index c7ae8e62..f352022d 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -13,6 +13,14 @@ BlazeComponent.extendComponent({ return list.findWatcher(Meteor.userId()); }, + limitToShowCardsCount() { + return Meteor.user().getLimitToShowCardsCount(); + }, + + showCardsCountForList(count) { + return count > this.limitToShowCardsCount(); + }, + events() { return [{ 'click .js-open-list-menu': Popup.open('listAction'), @@ -52,4 +60,10 @@ Template.listActionPopup.events({ this.archive(); Popup.close(); }, + 'click .js-remove-list'(evt) { + const currentList = this; + evt.preventDefault(); + Lists.remove(currentList._id); + Popup.close(); + }, }); diff --git a/client/components/main/header.js b/client/components/main/header.js index 0337c72b..49acbfef 100644 --- a/client/components/main/header.js +++ b/client/components/main/header.js @@ -13,5 +13,5 @@ Template.header.helpers({ }); Template.header.events({ - 'click .js-create-board': Popup.open('createBoard'), + 'click .js-create-board': Popup.open('headerBarCreateBoard'), }); diff --git a/client/components/main/layouts.jade b/client/components/main/layouts.jade index 943ebe0f..12fac0a8 100644 --- a/client/components/main/layouts.jade +++ b/client/components/main/layouts.jade @@ -2,6 +2,7 @@ head title Wekan meta(name="viewport" content="maximum-scale=1.0,width=device-width,initial-scale=1.0,user-scalable=0") + meta(http-equiv="X-UA-Compatible" content="IE=edge") //- XXX We should use pathFor in the following `href` to support the case where the application is deployed with a path prefix, but it seems to be difficult to do that cleanly with Blaze -- at least without adding extra diff --git a/client/components/main/layouts.js b/client/components/main/layouts.js index 3df17f41..1e50b01a 100644 --- a/client/components/main/layouts.js +++ b/client/components/main/layouts.js @@ -1,4 +1,6 @@ Meteor.subscribe('boards'); +Meteor.subscribe('setting'); +Meteor.subscribe('user-admin'); BlazeLayout.setRoot('body'); diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl index 83d4d693..349ee743 100644 --- a/client/components/main/layouts.styl +++ b/client/components/main/layouts.styl @@ -351,6 +351,11 @@ a background: darken(white, 13%) overflow-y: auto + a + text-decoration: underline + &:hover + color: #333 + .basicTabs-container .tabs-content-container padding: 0 padding-top: 15px @@ -374,3 +379,8 @@ a .wrapper height: 100% margin: 0px + +.inline-input + height: 37px + margin: 8px 10px 0 0 + width: 50px diff --git a/client/components/settings/invitationCode.jade b/client/components/settings/invitationCode.jade new file mode 100644 index 00000000..171a2663 --- /dev/null +++ b/client/components/settings/invitationCode.jade @@ -0,0 +1,5 @@ +template(name='invitationCode') + .at-input#invitationcode + label(for='at-field-code') {{_ 'invitation-code'}} + + input#at-field-invitationcode(type="text" name='at-field-invitationcode' placeholder="{{_ 'invitation-code'}}") diff --git a/client/components/settings/invitationCode.js b/client/components/settings/invitationCode.js new file mode 100644 index 00000000..a403d8ab --- /dev/null +++ b/client/components/settings/invitationCode.js @@ -0,0 +1,6 @@ +Template.invitationCode.onRendered(() => { + const setting = Settings.findOne(); + if (!setting || !setting.disableRegistration) { + $('#invitationcode').hide(); + } +}); diff --git a/client/components/settings/settingBody.jade b/client/components/settings/settingBody.jade new file mode 100644 index 00000000..fdab3173 --- /dev/null +++ b/client/components/settings/settingBody.jade @@ -0,0 +1,71 @@ +template(name="setting") + .setting-content + .content-title + span {{_ 'settings'}} + .content-body + .side-menu + ul + li.active + a.js-setting-menu(data-id="registration-setting") {{_ 'registration'}} + li + a.js-setting-menu(data-id="email-setting") {{_ 'email'}} + .main-body + if loading.get + +spinner + else if generalSetting.get + +general + else if emailSetting.get + +email + +template(name="general") + ul#registration-setting.setting-detail + li + a.flex.js-toggle-registration + .materialCheckBox(class="{{#if currentSetting.disableRegistration}}is-checked{{/if}}") + + span {{_ 'disable-self-registration'}} + li + .invite-people(class="{{#if currentSetting.disableRegistration}}{{else}}hide{{/if}}") + ul + li + .title {{_ 'invite-people'}} + textarea#email-to-invite.form-control(rows='5', placeholder="{{_ 'email-addresses'}}") + li + .title {{_ 'to-boards'}} + .bg-white + each boards + a.option.flex.js-toggle-board-choose(id= _id) + .materialCheckBox(data-id= _id) + + span= title + + li + button.js-email-invite.primary {{_ 'invite'}} + +template(name='email') + ul#email-setting.setting-detail + li.smtp-form + .title {{_ 'smtp-host'}} + .description {{_ 'smtp-host-description'}} + .form-group + input.form-control#mail-server-host(type="text", placeholder="smtp.domain.com" value="{{currentSetting.mailServer.host}}") + li.smtp-form + .title {{_ 'smtp-port'}} + .description {{_ 'smtp-port-description'}} + .form-group + input.form-control#mail-server-port(type="text", placeholder="25" value="{{currentSetting.mailServer.port}}") + li.smtp-form + .title {{_ 'smtp-username'}} + .form-group + input.form-control#mail-server-username(type="text", placeholder="{{_ 'username'}}" value="{{currentSetting.mailServer.username}}") + li.smtp-form + .title {{_ 'smtp-password'}} + .form-group + input.form-control#mail-server-password(type="text", placeholder="{{_ 'password'}}" value="{{currentSetting.mailServer.password}}") + li.smtp-form + .title {{_ 'send-from'}} + .form-group + input.form-control#mail-server-from(type="email", placeholder="no-reply@domain.com" value="{{currentSetting.mailServer.from}}") + + li + button.js-save.primary Save diff --git a/client/components/settings/settingBody.js b/client/components/settings/settingBody.js new file mode 100644 index 00000000..0dc3c5f0 --- /dev/null +++ b/client/components/settings/settingBody.js @@ -0,0 +1,128 @@ +Meteor.subscribe('setting'); +Meteor.subscribe('mailServer'); + +BlazeComponent.extendComponent({ + onCreated() { + this.error = new ReactiveVar(''); + this.loading = new ReactiveVar(false); + this.generalSetting = new ReactiveVar(true); + this.emailSetting = new ReactiveVar(false); + }, + + setError(error) { + this.error.set(error); + }, + + setLoading(w) { + this.loading.set(w); + }, + + checkField(selector) { + const value = $(selector).val(); + if(!value || value.trim() === ''){ + $(selector).parents('li.smtp-form').addClass('has-error'); + throw Error('blank field'); + } else { + return value; + } + }, + + currentSetting(){ + return Settings.findOne(); + }, + + boards() { + return Boards.find({ + archived: false, + 'members.userId': Meteor.userId(), + 'members.isAdmin': true, + }, { + sort: ['title'], + }); + }, + toggleRegistration(){ + this.setLoading(true); + const registrationClosed = this.currentSetting().disableRegistration; + Settings.update(Settings.findOne()._id, {$set:{disableRegistration: !registrationClosed}}); + this.setLoading(false); + if(registrationClosed){ + $('.invite-people').slideUp(); + }else{ + $('.invite-people').slideDown(); + } + }, + + switchMenu(event){ + const target = $(event.target); + if(!target.hasClass('active')){ + $('.side-menu li.active').removeClass('active'); + target.parent().addClass('active'); + const targetID = target.data('id'); + this.generalSetting.set('registration-setting' === targetID); + this.emailSetting.set('email-setting' === targetID); + } + }, + + checkBoard(event){ + let target = $(event.target); + if(!target.hasClass('js-toggle-board-choose')){ + target = target.parent(); + } + const checkboxId = target.attr('id'); + $(`#${checkboxId} .materialCheckBox`).toggleClass('is-checked'); + $(`#${checkboxId}`).toggleClass('is-checked'); + }, + + inviteThroughEmail(){ + const emails = $('#email-to-invite').val().trim().split('\n').join(',').split(','); + const boardsToInvite = []; + $('.js-toggle-board-choose .materialCheckBox.is-checked').each(function () { + boardsToInvite.push($(this).data('id')); + }); + const validEmails = []; + emails.forEach((email) => { + if (email && SimpleSchema.RegEx.Email.test(email.trim())) { + validEmails.push(email.trim()); + } + }); + if (validEmails.length) { + this.setLoading(true); + Meteor.call('sendInvitation', validEmails, boardsToInvite, () => { + // if (!err) { + // TODO - show more info to user + // } + this.setLoading(false); + }); + } + }, + + saveMailServerInfo(){ + this.setLoading(true); + $('li').removeClass('has-error'); + + try{ + const host = this.checkField('#mail-server-host'); + const port = this.checkField('#mail-server-port'); + const username = $('#mail-server-username').val().trim(); + const password = $('#mail-server-password').val().trim(); + const from = this.checkField('#mail-server-from'); + Settings.update(Settings.findOne()._id, {$set:{'mailServer.host':host, 'mailServer.port': port, 'mailServer.username': username, + 'mailServer.password': password, 'mailServer.from': from}}); + } catch (e) { + return; + } finally { + this.setLoading(false); + } + + }, + + events(){ + return [{ + 'click a.js-toggle-registration': this.toggleRegistration, + 'click a.js-setting-menu': this.switchMenu, + 'click a.js-toggle-board-choose': this.checkBoard, + 'click button.js-email-invite': this.inviteThroughEmail, + 'click button.js-save': this.saveMailServerInfo, + }]; + }, +}).register('setting'); diff --git a/client/components/settings/settingBody.styl b/client/components/settings/settingBody.styl new file mode 100644 index 00000000..118d364c --- /dev/null +++ b/client/components/settings/settingBody.styl @@ -0,0 +1,112 @@ +.flex + display: -webkit-box + display: -moz-box + display: -webkit-flex + display: -moz-flex + display: -ms-flexbox + display: flex + +.setting-content + padding 30px + color: #727479 + background: #dedede + width 100% + height 100% + position: absolute; + + .content-title + font-size 20px + + .content-body + display flex + padding-top 15px + height 100% + + .side-menu + background-color: #f7f7f7; + border: 1px solid #f0f0f0; + border-radius: 4px; + width: 250px; + box-shadow: inset -1px -1px 3px rgba(0,0,0,.05); + + ul + + li + margin: 0.1rem 0.2rem; + + &.active + background #fff + box-shadow 0 1px 2px rgba(0,0,0,0.15); + + &:hover + background #fff + box-shadow 0 1px 2px rgba(0,0,0,0.15); + a + @extends .flex + padding: 1rem 0 1rem 1rem + width: 100% - 5rem + + + span + font-size: 13px + + .main-body + padding: 0.1em 1em + + ul + li + padding: 0.5rem 0.5rem; + + a + .is-checked + border-bottom: 2px solid #2980b9; + border-right: 2px solid #2980b9; + + span + padding: 0 0.5rem + + .invite-people + padding-left 20px; + li + min-width: 500px; + + ul.no-margin-bottom + margin-bottom: 0; + + .bg-white + a + background #f7f7f7 + &.is-checked + background #fff + + +.option + @extends .flex + -webkit-border-radius: 3px; + border-radius: 3px; + background: #fff; + text-decoration: none; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + margin-top: 5px; + padding: 5px; + +.title + font-weight 700; + margin-bottom 0.5rem; +.description + margin-bottom 0.5rem; +.bg-white + background #f9fbfc; + +.form-control.has-error + border-color: #a94442; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + +li.has-error + color #a94442 + .form-group + .form-control + border-color: #a94442; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + diff --git a/client/components/settings/settingHeader.jade b/client/components/settings/settingHeader.jade new file mode 100644 index 00000000..fb884056 --- /dev/null +++ b/client/components/settings/settingHeader.jade @@ -0,0 +1,21 @@ +template(name="settingHeaderBar") + h1.header-setting-menu + span {{_ 'admin-panel'}} + + .setting-header-btns.left + unless isMiniScreen + unless isSandstorm + if currentUser + a.setting-header-btn.settings.active + i.fa(class="fa-cog") + span {{_ 'settings'}} +//TODO +// a.setting-header-btn.people +// i.fa(class="fa-users") +// span {{_ 'people'}} + + else + a.setting-header-btn.js-log-in( + title="{{_ 'log-in'}}") + i.fa.fa-sign-in + span {{_ 'log-in'}} diff --git a/client/components/settings/settingHeader.styl b/client/components/settings/settingHeader.styl new file mode 100644 index 00000000..995ed26d --- /dev/null +++ b/client/components/settings/settingHeader.styl @@ -0,0 +1,25 @@ +#header #header-main-bar .setting-header-btn + &.active, + &:hover:not(.is-disabled) + background: rgba(0, 0, 0, .15) + color: darken(white, 5%) + margin-left: 20px; + padding-right: 10px; + height: 28px; + font-size: 13px; + float: left; + overflow: hidden; + line-height: @height; + margin: 0 2px; + + i.fa + float: left + display: block + line-height: 28px + color: darken(white, 5%) + margin: 0 10px + + + span + display: inline-block + margin-top: 1px + margin-right: 10px
\ No newline at end of file diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 4f5586cb..6045b371 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -1,16 +1,22 @@ template(name="sidebar") .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}") a.sidebar-tongue.js-toggle-sidebar( - class="{{#if isTongueHidden}}is-hidden{{/if}}") + class="{{#if isTongueHidden}}is-hidden{{/if}}", + title="{{showTongueTitle}}") i.fa.fa-angle-left - .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar - a.hide-btn.js-hide-sidebar - i.fa.fa-angle-right - unless isDefaultView - h2 - a.fa.fa-chevron-left.js-back-home - = getViewTitle - +Template.dynamic(template=getViewTemplate) + .sidebar-shadow + .sidebar-content.sidebar-shortcuts + a.board-header-btn.js-shortcuts + i.fa.fa-keyboard-o + span {{_ 'keyboard-shortcuts' }} + .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar + a.hide-btn.js-hide-sidebar + i.fa.fa-angle-right + unless isDefaultView + h2 + a.fa.fa-chevron-left.js-back-home + = getViewTitle + +Template.dynamic(template=getViewTemplate) template(name='homeSidebar') +membersWidget @@ -30,10 +36,13 @@ template(name="membersWidget") .board-widget-content each currentBoard.activeMembers +userAvatar(userId=this.userId showStatus=true) - unless isSandstorm - if currentUser.isBoardAdmin - a.member.add-member.js-manage-board-members + if isSandstorm + if currentUser.isBoardMember + a.member.add-member.sandstorm-powerbox-request-identity i.fa.fa-plus + else if currentUser.isBoardAdmin + a.member.add-member.js-manage-board-members + i.fa.fa-plus .clearfix if isInvited hr @@ -51,7 +60,7 @@ template(name="labelsWidget") .board-widget-content each currentBoard.labels a.card-label(class="card-label-{{color}}" - class="{{#if currentUser.isBoardMember}}js-label{{/if}}") + class="{{#if currentUser.isNotCommentOnly}}js-label{{/if}}") span.card-label-name= name if currentUser.isBoardAdmin a.card-label.add-label.js-add-label @@ -129,9 +138,15 @@ template(name="changePermissionsPopup") li a(class="{{#if isLastAdmin}}disabled{{else}}js-set-normal{{/if}}") | {{_ 'normal'}} - unless isAdmin + if isNormal i.fa.fa-check span.sub-name {{_ 'normal-desc'}} + li + a(class="{{#if isLastAdmin}}disabled{{else}}js-set-comment-only{{/if}}") + | {{_ 'comment-only'}} + if isCommentOnly + i.fa.fa-check + span.sub-name {{_ 'comment-only-desc'}} if isLastAdmin hr p.quiet.bottom {{_ 'last-admin-desc'}} diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index 0af32f8f..1290fd13 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -89,11 +89,21 @@ BlazeComponent.extendComponent({ return TAPi18n.__(viewTitles[this.getView()]); }, + showTongueTitle() { + if (this.isOpen()) + return `${TAPi18n.__('sidebar-close')}`; + else + return `${TAPi18n.__('sidebar-open')}`; + }, + events() { return [{ 'click .js-hide-sidebar': this.hide, 'click .js-toggle-sidebar': this.toggle, 'click .js-back-home': this.setView, + 'click .js-shortcuts'() { + FlowRouter.go('shortcuts'); + }, }]; }, }).register('sidebar'); @@ -111,7 +121,17 @@ Template.memberPopup.helpers({ }, memberType() { const type = Users.findOne(this.userId).isBoardAdmin() ? 'admin' : 'normal'; - return TAPi18n.__(type).toLowerCase(); + if(type === 'normal'){ + const currentBoard = Boards.findOne(Session.get('currentBoard')); + const commentOnly = currentBoard.hasCommentOnly(this.userId); + if(commentOnly){ + return TAPi18n.__('comment-only').toLowerCase(); + } else { + return TAPi18n.__(type).toLowerCase(); + } + } else { + return TAPi18n.__(type).toLowerCase(); + } }, isInvited() { return Users.findOne(this.userId).isInvitedTo(Session.get('currentBoard')); @@ -134,8 +154,8 @@ Template.memberPopup.events({ Popup.close(); }), 'click .js-leave-member'() { - const currentBoard = Boards.findOne(Session.get('currentBoard')); - Meteor.call('quitBoard', currentBoard, (err, ret) => { + const boardId = Session.get('currentBoard'); + Meteor.call('quitBoard', boardId, (err, ret) => { if (!ret && ret) { Popup.close(); FlowRouter.go('home'); @@ -163,6 +183,9 @@ Template.membersWidget.helpers({ Template.membersWidget.events({ 'click .js-member': Popup.open('member'), 'click .js-manage-board-members': Popup.open('addMember'), + 'click .sandstorm-powerbox-request-identity'() { + window.sandstormRequestIdentity(); + }, 'click .js-member-invite-accept'() { const boardId = Session.get('currentBoard'); Meteor.user().removeInvite(boardId); @@ -295,11 +318,12 @@ BlazeComponent.extendComponent({ }).register('addMemberPopup'); Template.changePermissionsPopup.events({ - 'click .js-set-admin, click .js-set-normal'(event) { + 'click .js-set-admin, click .js-set-normal, click .js-set-comment-only'(event) { const currentBoard = Boards.findOne(Session.get('currentBoard')); const memberId = this.userId; const isAdmin = $(event.currentTarget).hasClass('js-set-admin'); - currentBoard.setMemberPermission(memberId, isAdmin); + const isCommentOnly = $(event.currentTarget).hasClass('js-set-comment-only'); + currentBoard.setMemberPermission(memberId, isAdmin, isCommentOnly); Popup.back(1); }, }); @@ -310,6 +334,16 @@ Template.changePermissionsPopup.helpers({ return currentBoard.hasAdmin(this.userId); }, + isNormal() { + const currentBoard = Boards.findOne(Session.get('currentBoard')); + return !currentBoard.hasAdmin(this.userId) && !currentBoard.hasCommentOnly(this.userId); + }, + + isCommentOnly() { + const currentBoard = Boards.findOne(Session.get('currentBoard')); + return !currentBoard.hasAdmin(this.userId) && currentBoard.hasCommentOnly(this.userId); + }, + isLastAdmin() { const currentBoard = Boards.findOne(Session.get('currentBoard')); return currentBoard.hasAdmin(this.userId) && (currentBoard.activeAdmins() === 1); diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index 9007af59..8f2f493e 100644 --- a/client/components/sidebar/sidebar.styl +++ b/client/components/sidebar/sidebar.styl @@ -6,11 +6,19 @@ bottom: 0 right: 0 - .sidebar-content - padding: 12px + .sidebar-shadow + position: absolute + top: 0 + bottom: 0 + right: 0 + left: 0 background: darken(white, 3%) box-shadow: -10px 0px 5px -10px darken(white, 30%) z-index: 10 + + .sidebar-content + padding: 12px + margin-bottom: 1.6em position: absolute top: 0 bottom: 0 @@ -51,6 +59,7 @@ .member, .card-label margin-right: 7px + margin-top: 5px .sidebar-list-item-description flex: 1 @@ -72,6 +81,16 @@ i.fa margin-right: 10px + .sidebar-shortcuts + margin: 0 + padding: 0 + top: auto + text-align: center + font-size: 0.8em + line-height: 1.6em + vertical-align: middle + color: darken(white, 40%) + .board-sidebar width: 248px right: -@width diff --git a/client/components/sidebar/sidebarFilters.jade b/client/components/sidebar/sidebarFilters.jade index 2b326493..9a9774bb 100644 --- a/client/components/sidebar/sidebarFilters.jade +++ b/client/components/sidebar/sidebarFilters.jade @@ -5,6 +5,12 @@ template(name="filterSidebar") ul.sidebar-list + li(class="{{#if Filter.labelIds.isSelected undefined}}active{{/if}}") + a.name.js-toggle-label-filter + span.sidebar-list-item-description + | {{_ 'filter-no-label'}} + if Filter.labelIds.isSelected undefined + i.fa.fa-check each currentBoard.labels li a.name.js-toggle-label-filter @@ -18,6 +24,12 @@ template(name="filterSidebar") i.fa.fa-check hr ul.sidebar-list + li(class="{{#if Filter.members.isSelected undefined}}active{{/if}}") + a.name.js-toggle-member-filter + span.sidebar-list-item-description + | {{_ 'filter-no-member'}} + if Filter.members.isSelected undefined + i.fa.fa-check each currentBoard.activeMembers with getUser userId li(class="{{#if Filter.members.isSelected _id}}active{{/if}}") @@ -86,4 +98,3 @@ template(name="disambiguateMultiMemberPopup") template(name="moveSelectionPopup") +boardLists - diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index a71e7fc7..51b0888b 100644 --- a/client/components/users/userHeader.jade +++ b/client/components/users/userHeader.jade @@ -12,10 +12,13 @@ template(name="memberMenuPopup") ul.pop-over-list with currentUser li: a.js-edit-profile {{_ 'edit-profile'}} - li: a.js-change-avatar {{_ 'edit-avatar'}} - li: a.js-change-password {{_ 'changePasswordPopup-title'}} - li: a.js-change-language {{_ 'changeLanguagePopup-title'}} - li: a.js-edit-notification {{_ 'editNotificationPopup-title'}} + li: a.js-change-settings {{_ 'change-settings'}} + li: a.js-change-avatar {{_ 'edit-avatar'}} + li: a.js-change-password {{_ 'changePasswordPopup-title'}} + li: a.js-change-language {{_ 'changeLanguagePopup-title'}} + li: a.js-edit-notification {{_ 'editNotificationPopup-title'}} + if currentUser.isAdmin + li: a.js-go-setting(href='/setting') {{_ 'admin-panel'}} hr ul.pop-over-list li: a.js-logout {{_ 'log-out'}} @@ -27,6 +30,8 @@ template(name="editProfilePopup") input.js-profile-fullname(type="text" value=profile.fullname autofocus) label | {{_ 'username'}} + span.error.hide.username-taken + | {{_ 'error-username-taken'}} input.js-profile-username(type="text" value=username) label | {{_ 'initials'}} @@ -61,3 +66,16 @@ template(name="changeLanguagePopup") = name if isCurrentLanguage i.fa.fa-check + +template(name="changeSettingsPopup") + ul.pop-over-list + li + a.js-toggle-system-messages + | {{_ 'hide-system-messages'}} + if hiddenSystemMessages + i.fa.fa-check + li + label.bold + | {{_ 'show-cards-minimum-count'}} + input#show-cards-count-at.inline-input.left(type="number" value="#{showCardsCountAt}" min="1" max="99" onkeydown="return false") + input.js-apply-show-cards-at.left(type="submit" value="{{_ 'apply'}}") diff --git a/client/components/users/userHeader.js b/client/components/users/userHeader.js index 10fdf699..73a11fc0 100644 --- a/client/components/users/userHeader.js +++ b/client/components/users/userHeader.js @@ -5,6 +5,7 @@ Template.headerUserBar.events({ Template.memberMenuPopup.events({ 'click .js-edit-profile': Popup.open('editProfile'), + 'click .js-change-settings': Popup.open('changeSettings'), 'click .js-change-avatar': Popup.open('changeAvatar'), 'click .js-change-password': Popup.open('changePassword'), 'click .js-change-language': Popup.open('changeLanguage'), @@ -14,6 +15,9 @@ Template.memberMenuPopup.events({ AccountsTemplates.logout(); }, + 'click .js-go-setting'() { + Popup.close(); + }, }); Template.editProfilePopup.events({ @@ -26,11 +30,18 @@ Template.editProfilePopup.events({ 'profile.fullname': fullname, 'profile.initials': initials, }}); - // XXX We should report the error to the user. + if (username !== Meteor.user().username) { - Meteor.call('setUsername', username); - } - Popup.back(); + Meteor.call('setUsername', username, function(error) { + const messageElement = tpl.$('.username-taken'); + if (error) { + messageElement.show(); + } else { + messageElement.hide(); + Popup.back(); + } + }); + } else Popup.back(); }, }); @@ -82,3 +93,26 @@ Template.changeLanguagePopup.events({ evt.preventDefault(); }, }); + +Template.changeSettingsPopup.helpers({ + hiddenSystemMessages() { + return Meteor.user().hasHiddenSystemMessages(); + }, + showCardsCountAt() { + return Meteor.user().getLimitToShowCardsCount(); + }, +}); + +Template.changeSettingsPopup.events({ + 'click .js-toggle-system-messages'() { + Meteor.call('toggleSystemMessages'); + }, + 'click .js-apply-show-cards-at'(evt, tpl) { + evt.preventDefault(); + const minLimit = parseInt(tpl.$('#show-cards-count-at').val(), 10); + if (!isNaN(minLimit)) { + Meteor.call('changeLimitToShowCardsCount', minLimit); + Popup.back(); + } + }, +}); diff --git a/client/config/blazeHelpers.js b/client/config/blazeHelpers.js index ef075907..73ee24b6 100644 --- a/client/config/blazeHelpers.js +++ b/client/config/blazeHelpers.js @@ -18,6 +18,4 @@ Blaze.registerHelper('currentCard', () => { Blaze.registerHelper('getUser', (userId) => Users.findOne(userId)); -Blaze.registerHelper('concat', function (...args) { - return Array.prototype.slice.call(args, 0, -1).join(''); -}); +Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join('')); diff --git a/client/lib/escapeActions.js b/client/lib/escapeActions.js index 49b80422..dc6b05b7 100644 --- a/client/lib/escapeActions.js +++ b/client/lib/escapeActions.js @@ -44,7 +44,7 @@ EscapeActions = { executeLowest() { return this._execute({ - multipleAction: false, + multipleActions: false, }); }, diff --git a/client/lib/filter.js b/client/lib/filter.js index 74305284..8129776b 100644 --- a/client/lib/filter.js +++ b/client/lib/filter.js @@ -63,6 +63,17 @@ class SetFilter { this._dep.depend(); return { $in: this._selectedElements }; } + + _getEmptySelector() { + this._dep.depend(); + let includeEmpty = false; + this._selectedElements.forEach((el) => { + if (el === undefined) { + includeEmpty = true; + } + }); + return includeEmpty ? { $eq: [] } : null; + } } // The global Filter object. @@ -95,16 +106,26 @@ Filter = { return {}; const filterSelector = {}; + const emptySelector = {}; + let includeEmptySelectors = false; this._fields.forEach((fieldName) => { const filter = this[fieldName]; - if (filter._isActive()) + if (filter._isActive()) { filterSelector[fieldName] = filter._getMongoSelector(); + emptySelector[fieldName] = filter._getEmptySelector(); + if (emptySelector[fieldName] !== null) { + includeEmptySelectors = true; + } + } }); const exceptionsSelector = {_id: {$in: this._exceptions}}; this._exceptionsDep.depend(); - return {$or: [filterSelector, exceptionsSelector]}; + if (includeEmptySelectors) + return {$or: [filterSelector, exceptionsSelector, emptySelector]}; + else + return {$or: [filterSelector, exceptionsSelector]}; }, mongoSelector(additionalSelector) { diff --git a/client/lib/i18n.js b/client/lib/i18n.js index e49a0001..4c02211a 100644 --- a/client/lib/i18n.js +++ b/client/lib/i18n.js @@ -2,26 +2,25 @@ // the language reactively. If the user is not connected we use the language // information provided by the browser, and default to english. -Tracker.autorun(() => { - const currentUser = Meteor.user(); - let language; - if (currentUser) { - language = currentUser.profile && currentUser.profile.language; - } - - if (!language) { - if(navigator.languages) { - language = navigator.languages[0]; - } else { - language = navigator.language || navigator.userLanguage; +Meteor.startup(() => { + Tracker.autorun(() => { + const currentUser = Meteor.user(); + let language; + if (currentUser) { + language = currentUser.profile && currentUser.profile.language; } - } - if (language) { - TAPi18n.setLanguage(language); + if (!language) { + if(navigator.languages) { + language = navigator.languages[0]; + } else { + language = navigator.language || navigator.userLanguage; + } + } - // XXX - const shortLanguage = language.split('-')[0]; - T9n.setLanguage(shortLanguage); - } + if (language) { + TAPi18n.setLanguage(language); + T9n.setLanguage(language); + } + }); }); diff --git a/client/lib/utils.js b/client/lib/utils.js index 4f772a60..9a9ff654 100644 --- a/client/lib/utils.js +++ b/client/lib/utils.js @@ -27,7 +27,7 @@ Utils = { // in fact, what we really care is screen size // large mobile device like iPad or android Pad has a big screen, it should also behave like a desktop // in a small window (even on desktop), Wekan run in compact mode. - // we can easily debug with a small window of desktop broswer. :-) + // we can easily debug with a small window of desktop browser. :-) isMiniScreen() { this.windowResizeDep.depend(); return $(window).width() <= 800; |