Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console,phrases): polish css editor (#3508)

Browse source
This commit is contained in:
Gao Sun 2023-03-19 19:32:49 +08:00 committed by GitHub
parent d4605d10a9
commit fc734efa34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/console/src/components/CodeEditor/index.module.scss
View file

@ -7,13 +7,21 @@
background: #34353f;
position: relative;
.placeholder {
position: absolute;
inset: _.unit(6);
right: _.unit(8);
color: #95969f;
font: var(--font-body-2);
}
.copy {
display: flex;
align-items: center;
justify-content: right;
position: absolute;
top: 24px;
right: 24px;
top: _.unit(3);
right: _.unit(3);
opacity: 0%;
transition: opacity 0.2s ease-in-out;
z-index: 1;
@ -31,7 +39,6 @@
textarea {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
@ -53,7 +60,7 @@
textarea,
pre {
display: flex;
min-height: 20px;
min-height: 80px;
}
}
}

5
packages/console/src/components/CodeEditor/index.tsx
View file

@ -1,4 +1,3 @@
import { conditional } from '@silverhand/essentials';
import classNames from 'classnames';
import type { ChangeEvent, KeyboardEvent } from 'react';
import { useMemo, useRef } from 'react';
@ -69,6 +68,7 @@ const CodeEditor = ({
return (
<>
<div className={classNames(styles.container, className)}>
{!value && <div className={styles.placeholder}>{placeholder}</div>}
<CopyToClipboard value={value ?? ''} variant="icon" className={styles.copy} />
<div className={styles.editor}>
{/* SyntaxHighlighter is a readonly component, so a transparent <textarea> layer is needed
@ -82,7 +82,6 @@ const CodeEditor = ({
readOnly={isReadonly}
spellCheck="false"
value={value}
placeholder={placeholder}
onChange={handleChange}
onKeyDown={handleKeydown}
/>
@ -108,7 +107,7 @@ const CodeEditor = ({
language={language}
style={theme}
>
{conditional(Boolean(value) && value) ?? placeholder ?? ''}
{value ?? ''}
</SyntaxHighlighter>
</div>
</div>

2
packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.module.scss
View file

@ -1,5 +1,5 @@
.customCssCodeEditor {
max-height: calc(100vh - 260px);
min-height: 111px; // min-height to show three lines of code
min-height: 132px; // min-height to show three lines of code
overflow-y: auto;
}

2
packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
View file

@ -101,7 +101,7 @@ const sign_in_exp = {
css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
},
others: {
terms_of_use: {

2
packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
View file

@ -44,7 +44,7 @@ const sign_in_exp = {
css_code_editor_description2: '<a>{{link}}</a>',
css_code_editor_description_link_content: 'Learn more',
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.',
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.',
},
sign_up_and_sign_in: {
identifiers_email: 'Email address',

2
packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
View file

@ -47,7 +47,7 @@ const sign_in_exp = {
css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
},
sign_up_and_sign_in: {
identifiers_email: 'Email address', // UNTRANSLATED

2
packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
View file

@ -43,7 +43,7 @@ const sign_in_exp = {
css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
},
sign_up_and_sign_in: {
identifiers_email: '이메일 주소',

2
packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
View file

@ -46,7 +46,7 @@ const sign_in_exp = {
css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
},
sign_up_and_sign_in: {
identifiers_email: 'Endereço de e-mail',

2
packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
View file

@ -45,7 +45,7 @@ const sign_in_exp = {
css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
},
sign_up_and_sign_in: {
identifiers_email: 'Email address', // UNTRANSLATED

2
packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
View file

@ -46,7 +46,7 @@ const sign_in_exp = {
css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
css_code_editor_content_placeholder:
'// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
},
sign_up_and_sign_in: {
identifiers_email: 'Email address', // UNTRANSLATED

2
packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
View file

@ -43,7 +43,7 @@ const sign_in_exp = {
css_code_editor_description2: '<a>{{link}}</a>',
css_code_editor_description_link_content: '了解更多',
css_code_editor_content_placeholder:
'// 输入自定义 CSS 代码，从颜色、字体、组件样式和布局等，定制你的登录、注册、忘记密码和其他页面。充分发挥创造力，让你的用户界面脱颖而出。',
'输入自定义 CSS 以根据你的需求定制任何内容的样式。发挥创造力，让你的用户界面脱颖而出。',
},
sign_up_and_sign_in: {
identifiers_email: '邮件地址',