Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

feat(console): show toast after app created (#354)

Browse source 
* feat(console): show toast after app created

* feat(console): use css var for shadow
This commit is contained in:
Gao Sun 2022-03-10 12:52:56 +08:00 committed by GitHub
parent d7c0d4bf80
commit 33fa309064
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 86 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/package.json
View file

@ -20,6 +20,7 @@
"@logto/schemas": "^0.1.0",
"@silverhand/essentials": "^1.1.6",
"classnames": "^2.3.1",
"csstype": "^3.0.11",
"i18next": "^21.6.12",
"i18next-browser-languagedetector": "^6.1.3",
"ky": "^0.30.0",
@ -27,6 +28,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.27.1",
"react-hot-toast": "^2.2.0",
"react-i18next": "^11.15.4",
"react-modal": "^3.14.4",
"react-router-dom": "^6.2.2",

2
packages/console/src/App.tsx
View file

@ -7,6 +7,7 @@ import * as styles from './App.module.scss';
import AppContent from './components/AppContent';
import Content from './components/Content';
import Sidebar, { getPath, sections } from './components/Sidebar';
import Toast from './components/Toast';
import Topbar from './components/Topbar';
import initI18n from './i18n/init';
import ApiResourceDetails from './pages/ApiResourceDetails';
@ -33,6 +34,7 @@ const Main = () => {
return (
<SWRConfig value={{ fetcher }}>
<Toast />
<AppContent theme="light">
<Topbar />
<div className={styles.content}>

1
packages/console/src/components/AppContent/index.module.scss
View file

@ -43,6 +43,7 @@
--color-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-green: #66bb6a;
--shadow-light-s1: 0 2px 8px rgba(0, 0, 0, 8%);
}
$font-family: 'SF UI Text', 'SF Pro Display', sans-serif;

19
packages/console/src/components/Toast/index.module.scss Normal file
View file

@ -0,0 +1,19 @@
@use '@/scss/underscore' as _;
div.toast {
padding: _.unit(3) _.unit(4);
font: var(--font-body-2);
color: var(--color-component-text);
box-shadow: var(--light-shadow-s1);
border-radius: _.unit(2);
max-width: none;
> div[role='status'] {
margin: 0 0 0 _.unit(3);
}
&.success {
border: 1px solid #66bb6a;
background: linear-gradient(0deg, rgba(102, 187, 106, 15%), rgba(102, 187, 106, 15%)), #fff;
}
}

18
packages/console/src/components/Toast/index.tsx Normal file
View file

@ -0,0 +1,18 @@
import classNames from 'classnames';
import React from 'react';
import { Toaster } from 'react-hot-toast';
import * as styles from './index.module.scss';
const Toast = () => {
return (
<Toaster
toastOptions={{
className: styles.toast,
success: { className: classNames(styles.toast, styles.success) },
}}
/>
);
};
export default Toast;

4
packages/console/src/components/Tooltip/index.module.scss
View file

@ -6,7 +6,7 @@
border-radius: 8px;
background: #191c1d;
color: #e0e3e3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 8%);
box-shadow: var(--light-shadow-s1);
padding: _.unit(2) _.unit(3);
font: var(--font-body);
@ -20,6 +20,6 @@
left: 50%;
top: 100%;
transform: translateX(-50%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 8%);
box-shadow: var(--light-shadow-s1);
}
}

18
packages/console/src/pages/Applications/index.tsx
View file

@ -1,9 +1,7 @@
import { Application, Setting } from '@logto/schemas';
import {
conditional,
conditionalString,
} from '@silverhand/essentials/lib/utilities/conditional.js';
import { conditional } from '@silverhand/essentials/lib/utilities/conditional.js';
import React, { useState } from 'react';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import Modal from 'react-modal';
import { useNavigate } from 'react-router-dom';
@ -52,11 +50,13 @@ const Applications = () => {
if (createdApp) {
void mutate(conditional(data && [...data, createdApp]));
navigate(
`/applications/${createdApp.id}${conditionalString(
!setting?.adminConsole.applicationSkipGetStarted && '/get-started'
)}`
);
if (setting?.adminConsole.applicationSkipGetStarted) {
toast.success(t('applications.application_created', { name: createdApp.name }));
navigate(`/applications/${createdApp.id}`);
} else {
navigate(`/applications/${createdApp.id}/get-started`);
}
}
}}
/>

