Fixed #1777- Improve table row reorder highlight

primefaces · Nov 18, 2021 · c0cffe4 · c0cffe4
1 parent 2c45f4f
commit c0cffe4
Show file tree

Hide file tree

Showing 43 changed files with 580 additions and 142 deletions.
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #93cbf9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #93cbf9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #93cbf9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #93cbf9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5293,7 +5299,7 @@
   background: #64B5F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
@@ -5374,3 +5380,10 @@
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
   background: #64B5F6;
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #64B5F6;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #64B5F6;
+}
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #a7d8a9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #a7d8a9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #a7d8a9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #a7d8a9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5293,7 +5299,7 @@
   background: #81C784;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
@@ -5374,3 +5380,10 @@
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
   background: #81C784;
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #81C784;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #81C784;
+}
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #ffe284;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #ffe284;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5293,7 +5299,7 @@
   background: #FFD54F;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
@@ -5374,3 +5380,10 @@
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
   background: #FFD54F;
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #FFD54F;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #FFD54F;
+}
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
@@ -2292,7 +2292,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2334,6 +2333,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3279,7 +3282,6 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #cf95d9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3313,6 +3315,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #cf95d9;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5293,7 +5299,7 @@
   background: #BA68C8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
@@ -5374,3 +5380,10 @@
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
   background: #BA68C8;
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #BA68C8;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #BA68C8;
+}
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2304,7 +2304,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #e3f3fe;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #e3f3fe;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #8dd0ff;
   color: #151515;
@@ -3291,7 +3294,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #e3f3fe;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #e3f3fe;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #8dd0ff;
   color: #151515;
@@ -5305,7 +5311,7 @@
   background: #8dd0ff;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #151515;
   line-height: 1.5rem;
 }
 

diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2304,7 +2304,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #f0e6f5;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid #f0e6f5;
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #c298d8;
   color: #151515;
@@ -3291,7 +3294,6 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: #f0e6f5;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid #f0e6f5;
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #c298d8;
   color: #151515;
@@ -5305,7 +5311,7 @@
   background: #c298d8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #151515;
   line-height: 1.5rem;
 }
 

diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
@@ -2304,7 +2304,6 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2346,6 +2345,10 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
+.p-datatable .p-datatable-tbody > tr:focus {
+  outline: 1px solid rgba(38, 143, 255, 0.5);
+  outline-offset: -1px;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007bff;
   color: #ffffff;
@@ -3291,7 +3294,6 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3325,6 +3327,10 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #212529;
 }
+.p-treetable .p-treetable-tbody > tr:focus {
+  outline: 1px solid rgba(38, 143, 255, 0.5);
+  outline-offset: -1px;
+}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007bff;
   color: #ffffff;
@@ -5305,7 +5311,7 @@
   background: #007bff;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #ffffff;
   line-height: 1.5rem;
 }