Merge pull request #123 from xtremespb/core_270521

Fix: <mtable> styling and UX improvements
xtremespb · May 28, 2021 · c2d5a4b · c2d5a4b
2 parents 6e673f9 + 7bb3e2e
commit c2d5a4b
Show file tree

Hide file tree

Showing 10 changed files with 1,075 additions and 2,003 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
 		"mini-css-extract-plugin": "^1.6.0",
 		"postcss": "^8.3.0",
 		"postcss-loader": "^5.3.0",
-		"postcss-preset-env": "^6.7.0",
+		"postcss-preset-env": "^5.3.0",
 		"postcss-url": "^10.1.3",
 		"pretty-checkbox": "^3.0.3",
 		"puppeteer": "^9.1.1",

diff --git a/src/modules/backup/web/admin/backupList/index.marko b/src/modules/backup/web/admin/backupList/index.marko
@@ -27,7 +27,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 	</if>
 	<else>
 		<mtable
-			css="table is-striped is-hoverable is-fullwidth"
+			css="table is-bordered is-striped is-hoverable is-fullwidth"
 			dataSource={
 				method: "post",
 				url: "/api/backup/list",

diff --git a/src/modules/boilerplate/web/admin/dataList/index.marko b/src/modules/boilerplate/web/admin/dataList/index.marko
@@ -15,7 +15,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 		</span>&nbsp;${out.global.i18n.t("moduleTitle")}
 	</h1>
 	<mtable
-		css="table is-striped is-hoverable is-fullwidth"
+		css="table is-bordered is-striped is-hoverable is-fullwidth"
 		dataSource={
 			method: "post",
 			url: `/api/${moduleConfig.id}/list`,

diff --git a/src/modules/pages/web/admin/pagesList/index.marko b/src/modules/pages/web/admin/pagesList/index.marko
@@ -28,7 +28,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 		<div class="column">
 			<mtable
 				key="z3_ap_ps_table"
-				css="table is-striped is-hoverable is-fullwidth"
+				css="table is-bordered is-striped is-hoverable is-fullwidth"
 				dataSource={
 					method: "post",
 					url: "/api/pages/list",

diff --git a/src/modules/registry/web/admin/dataList/index.marko b/src/modules/registry/web/admin/dataList/index.marko
@@ -13,7 +13,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 		</span>&nbsp;${out.global.i18n.t("moduleTitle")}
 	</h1>
 	<mtable
-		css="table is-striped is-hoverable is-fullwidth"
+		css="table is-bordered is-striped is-hoverable is-fullwidth"
 		dataSource={
 			method: "post",
 			url: "/api/registry/list",

diff --git a/src/modules/users/web/acl/aclList/index.marko b/src/modules/users/web/acl/aclList/index.marko
@@ -16,7 +16,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 		<div class="column">
 			<mtable
 				key="z3_ap_ps_table"
-				css="table is-striped is-hoverable is-fullwidth"
+				css="table is-bordered is-striped is-hoverable is-fullwidth"
 				dataSource={
 					method: "post",
 					url: "/api/acl/list",

diff --git a/src/modules/users/web/users/usersList/index.marko b/src/modules/users/web/users/usersList/index.marko
@@ -13,7 +13,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 		</span>&nbsp;${out.global.i18n.t("moduleTitle.users")}
 	</h1>
 	<mtable
-		css="table is-striped is-hoverable is-fullwidth"
+		css="table is-bordered is-striped is-hoverable is-fullwidth"
 		dataSource={
 			method: "post",
 			url: "/api/users/list",
@@ -29,7 +29,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 				id: "username",
 				type: "input",
 				modes: ["equals", "notEquals", "isLike", "notLike"],
-				label: out.global.i18n.t("username")
+				label: out.global.i18n.t("username"),
 			},
 			{
 				id: "createdAt",
@@ -78,7 +78,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 				id: "username",
 				title: out.global.i18n.t("username"),
 				css: "z3-ap-users-list-username",
-				sortable: true
+				sortable: true,
 			},
 			{
 				id: "email",

diff --git a/src/shared/marko/components/mtable/index.marko b/src/shared/marko/components/mtable/index.marko
@@ -182,13 +182,13 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 		<div class="notification is-danger">${state.error}</div>
 	</if>
 	<else>
-		<div class="table-container">
-			<table class=input.css id=`${input.id}_tableWrap`>
-				<thead class="z3-mt-noselect">
+		<div class="table-container z3-mt-table-container">
+			<table class=`${input.css} z3-mt-table-wrap` id=`${input.id}_tableWrap`>
+				<thead class="z3-mt-noselect z3-mt-table-head">
 					<tr>
 						<if(input.checkboxColumn)>
 							<th style="width:10px">
-								<div class="z3-pretty p-default">
+								<div class="z3-pretty p-default z3-mt-pretty-checkbox-id">
 									<input type="checkbox" on-change("setCheckboxes") checked=state.allCheckboxes/>
 									<div class="state p-primary">
 										<label/>
@@ -200,15 +200,15 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 							<th
 								data-id=column.id
 								data-sortable=column.sortable
-								class=`${column.css || ""}${column.sortable ? " z3-mt-sortable" : ""}`
+								class=`z3-mt-th ${column.css || ""}${column.sortable ? " z3-mt-sortable" : ""}`
 								on-click("onColumnClick")>
-								${column.title}&nbsp;<i class=`mdi ${
+								<div class=`z3-mt-sort mdi ${
 									state.sortDirection === "asc" ? "mdi-chevron-up" : "mdi-chevron-down"
-								}${state.sortId === column.id ? " z3-mt-visible" : " z3-mt-hidden"}`/>
+								}${state.sortId === column.id ? " z3-mt-visible" : " z3-mt-hidden"}`/>${column.title}
 							</th>
 						</for>
 						<if(input.actions && input.actions.length)>
-							<th>${input.actionsTitle}</th>
+							<th class="z3-mt-actions-wrap">${input.actionsTitle}</th>
 						</if>
 					</tr>
 				</thead>
@@ -218,7 +218,7 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 							<tr>
 								<if(input.checkboxColumn)>
 									<td style="width:10px">
-										<div class="z3-pretty p-icon">
+										<div class="z3-pretty p-icon z3-mt-pretty-checkbox-id">
 											<input
 												data-id=(row.id || row._id)
 												type="checkbox"
@@ -232,7 +232,8 @@ $ const token = cookies.get(`${out.global.siteId || "zoia3"}.authToken`);
 									</td>
 								</if>
 								<for|column| of=input.columns.map(c => c.id)>
-									<td>
+									$ const columnData = input.columns.find(c => c.id === column);
+									<td class=`${columnData.multiline ? "" : "z3-mt-td"}`>
 										$!{row[column]
 										? input.processValue
 											? input.processValue(row.id || row._id, row[column], column, row)

diff --git a/src/shared/marko/components/mtable/mtable.scss b/src/shared/marko/components/mtable/mtable.scss
@@ -10,6 +10,7 @@
 
 .z3-mt-hidden {
     opacity: 0;
+    margin-right: -16px !important;
 }
 
 .z3-mt-sortable {
@@ -63,6 +64,7 @@
     white-space: nowrap;
     text-align: center !important;
     width: 10px;
+    max-width: 150px;
 }
 
 .z3-mt-pagination {
@@ -160,6 +162,49 @@
     cursor: pointer;
 }
 
+.z3-mt-pretty-checkbox-id {
+    margin-right: 0 !important;
+}
+
+table tr:last-child td:first-child {
+    border-bottom-left-radius: 2px;
+}
+
+table tr:last-child td:last-child {
+    border-bottom-right-radius: 2px;
+}
+
+.z3-mt-table-wrap {
+    border-style: hidden;
+}
+
+.z3-mt-table-container {
+    border: 1px solid $grey-lighter;
+    border-radius: 2px;
+}
+
+.z3-mt-table-head {
+    background: $grey-lightest !important;
+}
+
+.z3-mt-th,
+.z3-mt-td {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 250px;
+}
+
+.z3-mt-sort {
+    display: inline-block;
+    margin-right: 4px;
+}
+
+.z3-mt-loading-spinner {
+    background-color: transparent !important;
+    background: transparent !important;
+}
+
 @keyframes z3-mt-filter-spinner {
     0% {
         transform: rotate(0deg);