diff options
author | Lauri Ojansivu <x@xet7.org> | 2019-11-17 01:20:26 +0200 |
---|---|---|
committer | Lauri Ojansivu <x@xet7.org> | 2019-11-17 01:20:26 +0200 |
commit | 26e0bbce172f89baa380ddae19b7b495519db40f (patch) | |
tree | e9d7613160be5eee74b510cef5a471c04e78b06d /client | |
parent | a6366114718f0faf0e1c600374ffdd8745a3d9ff (diff) | |
download | wekan-26e0bbce172f89baa380ddae19b7b495519db40f.tar.gz wekan-26e0bbce172f89baa380ddae19b7b495519db40f.tar.bz2 wekan-26e0bbce172f89baa380ddae19b7b495519db40f.zip |
Swimlanes collapsed by default.
TODO:
- Add count.
- Move list names to top, if possible. I did not get it working yet.
- Try to fit collapse+swimlane name etc at same row.
Related #2804
Diffstat (limited to 'client')
-rw-r--r-- | client/components/swimlanes/swimlanes.jade | 31 | ||||
-rw-r--r-- | client/components/swimlanes/swimlanes.js | 16 | ||||
-rw-r--r-- | client/components/swimlanes/swimlanes.styl | 60 |
3 files changed, 80 insertions, 27 deletions
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index 9eab6054..3c70833e 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -1,24 +1,27 @@ template(name="swimlane") .swimlane +swimlaneHeader - .swimlane.js-lists.js-swimlane - if isMiniScreen - if currentListIsInThisSwimlane _id - +list(currentList) - unless currentList + // Minimize swimlanes next 2 lines below https://www.w3schools.com/howto/howto_js_accordion.asp + button(class="accordion") + div(class="panel") + .swimlane.js-lists.js-swimlane + if isMiniScreen + if currentListIsInThisSwimlane _id + +list(currentList) + unless currentList + each lists + +miniList(this) + if currentUser.isBoardMember + unless currentUser.isCommentOnly + +addListForm + else each lists - +miniList(this) + +list(this) + if currentCardIsInThisList _id ../_id + +cardDetails(currentCard) if currentUser.isBoardMember unless currentUser.isCommentOnly +addListForm - else - each lists - +list(this) - if currentCardIsInThisList _id ../_id - +cardDetails(currentCard) - if currentUser.isBoardMember - unless currentUser.isCommentOnly - +addListForm template(name="listsGroup") .swimlane.list-group.js-lists diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index f2fa882f..0b94174d 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -134,6 +134,22 @@ BlazeComponent.extendComponent({ } initSortable(boardComponent, $listsDom); + + // Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp + var acc = document.getElementsByClassName("accordion"); + var i; + for (i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + this.classList.toggle("active"); + var panel = this.nextElementSibling; + if (panel.style.maxHeight) { + panel.style.maxHeight = null; + } else { + panel.style.maxHeight = panel.scrollHeight + "px"; + } + }); + } + // Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp }, onCreated() { this.draggingActive = new ReactiveVar(false); diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 164c66d5..9a89bf07 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -1,5 +1,39 @@ @import 'nib' +// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp + +.accordion + cursor: pointer + width: 30px + height: 20px + border: none + outline: none + font-size: 18px + transition: 0.4s + padding-top: 0px + margin-top: 0px + +.accordion:after + // Unicode triagle right: + content: '\25B6' + color: #777 + font-weight: bold + float: left + +.active:after + // Unicode triangle down: + content: '\25BC' + +.panel + width: 100% + max-height: 0 + overflow: hidden + transition: max-height 0.2s ease-out + margin: 0px + padding: 0px + +// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp + .swimlane // Even if this background color is the same as the body we can't leave it // transparent, because that won't work during a swimlane drag. @@ -25,22 +59,22 @@ cursor: grabbing .swimlane-header-wrap - display: flex; - flex-direction: row; - flex: 1 0 100%; - background-color: #ccc; + display: flex + flex-direction: row + flex: 1 0 100% + background-color: #ccc .swimlane-header - font-size: 14px; + font-size: 14px padding: 5px 5px - font-weight: bold; - min-height: 9px; - width: 100%; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - word-wrap: break-word; - text-align: center; + font-weight: bold + min-height: 9px + width: 100% + overflow: hidden + -o-text-overflow: ellipsis + text-overflow: ellipsis + word-wrap: break-word + text-align: center .swimlane-header-menu position: absolute |