From aec50eb6f50aefe7d5601fa79488806849580baf Mon Sep 17 00:00:00 2001 From: Coki Date: Tue, 23 Jul 2024 02:12:57 +0800 Subject: [PATCH 1/5] refactor: improve layout and responsiveness in editor component --- app/components/editor/index.tsx | 233 ++++++++++++++++---------------- app/page.tsx | 13 +- 2 files changed, 123 insertions(+), 123 deletions(-) diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx index b69f093..f05b612 100755 --- a/app/components/editor/index.tsx +++ b/app/components/editor/index.tsx @@ -90,8 +90,8 @@ export const EditorScreen = () => { const textClass = clsx(theme === 'dark' ? 'text-gray-200' : 'text-gray-800'); return ( -
-
+
+
-
-
+
+
{t('Model')}
@@ -201,7 +201,7 @@ export const EditorScreen = () => { EditorView.lineWrapping, buttonPlugin(openDrawerWithMessage, extractContent, 'model'), ]} - className={'function flex-grow'} + className={'function flex-grow h-[300px]'} value={modelText} />
@@ -235,14 +235,14 @@ export const EditorScreen = () => { }} theme={monokai} onChange={setPolicyPersistent} - className={'function flex-grow '} + className={'function flex-grow h-[300px]'} value={policy} />
-
+
{t('Request')}
@@ -302,7 +302,7 @@ export const EditorScreen = () => { bracketMatching: true, indentOnInput: true, }} - className={'function flex-grow '} + className={'function flex-grow h-[300px]'} value={request} />
@@ -315,6 +315,7 @@ export const EditorScreen = () => {
+ {/*
*/}
{ bracketMatching: true, indentOnInput: true, }} - className={'cursor-not-allowed flex-grow'} + className={'cursor-not-allowed flex-grow h-[300px]'} value={requestResult} />
-
- - - {!share ? ( - +
+
+ + + {!share ? ( - - ) : ( - - )} -
- {echo} -
-
- - + > + {t('COPY')} + + )} +
+ +
+
{echo}
+ +
+ + +
diff --git a/app/page.tsx b/app/page.tsx index 7941c03..19658ad 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -19,17 +19,18 @@ import { useLang } from '@/app/context/LangContext'; export default function Home() { const { theme } = useLang(); + return ( -
-
+
+
-
- +
+ GitHub stars -
- Copyright © {new Date().getFullYear()} Casbin contributors. + + Copyright © {new Date().getFullYear()} Casbin contributors.
); From ce3212ee5cdf20eb97b805912d7b0d3061026e26 Mon Sep 17 00:00:00 2001 From: Coki Date: Tue, 23 Jul 2024 13:48:15 +0800 Subject: [PATCH 2/5] feat: add custom configuration toggle and improve layout responsiveness --- app/components/editor/index.tsx | 48 +++++++++++++++++++++++++++++---- app/page.tsx | 8 +++--- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx index f05b612..a91405f 100755 --- a/app/components/editor/index.tsx +++ b/app/components/editor/index.tsx @@ -40,6 +40,7 @@ export const EditorScreen = () => { data: enforceContextData, }); const [casbinVersion, setCasbinVersion] = useState(''); + const [showCustomConfig, setShowCustomConfig] = useState(false); const sidePanelChatRef = useRef<{ openDrawer: (message: string) => void } | null>(null); const openDrawerWithMessage = (message: string) => { if (sidePanelChatRef.current) { @@ -91,7 +92,14 @@ export const EditorScreen = () => { return (
-
+
-
{open &&
{t('Custom config')}
}
+
+ {(showCustomConfig || open) &&
{t('Custom config')}
} +
- {open && ( + {(showCustomConfig || open) && (
{ > {t('RESET')} +
+ +
+
-
- +
+ GitHub stars - - Copyright © {new Date().getFullYear()} Casbin contributors. + Copyright © {new Date().getFullYear()} Casbin contributors.
); From d1c0340f56c8b104a9277f3cc63da64cba4578db Mon Sep 17 00:00:00 2001 From: Coki Date: Tue, 23 Jul 2024 13:51:17 +0800 Subject: [PATCH 3/5] refactor: remove commented-out code in EditorScreen component --- app/components/editor/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx index a91405f..3dbc5ce 100755 --- a/app/components/editor/index.tsx +++ b/app/components/editor/index.tsx @@ -353,7 +353,6 @@ export const EditorScreen = () => {
- {/*
*/}
Date: Tue, 23 Jul 2024 13:55:19 +0800 Subject: [PATCH 4/5] docs: update title in metadata --- app/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/layout.tsx b/app/layout.tsx index dc33995..033dd28 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -17,7 +17,7 @@ import './globals.css'; import { LangProvider } from './context/LangContext'; export const metadata: Metadata = { - title: 'casbin-editor', + title: 'Casbin Policy Editor', description: 'web playground for casbin', }; From fd0a5d3df6a9f76f279d93ee6f59f1fd483ba88b Mon Sep 17 00:00:00 2001 From: Coki Date: Tue, 23 Jul 2024 14:31:26 +0800 Subject: [PATCH 5/5] style: adjust padding in editor component --- app/components/editor/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx index 3dbc5ce..1c91ba4 100755 --- a/app/components/editor/index.tsx +++ b/app/components/editor/index.tsx @@ -125,7 +125,7 @@ export const EditorScreen = () => { -
+
{(showCustomConfig || open) &&
{t('Custom config')}
}
@@ -246,7 +246,7 @@ export const EditorScreen = () => {