Add batch action functionality to table Component
These changes aren't currently implemented on any table.
It will be added to event logs and local user table.
- Create tableCheckbox component to handle custom styles
and indeterminate state which needs to be set with JS
- Update tableComponent layout to allow transition for
toolbar. Updated user-accounts layout and styles to
account for these changes
Tested on Chrome, Safari, Firefox, Edge, IE
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic57a090db1ef66f9d33facfdc425db868ae8d8c6
diff --git a/app/common/styles/base/variables.scss b/app/common/styles/base/variables.scss
index 0e09f86..55a3eed 100755
--- a/app/common/styles/base/variables.scss
+++ b/app/common/styles/base/variables.scss
@@ -3,4 +3,12 @@
$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
$duration--moderate-02: 240ms; //Expansion, system communication, toast
$duration--slow-01: 400ms; //Large expansion, important system notifications
-$duration--slow-02: 700ms; //Background dimming
\ No newline at end of file
+$duration--slow-02: 700ms; //Background dimming
+
+// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing
+$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
+$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 0178486..5aa4915 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -147,6 +147,10 @@
}
}
+.bmc-table__container {
+ position: relative;
+}
+
.bmc-table {
width: 100%;
&.small {
@@ -223,4 +227,126 @@
.bmc-table__row-actions {
text-align: right;
+}
+
+.bmc-table__checkbox-container {
+ position: relative;
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+}
+
+.bmc-table__checkbox {
+ margin: 0;
+ line-height: 1;
+ position: absolute;
+ width: 1rem;
+ height: 1rem;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ &::before {
+ // checkbox border
+ box-sizing: border-box;
+ content: "";
+ width: 1rem;
+ height: 1rem;
+ position: absolute;
+ left: 0;
+ top: 0.15rem;
+ background-color: transparent;
+ border: 2px solid $border-color-02;
+ border-radius: 1px;
+ }
+ &::after {
+ // checkbox check mark
+ content: "";
+ position: absolute;
+ left: 0.2rem;
+ top: 0.15rem;
+ width: 0.6rem;
+ height: 0.3rem;
+ background: none;
+ border-left: 2px solid $primary-light;
+ border-bottom: 2px solid $primary-light;
+ transform: scale(0) rotate(-45deg);
+ transform-origin: bottom right;
+ }
+ &.checked::before ,
+ &.indeterminate::before {
+ background: $primary-accent;
+ border-color: $primary-accent;
+ }
+ &.checked::after {
+ transform: scale(1) rotate(-45deg);
+ }
+ &.indeterminate::after {
+ transform: scale(1) rotate(0deg);
+ border-left: 0 solid $primary-light;
+ border-bottom: 2px solid $primary-light;
+ top: 0.4rem;
+ }
+}
+
+.bmc-table__checkbox-input {
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+ margin: 0;
+}
+
+.bmc-table__toolbar {
+ position: absolute;
+ left: 0;
+ right: 1px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ color: $text-03;
+ background-color: $primary-accent;
+ max-height: 40px;
+ padding-left: 1em;
+ padding-top: 0.5em;
+ padding-right: 0;
+ padding-bottom: 0.5em;
+ transform: translateY(-40px);
+ &.ng-animate {
+ transition: transform $duration--moderate-02 $standard-easing--productive;
+ }
+ &.ng-enter {
+ transform: translateY(0);
+ }
+ &.ng-enter.ng-enter-active {
+ transform: translateY(-40px);
+ }
+ &.ng-leave {
+ transform: translateY(-40px);
+ }
+ &.ng-leave.ng-leave-active {
+ transform: translateY(0);
+ }
+ .btn-tertiary {
+ color: $text-03;
+ padding-top:0;
+ padding-bottom:0;
+ position: relative;
+ .icon {
+ fill: $text-03;
+ margin: 0;
+ }
+ }
+}
+
+.toolbar__batch-actions {
+ .btn-close {
+ border-top: none;
+ border-bottom: none;
+ border-left: 2px solid $primary-light;
+ margin-left: 0.5em;
+ }
+}
+
+.toolbar__selection-count {
+ margin: 0;
}
\ No newline at end of file