drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 18:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

design - Added NavBars responsive design

Browse Source
This commit is contained in:
TheUser5050 2024-07-30 15:41:02 +05:30
parent 06f7284ea8
commit 96290b1a45
3 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/EditorHeader/ControlPanel.jsx
View File

@ -1327,10 +1327,10 @@ export default function ControlPanel({
function toolbar() { function toolbar() {
return ( return (
<div className="py-1.5 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 xl:mx-6 select-none overflow-hidden toolbar-theme"> <div className="py-1.5 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 xl:mx-6 select-none overflow-hidden toolbar-theme sm:w-screen sm:px-0">
<div className="flex justify-start items-center"> <div className="flex items-center justify-center">
<LayoutDropdown /> <LayoutDropdown />
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="0px" />
<Dropdown <Dropdown
style={{ width: "240px" }} style={{ width: "240px" }}
position="bottomLeft" position="bottomLeft"
@ -1373,18 +1373,18 @@ export default function ControlPanel({
} }
trigger="click" trigger="click"
> >
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center"> <div className="py-1 px-2 sm:px-0 hover-2 rounded flex items-center justify-">
<div className="w-[40px]"> <div className="w-[40px] sm:w-[30px]">
{Math.floor(transform.zoom * 100)}% {Math.floor(transform.zoom * 100)}%
</div> </div>
<div> <div className="sm:hidden">
<IconCaretdown /> <IconCaretdown />
</div> </div>
</div> </div>
</Dropdown> </Dropdown>
<Tooltip content={t("zoom_in")} position="bottom"> <Tooltip content={t("zoom_in")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded text-lg" className="py-1 px-2 sm:px-0 hover-2 rounded text-lg"
onClick={() => onClick={() =>
setTransform((prev) => ({ ...prev, zoom: prev.zoom * 1.2 })) setTransform((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
} }
@ -1394,7 +1394,7 @@ export default function ControlPanel({
</Tooltip> </Tooltip>
<Tooltip content={t("zoom_out")} position="bottom"> <Tooltip content={t("zoom_out")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded text-lg" className="py-1 px-2 sm:px-0 hover-2 rounded text-lg"
onClick={() => onClick={() =>
setTransform((prev) => ({ ...prev, zoom: prev.zoom / 1.2 })) setTransform((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
} }
@ -1405,7 +1405,7 @@ export default function ControlPanel({
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
<Tooltip content={t("undo")} position="bottom"> <Tooltip content={t("undo")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded flex items-center" className="py-1 px-2 sm:px-1 hover-2 rounded flex items-center"
onClick={undo} onClick={undo}
> >
<IconUndo <IconUndo
@ -1416,7 +1416,7 @@ export default function ControlPanel({
</Tooltip> </Tooltip>
<Tooltip content={t("redo")} position="bottom"> <Tooltip content={t("redo")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded flex items-center" className="py-1 px-2 sm:px-1 hover-2 rounded flex items-center"
onClick={redo} onClick={redo}
> >
<IconRedo <IconRedo
@ -1428,7 +1428,7 @@ export default function ControlPanel({
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
<Tooltip content={t("add_table")} position="bottom"> <Tooltip content={t("add_table")} position="bottom">
<button <button
className="flex items-center py-1 px-2 hover-2 rounded" className="flex items-center py-1 px-2 sm:px-1 hover-2 rounded"
onClick={() => addTable()} onClick={() => addTable()}
> >
<IconAddTable /> <IconAddTable />
@ -1436,7 +1436,7 @@ export default function ControlPanel({
</Tooltip> </Tooltip>
<Tooltip content={t("add_area")} position="bottom"> <Tooltip content={t("add_area")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded flex items-center" className="py-1 px-2 sm:px-0 hover-2 rounded flex items-center"
onClick={() => addArea()} onClick={() => addArea()}
> >
<IconAddArea /> <IconAddArea />
@ -1444,16 +1444,16 @@ export default function ControlPanel({
</Tooltip> </Tooltip>
<Tooltip content={t("add_note")} position="bottom"> <Tooltip content={t("add_note")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded flex items-center" className="py-1 px-2 sm:px-0 hover-2 rounded flex items-center"
onClick={() => addNote()} onClick={() => addNote()}
> >
<IconAddNote /> <IconAddNote />
</button> </button>
</Tooltip> </Tooltip>
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="4px" />
<Tooltip content={t("save")} position="bottom"> <Tooltip content={t("save")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded flex items-center" className="py-1 px-2 sm:px-0 hover-2 rounded flex items-center"
onClick={save} onClick={save}
> >
<IconSaveStroked size="extra-large" /> <IconSaveStroked size="extra-large" />
@ -1461,16 +1461,16 @@ export default function ControlPanel({
</Tooltip> </Tooltip>
<Tooltip content={t("to_do")} position="bottom"> <Tooltip content={t("to_do")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded text-xl -mt-0.5" className="py-1 px-2 sm:px-0 hover-2 rounded text-xl -mt-0.5"
onClick={() => setSidesheet(SIDESHEET.TODO)} onClick={() => setSidesheet(SIDESHEET.TODO)}
> >
<i className="fa-regular fa-calendar-check" /> <i className="fa-regular fa-calendar-check" />
</button> </button>
</Tooltip> </Tooltip>
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="4px" />
<Tooltip content={t("theme")} position="bottom"> <Tooltip content={t("theme")} position="bottom">
<button <button
className="py-1 px-2 hover-2 rounded text-xl -mt-0.5" className="py-1 px-2 sm:px-0 hover-2 rounded text-xl -mt-0.5"
onClick={() => { onClick={() => {
const body = document.body; const body = document.body;
if (body.hasAttribute("theme-mode")) { if (body.hasAttribute("theme-mode")) {
@ -1488,7 +1488,7 @@ export default function ControlPanel({
</div> </div>
<button <button
onClick={() => invertLayout("header")} onClick={() => invertLayout("header")}
className="flex items-center" className="flex items-center mx-3"
> >
{layout.header ? <IconChevronUp /> : <IconChevronDown />} {layout.header ? <IconChevronUp /> : <IconChevronDown />}
</button> </button>
@ -1515,14 +1515,14 @@ export default function ControlPanel({
function header() { function header() {
return ( return (
<nav className="flex justify-between pt-1 items-center whitespace-nowrap"> <nav className="flex justify-between pt-1 items-center whitespace-nowrap w-screen">
<div className="flex justify-start items-center"> <div className="flex justify-start items-center">
<Link to="/"> <Link to="/">
<img <img
width={54} width={43}
src={icon} src={icon}
alt="logo" alt="logo"
className="ms-8 min-w-[54px]" className="ms-8 min-w-[45px] sm:ml-2"
/> />
</Link> </Link>
<div className="ms-1 mt-1"> <div className="ms-1 mt-1">

4
src/components/EditorHeader/LayoutDropdown.jsx
View File

@ -48,9 +48,7 @@ export default function LayoutDropdown() {
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Divider /> <Dropdown.Divider />
<Dropdown.Item <Dropdown.Item
icon={ icon={fullscreen ? <IconCheckboxTick /> : <div className="px-2" />}
fullscreen ? <IconCheckboxTick /> : <div className="px-2" />
}
onClick={() => { onClick={() => {
if (fullscreen) { if (fullscreen) {
exitFullscreen(); exitFullscreen();

2
src/components/Workspace.jsx
View File

@ -339,7 +339,7 @@ export default function WorkSpace() {
}, [load]); }, [load]);
return ( return (
<div className="h-full flex flex-col overflow-hidden theme"> <div className="h-full flex flex-col overflow-hidden theme w-screen">
<ControlPanel <ControlPanel
diagramId={id} diagramId={id}
setDiagramId={setId} setDiagramId={setId}