+
+
+
+
+
+
+
+ {{ markedRows.length > 1 ? `${markedRows.length} ${marking.rowNamePlural} selected`: `${markedRows.length} ${marking.rowName} selected` }}
+
+
+
+
+
+
+
+
+
r.marked = false);
this.markedRows = [];
},
- unmarkRow(rowIndex, ctrlKeyModifier) {
- if (ctrlKeyModifier) {
+ unmarkRow(rowIndex) {
+ if (this.markedRows.length > 1) {
let row = this.visibleRows[rowIndex],
positionInMarkedArray = this.markedRows.indexOf(row);
row.marked = false;
this.markedRows.splice(positionInMarkedArray, 1);
+ } else if (this.markedRows.length === 1) {
+ this.unmarkAllRows();
+ }
- if (this.markedRows.length === 0) {
- this.unpause();
- }
- } else if (this.markedRows.length) {
- this.undoMarkedRows();
- this.markRow(rowIndex);
+ if (this.markedRows.length === 0) {
+ this.unpause();
}
},
markRow(rowIndex, keyModifier) {
- if (!this.enableMarking) {
+ if (!this.marking.enable) {
return;
}
@@ -691,12 +734,13 @@ export default {
this.markedRows[insertMethod](markedRow);
},
unmarkAllRows(skipUnpause) {
- this.markedRows.forEach(row => row.marked = false);
- this.markedRows = [];
+ this.undoMarkedRows();
+ this.isShowingMarkedRowsOnly = false;
this.unpause();
+ this.restorePreviousRows();
},
markMultipleConcurrentRows(rowIndex) {
- if (!this.enableMarking) {
+ if (!this.marking.enable) {
return;
}
@@ -733,6 +777,34 @@ export default {
}
}
}
+ },
+ checkForMarkedRows() {
+ this.markedRows = this.table.filteredRows.getRows().filter(row => row.marked);
+ },
+ showRows(rows) {
+ this.table.filteredRows.rows = rows;
+ this.table.filteredRows.emit('filter');
+ },
+ toggleMarkedRows(flag) {
+ if (flag) {
+ this.isShowingMarkedRowsOnly = true;
+ this.userScroll = this.scrollable.scrollTop;
+ this.allRows = this.table.filteredRows.getRows();
+
+ this.showRows(this.markedRows);
+ this.setHeight();
+ } else {
+ this.isShowingMarkedRowsOnly = false;
+ this.restorePreviousRows();
+ }
+ },
+ restorePreviousRows() {
+ if (this.allRows && this.allRows.length) {
+ this.showRows(this.allRows);
+ this.allRows = [];
+ this.setHeight();
+ this.scrollable.scrollTop = this.userScroll;
+ }
}
}
}
diff --git a/src/styles/_legacy.scss b/src/styles/_legacy.scss
index 6772b74772..9076b30246 100644
--- a/src/styles/_legacy.scss
+++ b/src/styles/_legacy.scss
@@ -28,6 +28,16 @@
height: $controlBarH;
}
+.c-control-bar {
+ display: flex;
+ align-items: center;
+
+ &__label {
+ display: inline-block;
+ white-space: nowrap;
+ }
+}
+
.l-view-section {
@include abs();
overflow: auto;
diff --git a/src/ui/components/ToggleSwitch.vue b/src/ui/components/ToggleSwitch.vue
index 793751e71a..89c917fc95 100644
--- a/src/ui/components/ToggleSwitch.vue
+++ b/src/ui/components/ToggleSwitch.vue
@@ -1,16 +1,25 @@
-
diff --git a/src/ui/components/toggle-switch.scss b/src/ui/components/toggle-switch.scss
index 045cd827fa..20ca28a648 100644
--- a/src/ui/components/toggle-switch.scss
+++ b/src/ui/components/toggle-switch.scss
@@ -2,15 +2,40 @@
$d: 12px;
$m: 2px;
$br: $d/1.5;
- cursor: pointer;
- overflow: hidden;
- display: inline;
+ display: inline-flex;
+ align-items: center;
vertical-align: middle;
+ &__control,
+ &__label {
+ flex: 0 0 auto;
+ }
+
+ &__control {
+ cursor: pointer;
+ overflow: hidden;
+ display: block;
+ }
+
+ input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+
+ &:checked {
+ + .c-toggle-switch__slider {
+ background: $colorKey; // TODO: make discrete theme constants for these colors
+ &:before {
+ transform: translateX(100%);
+ }
+ }
+ }
+ }
+
&__slider {
+ // Sits within __switch
background: $colorBtnBg; // TODO: make discrete theme constants for these colors
border-radius: $br;
- //box-shadow: inset rgba($colorBtnFg, 0.4) 0 0 0 1px;
display: inline-block;
height: $d + ($m*2);
position: relative;
@@ -31,18 +56,9 @@
}
}
- input {
- opacity: 0;
- width: 0;
- height: 0;
-
- &:checked {
- + .c-toggle-switch__slider {
- background: $colorKey; // TODO: make discrete theme constants for these colors
- &:before {
- transform: translateX(100%);
- }
- }
- }
+ &__label {
+ margin-left: $interiorMarginSm;
+ margin-right: $interiorMargin;
+ white-space: nowrap;
}
}