marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-03 20:34:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: browse libraries styles fixed (#2694)

Browse Source 
* feat: browse libraries styles fixed

* simplify jsx & css

* remove justify-content

* fix padding/margin

* Update src/components/LayerUI.scss

Co-authored-by: benjamin.kugler <benjamin.kugler@elliemae.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Benja Kugler
2021-01-02 13:13:48 -03:00
committed by GitHub
parent aef3644c93
commit 7c3513b9df
2 changed files with 53 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/LayerUI.scss
View File

@@ -7,11 +7,23 @@
align-items: center;
justify-content: center;
.browse-libraries {
position: absolute;
right: 12px;
top: 16px;
white-space: nowrap;
.layer-ui__library-header {
display: flex;
align-items: center;
width: 100%;
margin: 2px 0;
button {
// 2px from the left to account for focus border of left-most button
margin: 0 2px;
}
a {
margin-left: auto;
// 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
padding-right: 18px;
white-space: nowrap;
}
}
}

80
src/components/LayerUI.tsx
View File

@@ -124,9 +124,42 @@ const LibraryMenuItems = ({
let addedPendingElements = false;
rows.push(
<>
<div className="layer-ui__library-header">
<ToolButton
key="import"
type="button"
title={t("buttons.load")}
aria-label={t("buttons.load")}
icon={load}
onClick={() => {
importLibraryFromJSON()
.then(() => {
// Maybe we should close and open the menu so that the items get updated.
// But for now we just close the menu.
setAppState({ isLibraryOpen: false });
})
.catch(muteFSAbortError)
.catch((error) => {
setAppState({ errorMessage: error.message });
});
}}
/>
<ToolButton
key="export"
type="button"
title={t("buttons.export")}
aria-label={t("buttons.export")}
icon={exportFile}
onClick={() => {
saveLibraryAsJSON()
.catch(muteFSAbortError)
.catch((error) => {
setAppState({ errorMessage: error.message });
});
}}
/>
<a
className="browse-libraries"
href="https://libraries.excalidraw.com"
target="_excalidraw_libraries"
onClick={() => {
@@ -135,48 +168,7 @@ const LibraryMenuItems = ({
>
{t("labels.libraries")}
</a>
<Stack.Row
align="center"
gap={1}
key={"actions"}
style={{ padding: "2px" }}
>
<ToolButton
key="import"
type="button"
title={t("buttons.load")}
aria-label={t("buttons.load")}
icon={load}
onClick={() => {
importLibraryFromJSON()
.then(() => {
// Maybe we should close and open the menu so that the items get updated.
// But for now we just close the menu.
setAppState({ isLibraryOpen: false });
})
.catch(muteFSAbortError)
.catch((error) => {
setAppState({ errorMessage: error.message });
});
}}
/>
<ToolButton
key="export"
type="button"
title={t("buttons.export")}
aria-label={t("buttons.export")}
icon={exportFile}
onClick={() => {
saveLibraryAsJSON()
.catch(muteFSAbortError)
.catch((error) => {
setAppState({ errorMessage: error.message });
});
}}
/>
</Stack.Row>
</>,
</div>,
);
for (let row = 0; row < numRows; row++) {