Added collapsing feature to tree view, when there is only one item in group selected

Author: almerk

client/src/components/subjects/index-tree.vue

@@ -1,5 +1,5 @@
 <template>
- <div role="tree" :class="{ 'view': viewOnly }">
+ <div role="tree" :class="{ view: viewOnly }">
  <tree-item
  :subject="root"
  :groups="groups"
@@ -68,9 +68,37 @@ div[role="tree"] {
  font-size: 12pt;
  overflow: auto;
 }
-div[role="tree"].view .indeterminate:not(:hover){
- opacity:0;
- display: block;
- height:0;
+div[role="tree"] ul.group:hover {
+ box-shadow: inset 1px 0 0 0 black;
+}
+div[role="tree"].view .indeterminate {
+ display: block;
+ font-size: 0.8em;
+ opacity: 0.7;
+}
+div[role="tree"].view .indeterminate sup {
+ font-weight: 900;
+ font-size: 1em;
+}
+div[role="tree"].view .collapsed.group {
+ display: flex;
+ flex-direction: row;
+ align-items: baseline;
+}
+div[role="tree"].view .collapsed.group > * {
+ display: block;
+}
+div[role="tree"].view .collapsed.group > .indeterminate {
+ max-width: 25%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+div[role="tree"].view .collapsed.group > .indeterminate::after{
+ content:' > ';
+ font-weight: 700;
+}
+div[role="tree"] .collapsed.group > ul {
+ flex-grow: 1;
 }
 </style>

client/src/components/subjects/tree-item.vue

@@ -1,6 +1,9 @@
 <template>
- <ul>
- <label :class="[{indeterminate:containsSelected},subject.$type]" v-show="showCase">
+ <ul
+ v-if="showCase"
+ :class="[{ collapsed: selectedUsers==1 }, subject.$type]"
+ >
+ <label :class="[{ indeterminate: containsSelected }]">
  <input
  type="checkbox"
  v-model="isChecked"
@@ -42,10 +45,10 @@ export default {
  },
  computed: {
  showCase() {
-  if(!this.viewOnly) return true;
-  if(this.isChecked) return true;
-  if(this.containsSelected) return true;
-  return false;
+ if (!this.viewOnly) return true;
+ if (this.isChecked) return true;
+ if (this.containsSelected) return true;
+ return false;
  },
  children() {
  return this.getChildren(this.subject);
@@ -130,13 +133,12 @@ label {
  cursor: pointer;
  text-transform: none;
 }
-label.group {
+ul.group > label {
  text-transform: uppercase;
 }
 input:checked ~ span {
  font-weight: 600;
 }
-
 input[indeterminate] ~ span {
  font-weight: 400;
 }