feat(console): init console table

2025-01-06 20:40:08 -05:00 · 2022-03-04 13:10:39 +08:00 · 2022-03-04 13:10:39 +08:00 · b30c431140
commit b30c431140
parent 92a40a4e6c
11 changed files with 148 additions and 0 deletions
--- a/packages/console/src/assets/images/default-placeholder.svg
+++ b/packages/console/src/assets/images/default-placeholder.svg
@ -0,0 +1,18 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.2" width="50" height="50" rx="8" fill="#77B255"/>
+<g clip-path="url(#clip0_1517_47630)">
+<path d="M40.1154 29.3335C40.1154 35.5468 33.3996 39.3335 25.1154 39.3335C16.8312 39.3335 10.1154 35.5468 10.1154 29.3335C10.1154 23.1202 16.8312 16.8335 25.1154 16.8335C33.3996 16.8335 40.1154 23.1202 40.1154 29.3335Z" fill="#C6E5B3"/>
+<path d="M36.5779 21.5632C37.7179 20.6465 38.4487 19.2423 38.4487 17.6665C38.4487 14.9057 36.2096 12.6665 33.4487 12.6665C31.0646 12.6665 29.0737 14.3365 28.5729 16.5707C27.4996 16.1682 26.3371 15.939 25.1154 15.939C23.8946 15.939 22.7312 16.1682 21.6579 16.5707C21.1571 14.3365 19.1662 12.6665 16.7821 12.6665C14.0212 12.6665 11.7821 14.9057 11.7821 17.6665C11.7821 19.2423 12.5129 20.6465 13.6529 21.5632C11.4487 23.7965 10.1154 26.5707 10.1154 29.3332C10.1154 35.5465 16.8312 30.1665 25.1154 30.1665C33.3996 30.1665 40.1154 35.5465 40.1154 29.3332C40.1154 26.5707 38.7821 23.7965 36.5779 21.5632Z" fill="#77B255"/>
+<path d="M16.3654 20.1668C17.9762 20.1668 19.2821 18.861 19.2821 17.2502C19.2821 15.6393 17.9762 14.3335 16.3654 14.3335C14.7546 14.3335 13.4487 15.6393 13.4487 17.2502C13.4487 18.861 14.7546 20.1668 16.3654 20.1668Z" fill="white"/>
+<path d="M16.3654 18.5C17.0557 18.5 17.6154 17.9404 17.6154 17.25C17.6154 16.5596 17.0557 16 16.3654 16C15.675 16 15.1154 16.5596 15.1154 17.25C15.1154 17.9404 15.675 18.5 16.3654 18.5Z" fill="#292F33"/>
+<path d="M33.8654 20.1668C35.4762 20.1668 36.7821 18.861 36.7821 17.2502C36.7821 15.6393 35.4762 14.3335 33.8654 14.3335C32.2546 14.3335 30.9487 15.6393 30.9487 17.2502C30.9487 18.861 32.2546 20.1668 33.8654 20.1668Z" fill="white"/>
+<path d="M33.8654 18.5C34.5557 18.5 35.1154 17.9404 35.1154 17.25C35.1154 16.5596 34.5557 16 33.8654 16C33.175 16 32.6154 16.5596 32.6154 17.25C32.6154 17.9404 33.175 18.5 33.8654 18.5Z" fill="#292F33"/>
+<path d="M21.7821 28.5002C22.2423 28.5002 22.6154 28.1271 22.6154 27.6668C22.6154 27.2066 22.2423 26.8335 21.7821 26.8335C21.3218 26.8335 20.9487 27.2066 20.9487 27.6668C20.9487 28.1271 21.3218 28.5002 21.7821 28.5002Z" fill="#5C913B"/>
+<path d="M28.4487 28.5002C28.909 28.5002 29.2821 28.1271 29.2821 27.6668C29.2821 27.2066 28.909 26.8335 28.4487 26.8335C27.9885 26.8335 27.6154 27.2066 27.6154 27.6668C27.6154 28.1271 27.9885 28.5002 28.4487 28.5002Z" fill="#5C913B"/>
+</g>
+<defs>
+<clipPath id="clip0_1517_47630">
+<rect width="30" height="30" fill="white" transform="translate(10.1154 11)"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@ -30,8 +30,10 @@
  --color-error-90: #ffdad4;
  --color-inverse-on-surface: #eff1f1;
  --color-neutral-70: #a9acac;
