mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): make the LanguageEditor responsive (#2620)
This commit is contained in:
Xiao Yijun
GitHub
parent
6ae4919762
commit
07fae9a6fc
5 changed files with 130 additions and 71 deletions
|
|
@ -1,9 +1,11 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.languageDetails {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
flex-shrink: 0;
|
||||
padding: _.unit(6) _.unit(5);
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-text);
|
||||
|
|
@ -31,68 +33,78 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 1px solid var(--color-divider);
|
||||
height: 481px;
|
||||
.form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
> table {
|
||||
border: none;
|
||||
.content {
|
||||
flex: 1;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
overflow-y: auto;
|
||||
|
||||
> thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Note: cells with `position: relative` style will overlap this sticky header, add a z-index to fix it.
|
||||
z-index: 1;
|
||||
.customValuesColumn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
tr > th {
|
||||
padding: _.unit(1) _.unit(5);
|
||||
font: var(--font-label-large);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-layer-1);
|
||||
.clearButton {
|
||||
margin-left: _.unit(1);
|
||||
}
|
||||
|
||||
.clearIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
> table {
|
||||
border: none;
|
||||
|
||||
> thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// Note: cells with `position: relative` style will overlap this sticky header, add a z-index to fix it.
|
||||
z-index: 1;
|
||||
|
||||
tr > th {
|
||||
padding: _.unit(1) _.unit(5);
|
||||
font: var(--font-label-large);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-layer-1);
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr > td {
|
||||
padding: _.unit(2) _.unit(5);
|
||||
border: none;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr > td {
|
||||
padding: _.unit(2) _.unit(5);
|
||||
border: none;
|
||||
.sectionTitle {
|
||||
@include _.subhead-cap;
|
||||
background-color: var(--color-layer-light);
|
||||
}
|
||||
|
||||
.sectionDataKey {
|
||||
padding: _.unit(4) _.unit(5);
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sectionBuiltInText {
|
||||
padding: _.unit(2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.customValuesColumn {
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
height: 85px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
padding: _.unit(5);
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
margin-left: _.unit(1);
|
||||
}
|
||||
|
||||
.clearIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
@include _.subhead-cap;
|
||||
background-color: var(--color-layer-light);
|
||||
}
|
||||
|
||||
.sectionDataKey {
|
||||
padding: _.unit(4) _.unit(5);
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sectionBuiltInText {
|
||||
padding: _.unit(2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--color-divider);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: _.unit(5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -175,6 +175,7 @@ const LanguageDetails = () => {
|
|||
)}
|
||||
</div>
|
||||
<form
|
||||
className={style.form}
|
||||
onSubmit={async (event) => {
|
||||
// Note: Avoid propagating the 'submit' event to the outer sign-in-experience form.
|
||||
event.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -6,10 +6,12 @@
|
|||
flex-shrink: 0;
|
||||
background-color: var(--color-layer-light);
|
||||
border-right: 1px solid var(--color-divider);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.languageItemList {
|
||||
flex: 1;
|
||||
margin-top: _.unit(3);
|
||||
height: 569px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,45 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid var(--color-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
@use '@/scss/underscore' as _;
|
||||
@use '@/scss/dimensions' as dim;
|
||||
|
||||
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--color-overlay);
|
||||
|
||||
.modalContent {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.editor {
|
||||
margin: 0 auto;
|
||||
max-width: dim.$modal-layout-width-xlarge;
|
||||
max-height: 85vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--shadow-3);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid var(--color-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@ import { useContext, useEffect } from 'react';
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import Close from '@/assets/images/close.svg';
|
||||
import Card from '@/components/Card';
|
||||
import CardTitle from '@/components/CardTitle';
|
||||
import ConfirmModal from '@/components/ConfirmModal';
|
||||
import ModalLayout from '@/components/ModalLayout';
|
||||
import IconButton from '@/components/IconButton';
|
||||
import useUiLanguages from '@/hooks/use-ui-languages';
|
||||
import * as modalStyles from '@/scss/modal.module.scss';
|
||||
|
||||
import LanguageDetails from './LanguageDetails';
|
||||
import LanguageNav from './LanguageNav';
|
||||
import * as style from './index.module.scss';
|
||||
import * as styles from './index.module.scss';
|
||||
import useLanguageEditorContext, { LanguageEditorContext } from './use-language-editor-context';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -69,18 +71,22 @@ const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} className={modalStyles.content} overlayClassName={modalStyles.overlay}>
|
||||
<ModalLayout
|
||||
title="sign_in_exp.others.manage_language.title"
|
||||
subtitle="sign_in_exp.others.manage_language.subtitle"
|
||||
size="xlarge"
|
||||
onClose={onCloseModal}
|
||||
>
|
||||
<div className={style.container}>
|
||||
<Modal isOpen={isOpen} className={styles.modalContent} overlayClassName={styles.modalOverlay}>
|
||||
<Card className={styles.editor}>
|
||||
<div className={styles.header}>
|
||||
<CardTitle
|
||||
title="sign_in_exp.others.manage_language.title"
|
||||
subtitle="sign_in_exp.others.manage_language.subtitle"
|
||||
/>
|
||||
<IconButton onClick={onCloseModal}>
|
||||
<Close />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<LanguageNav />
|
||||
<LanguageDetails />
|
||||
</div>
|
||||
</ModalLayout>
|
||||
</Card>
|
||||
<ConfirmModal
|
||||
isOpen={confirmationState !== 'none'}
|
||||
cancelButtonText="general.stay_on_page"
|
||||
|
|
|
|||
Loading…
Reference in a new issue