2
packages/phrases/src/locales/en.ts
View file

@ -53,6 +53,8 @@ const translation = {
application_description: 'Application Description',
select_application_type: 'Select an Application Type',
no_application_type_selected: 'You have to select an application type to proceed.',
application_created:
'The application {{name}} has been successfully created! \nNow finish your application settings.',
client_id: 'Client ID',
type: {
native: {

2
packages/phrases/src/locales/zh-cn.ts
View file

@ -55,6 +55,8 @@ const translation = {
application_description: 'Application Description',
select_application_type: 'Select an application type',
no_application_type_selected: 'You have to select an application type to proceed.',
application_created:
'The application {{name}} has been successfully created! \nNow finish your application settings.',
client_id: 'Client ID',
type: {
native: {

33
pnpm-lock.yaml
View file

@ -34,6 +34,7 @@ importers:
'@types/react-dom': ^17.0.9
'@types/react-modal': ^3.13.1
classnames: ^2.3.1
csstype: ^3.0.11
eslint: ^8.10.0
i18next: ^21.6.12
i18next-browser-languagedetector: ^6.1.3
@ -47,6 +48,7 @@ importers:
react: ^17.0.2
react-dom: ^17.0.2
react-hook-form: ^7.27.1
react-hot-toast: ^2.2.0
react-i18next: ^11.15.4
react-modal: ^3.14.4
react-router-dom: ^6.2.2
@ -58,6 +60,7 @@ importers:
'@logto/schemas': link:../schemas
'@silverhand/essentials': 1.1.6
classnames: 2.3.1
csstype: 3.0.11
i18next: 21.6.12
i18next-browser-languagedetector: 6.1.3
ky: 0.30.0
@ -65,6 +68,7 @@ importers:
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
react-hook-form: 7.27.1_react@17.0.2
react-hot-toast: 2.2.0_383bc679f6b8b3c30a924b2c4a84e8d7
react-i18next: 11.15.4_2c37a602a29bb6bd53f3de707a8cfcc5
react-modal: 3.14.4_react-dom@17.0.2+react@17.0.2
react-router-dom: 6.2.2_react-dom@17.0.2+react@17.0.2
@ -3668,7 +3672,7 @@ packages:
dependencies:
'@types/prop-types': 15.7.4
'@types/scheduler': 0.16.2
csstype: 3.0.10
csstype: 3.0.11
dev: true
/@types/responselike/1.0.0:
@ -5231,9 +5235,8 @@ packages:
cssom: 0.3.8
dev: true
/csstype/3.0.10:
resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
dev: true
/csstype/3.0.11:
resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
/dargs/7.0.0:
resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
@ -6773,6 +6776,14 @@ packages:
minimist: 1.2.5
dev: true
/goober/2.1.8_csstype@3.0.11:
resolution: {integrity: sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==}
peerDependencies:
csstype: ^3.0.10
dependencies:
csstype: 3.0.11
dev: false
/got/11.8.3:
resolution: {integrity: sha512-7gtQ5KiPh1RtGS9/Jbv1ofDpBFuq42gyfEib+ejaRBJuj/3tQFeR5+gw57e4ipaU8c/rCjvX6fkQz2lyDlGAOg==}
engines: {node: '>=10.19.0'}
@ -11420,6 +11431,20 @@ packages:
react: 17.0.2
dev: false
/react-hot-toast/2.2.0_383bc679f6b8b3c30a924b2c4a84e8d7:
resolution: {integrity: sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==}
engines: {node: '>=10'}
peerDependencies:
react: '>=16'
react-dom: '>=16'
dependencies:
goober: 2.1.8_csstype@3.0.11
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
transitivePeerDependencies:
- csstype
dev: false
/react-i18next/11.15.4_2c37a602a29bb6bd53f3de707a8cfcc5:
resolution: {integrity: sha512-jKJNAcVcbPGK+yrTcXhLblgPY16n6NbpZZL3Mk8nswj1v3ayIiUBVDU09SgqnT+DluyQBS97hwSvPU5yVFG0yg==}
peerDependencies: