mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
chore(console): update style
chore(console): update style
This commit is contained in:
Darcy Ye
parent
8e1713ffa7
commit
cfbceb66a6
9 changed files with 61 additions and 37 deletions
|
|
@ -11,6 +11,7 @@ type Props = {
|
|||
onSubmit: () => Promise<void>;
|
||||
onDiscard: () => void;
|
||||
confirmText?: AdminConsoleKey;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function SubmitFormChangesActionBar({
|
||||
|
|
@ -19,9 +20,10 @@ function SubmitFormChangesActionBar({
|
|||
confirmText = 'general.save_changes',
|
||||
onSubmit,
|
||||
onDiscard,
|
||||
className,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className={classNames(styles.container, isOpen && styles.active)}>
|
||||
<div className={classNames(styles.container, isOpen && styles.active, className)}>
|
||||
<div className={styles.actionBar}>
|
||||
<Button
|
||||
size="medium"
|
||||
|
|
|
|||
|
|
@ -71,13 +71,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.editorContainer {
|
||||
position: relative;
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
&.dashboardOpen {
|
||||
flex-grow: 0;
|
||||
height: 50%;
|
||||
.editorContainer {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
|
||||
&.dashboardOpen {
|
||||
flex-grow: 0;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.resultPanel {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,28 +176,30 @@ function MonacoCodeEditor({
|
|||
{actionButtons}
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={classNames(styles.editorContainer, dashboard && styles.dashboardOpen)}
|
||||
>
|
||||
{activeModel && (
|
||||
<Editor
|
||||
height={editorHeight}
|
||||
language={activeModel.language}
|
||||
path={activeModel.name}
|
||||
theme="logto-dark"
|
||||
options={{
|
||||
...defaultOptions,
|
||||
...activeModel.options,
|
||||
}}
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty string is falsy
|
||||
value={value || activeModel.defaultValue}
|
||||
onMount={handleEditorDidMount}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.body}>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={classNames(styles.editorContainer, dashboard && styles.dashboardOpen)}
|
||||
>
|
||||
{activeModel && (
|
||||
<Editor
|
||||
height={editorHeight}
|
||||
language={activeModel.language}
|
||||
path={activeModel.name}
|
||||
theme="logto-dark"
|
||||
options={{
|
||||
...defaultOptions,
|
||||
...activeModel.options,
|
||||
}}
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty string is falsy
|
||||
value={value || activeModel.defaultValue}
|
||||
onMount={handleEditorDidMount}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{dashboard && <DashBoard {...dashboard} className={styles.resultPanel} />}
|
||||
</div>
|
||||
{dashboard && <DashBoard {...dashboard} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.scripeSection {
|
||||
position: relative;
|
||||
.scriptSection {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-width: 50%;
|
||||
|
||||
.fixHeightWrapper {
|
||||
margin-bottom: _.unit(3);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
|
|
@ -12,7 +14,7 @@
|
|||
}
|
||||
|
||||
.codeEditor {
|
||||
min-height: 200px;
|
||||
min-height: 400px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ function ScriptSection() {
|
|||
}, [setTestResult, t, testResult]);
|
||||
|
||||
return (
|
||||
<div className={styles.scripeSection}>
|
||||
<div className={styles.scriptSection}>
|
||||
<div className={styles.fixHeightWrapper}>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
|
|||
|
|
@ -61,4 +61,5 @@
|
|||
|
||||
.flexGrow {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@
|
|||
}
|
||||
|
||||
> * {
|
||||
margin-bottom: _.unit(6);
|
||||
|
||||
&:first-child {
|
||||
margin-right: _.unit(3);
|
||||
flex: 9;
|
||||
|
|
@ -26,3 +24,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submitActionBar {
|
||||
&.overwrite {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ function MainContent<T extends LogtoJwtTokenKeyType>({
|
|||
isOpen={isDirty || action === 'create'}
|
||||
isSubmitting={isSubmitting}
|
||||
confirmText={action === 'create' ? 'general.create' : 'general.save_changes'}
|
||||
className={classNames(styles.submitActionBar, styles.overwrite)}
|
||||
onDiscard={
|
||||
// If the form is in create mode, navigate back to the previous page
|
||||
action === 'create'
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ declare global {
|
|||
|
||||
export interface Exports {
|
||||
/**
|
||||
* This function is called to get custom claims for the JWT token.
|
||||
* This function is called during the access token generation process to get custom claims for the JWT token.
|
||||
*
|
||||
* @param {${JwtCustomizerTypeDefinitionKey.AccessTokenPayload}} token -The JWT token.
|
||||
* @param {Data} data - Logto internal data that can be used to pass additional information
|
||||
|
|
@ -56,7 +56,7 @@ declare global {
|
|||
|
||||
export interface Exports {
|
||||
/**
|
||||
* This function is called to get custom claims for the JWT token.
|
||||
* This function is called during the access token generation process to get custom claims for the JWT token.
|
||||
*
|
||||
* @param {${JwtCustomizerTypeDefinitionKey.ClientCredentialsPayload}} token -The JWT token.
|
||||
*
|
||||
|
|
@ -72,7 +72,8 @@ export { exports as default };
|
|||
`;
|
||||
|
||||
export const defaultAccessTokenJwtCustomizerCode = `/**
|
||||
* This function is called to get custom claims for the JWT token.
|
||||
* This function is called during the access token generation process to get custom claims for the JWT token.
|
||||
* Limit custom claims to under 50KB.
|
||||
*
|
||||
* @param {${JwtCustomizerTypeDefinitionKey.AccessTokenPayload}} token -The JWT token.
|
||||
* @param {Data} data - Logto internal data that can be used to pass additional information
|
||||
|
|
@ -87,7 +88,8 @@ exports.getCustomJwtClaims = async (token, data, envVariables) => {
|
|||
}`;
|
||||
|
||||
export const defaultClientCredentialsJwtCustomizerCode = `/**
|
||||
* This function is called to get custom claims for the JWT token.
|
||||
* This function is called during the access token generation process to get custom claims for the JWT token.
|
||||
* Limit custom claims to under 50KB.
|
||||
*
|
||||
* @param {${JwtCustomizerTypeDefinitionKey.ClientCredentialsPayload}} token -The JWT token.
|
||||
* @param {${JwtCustomizerTypeDefinitionKey.EnvironmentVariables}} [envVariables] - The environment variables.
|
||||
|
|
|
|||
Loading…
Reference in a new issue