+  --color-neutral-90: #e0e3e3;
  --color-on-secondary-container: #201c00;
  --color-component-caption: #747778;
+  --color-outline: #78767f;
 }

 $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
@ -40,5 +42,7 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
  --font-title-medium: 500 16px/24px #{$font-family};
  --font-heading-small: 600 24px/32px #{$font-family};
  --font-body: normal 16px/22px #{$font-family};
+  --font-small-text: normal 12px/17px #{$font-family};
  --font-button: 500 14px/20px #{$font-family};
+  --font-subhead-2: 500 14px/20px #{$font-family};
 }
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@ -6,6 +6,7 @@
  border-radius: _.unit(2);
  font: var(--font-button);
  transition: background 0.2s ease-in-out;
+  @include _.text-ellipsis;

  &:not(:disabled) {
    cursor: pointer;
--- a/packages/console/src/components/ImagePlaceholder/index.module.scss
+++ b/packages/console/src/components/ImagePlaceholder/index.module.scss
@ -0,0 +1,4 @@
+.placeholder {
+  width: 50px;
+  height: 50px;
+}
--- a/packages/console/src/components/ImagePlaceholder/index.tsx
+++ b/packages/console/src/components/ImagePlaceholder/index.tsx
@ -0,0 +1,11 @@
+import React from 'react';
+
+import defaultPlaceholder from '@/assets/images/default-placeholder.svg';
+
+import * as styles from './index.module.scss';
+
+const ImagePlaceholder = () => {
+  return <img src={defaultPlaceholder} className={styles.placeholder} />;
+};
+
+export default ImagePlaceholder;
--- a/packages/console/src/components/ItemPreview/index.module.scss
+++ b/packages/console/src/components/ItemPreview/index.module.scss
@ -0,0 +1,21 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+
+  > div:not(:first-child) {
+    margin-left: _.unit(4);
+  }
+
+  .title {
+    font: var(--font-body);
+    color: var(--color-primary);
+  }
+
+  .subtitle {
+    margin-top: _.unit(0.5);
+    font: var(--font-small-text);
+    color: var(--color-outline);
+  }
+}
--- a/packages/console/src/components/ItemPreview/index.tsx
+++ b/packages/console/src/components/ItemPreview/index.tsx
@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+};
+
+const ItemPreview = ({ title, subtitle, icon }: Props) => {
+  return (
+    <div className={styles.item}>
+      {icon}
+      <div>
+        <div className={styles.title}>{title}</div>
+        {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default ItemPreview;
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@ -1,4 +1,11 @@
+@use '@/scss/underscore' as _;
+
 .headline {
  display: flex;
  justify-content: space-between;
 }
+
+.table {
+  margin-top: _.unit(6);
+  width: 100%;
+}
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@ -3,6 +3,8 @@ import React from 'react';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
+import ImagePlaceholder from '@/components/ImagePlaceholder';
+import ItemPreview from '@/components/ItemPreview';

 import * as styles from './index.module.scss';

@ -13,6 +15,26 @@ const Applications = () => {
        <CardTitle title="applications.title" subtitle="applications.subtitle" />
        <Button disabled title="admin_console.applications.create" />
      </div>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <td>Application Name</td>
+            <td>Client ID</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <ItemPreview
+                title="Default App"
+                subtitle="Single Page Application"
+                icon={<ImagePlaceholder />}
+              />
+            </td>
+            <td>RUMatENw0rFWO5aGbMI8tY2Qol50eOg3</td>
+          </tr>
+        </tbody>
+      </table>
    </Card>
  );
 };
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@ -8,3 +8,9 @@
  align-items: center;
  justify-content: center;
 }
+
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@ -1,3 +1,5 @@
+@use '@/scss/underscore' as _;
+
 body {
  margin: 0;
  padding: 0;
@ -15,3 +17,32 @@ input {
  border: none;
  outline: none;
 }
+
+table {
+  border: 1px solid var(--color-neutral-90);
+  border-radius: _.unit(2);
+  border-spacing: 0;
+
+  thead,
+  tbody {
+    td {
+      padding: _.unit(3) _.unit(4);
+
+      &:first-child,
+      &:last-child {
+        padding: _.unit(3) _.unit(8);
+      }
+    }
+  }
+
+  thead {
+    font: var(--font-subhead-2);
+    color: var(--color-component-caption);
+  }
+
+  tbody {
+    td {
+      border-top: 1px solid var(--color-neutral-90);
+    }
+  }
+}