fix: Proper styling of export dialog

Signed-off-by: Julius Härtl <jus@bitgrid.net>
nextcloud · Aug 6, 2024 · 0e33b62 · 0e33b62
1 parent 2d14c77
commit 0e33b62
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -5,14 +5,15 @@
 
 // https://github.com/excalidraw/excalidraw/blob/4dc4590f247a0a0d9c3f5d39fe09c00c5cef87bf/examples/excalidraw
 .excalidraw, .App .excalidraw {
-  --zIndex-modal: 100001;
+  --zIndex-modal: 100010;
+  --zIndex-popup: 100020;
   --ui-font: var(--font-face);
 
-  --color-brand: var(--color-primary-element);
-  --color-brand-hover: var(--color-primary-element-hover);
+  --color-brand: var(--color-primary-element) !important;
+  --color-brand-hover: var(--color-primary-element-hover) !important;
   --color-primary: var(--color-primary-element) !important;
-  --color-primary-darker: var(--color-primary-darker);
-  --color-primary-darkest: var(--color-primary-element);
+  --color-primary-darker: var(--color-primary-element-hover) !important;
+  --color-primary-darkest: var(----color-primary-element-hover) !important;
   --color-primary-light: var(--color-primary-element-light) !important;
   --color-surface-primary-container: var(--color-primary-element-light);
   --color-surface-low: var(--color-primary-element-light);
@@ -97,3 +98,12 @@
 .layer-ui__wrapper__top-right label[title=Library] {
   display: none;
 }
+
+.ImageExportModal__preview__filename {
+  display: none;
+}
+
+.excalidraw .Switch input,
+.excalidraw .RadioGroup__choice input {
+  opacity: 0;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -25,10 +25,13 @@ import type { ResolvablePromise } from '@excalidraw/excalidraw/types/utils'
 import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 interface WhiteboardAppProps {
 	fileId: number;
+	fileName: string;
 	isEmbedded: boolean;
 }
 
-export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
+export default function App({ fileId, isEmbedded, fileName }: WhiteboardAppProps) {
+	const fileNameWithoutExtension = fileName.split('.').slice(0, -1).join('.')
+
 	const [viewModeEnabled] = useState(isEmbedded)
 	const [zenModeEnabled] = useState(isEmbedded)
 	const [gridModeEnabled] = useState(false)
@@ -140,7 +143,7 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
 					zenModeEnabled={zenModeEnabled}
 					gridModeEnabled={gridModeEnabled}
 					theme={theme}
-					name="Custom name of drawing"
+					name={fileNameWithoutExtension}
 					UIOptions={{
 						canvasActions: {
 							loadScene: false,

diff --git a/src/main.tsx b/src/main.tsx
@@ -24,7 +24,7 @@ const Component = {
 
 			this.root.render(
 				<StrictMode>
-					<App fileId={this.fileid} isEmbedded={this.isEmbedded}/>
+					<App fileId={this.fileid} isEmbedded={this.isEmbedded} fileName={this.basename} />
 				</StrictMode>,
 			)
 		})