From 4e41b5c2948bb2c8e1a1e2feb255e9f962da8262 Mon Sep 17 00:00:00 2001 From: sheaf Date: Wed, 5 Aug 2020 23:30:36 +0200 Subject: [PATCH] center title, paned viewport --- app/Main.hs | 44 ++++++++++++++++++------------ assets/theme.css | 20 +++++++++----- img/MetaBrush_ui_mockup.svg | 30 +++++++++++++++++--- src/app/MetaBrush/Asset/Colours.hs | 15 +++++----- 4 files changed, 73 insertions(+), 36 deletions(-) diff --git a/app/Main.hs b/app/Main.hs index e48b32c..b701a3b 100644 --- a/app/Main.hs +++ b/app/Main.hs @@ -92,21 +92,28 @@ main = do uiGrid <- GTK.gridNew GTK.setContainerChild baseOverlay uiGrid - logo <- GTK.boxNew GTK.OrientationVertical 0 - titleBar <- GTK.boxNew GTK.OrientationHorizontal 0 - toolBar <- GTK.boxNew GTK.OrientationVertical 0 - fileBar <- GTK.boxNew GTK.OrientationHorizontal 0 - mainView <- GTK.gridNew + logo <- GTK.boxNew GTK.OrientationVertical 0 + titleBar <- GTK.boxNew GTK.OrientationHorizontal 0 + toolBar <- GTK.boxNew GTK.OrientationVertical 0 + fileBar <- GTK.boxNew GTK.OrientationHorizontal 0 + mainPane <- GTK.panedNew GTK.OrientationHorizontal panelGrid <- GTK.gridNew - infoBar <- GTK.boxNew GTK.OrientationHorizontal 0 GTK.gridAttach uiGrid logo 0 0 1 2 GTK.gridAttach uiGrid titleBar 1 0 3 1 GTK.gridAttach uiGrid toolBar 0 2 2 2 GTK.gridAttach uiGrid fileBar 2 1 1 1 - GTK.gridAttach uiGrid mainView 2 2 1 1 - GTK.gridAttach uiGrid panelGrid 3 2 1 2 - GTK.gridAttach uiGrid infoBar 2 3 1 1 + GTK.gridAttach uiGrid mainPane 2 2 2 3 + + mainView <- GTK.boxNew GTK.OrientationVertical 0 + viewportGrid <- GTK.gridNew + infoBar <- GTK.boxNew GTK.OrientationHorizontal 0 + + GTK.panedPack1 mainPane mainView True False + GTK.panedPack2 mainPane panelGrid False False + + GTK.boxPackStart mainView viewportGrid True True 0 + GTK.boxPackStart mainView infoBar False False 0 --------------------------------------------------------- -- Background @@ -132,14 +139,15 @@ main = do ( menuBar, _menu ) <- newMenuBar widgetAddClasses menuBar [ "text", "plain" ] - GTK.boxPackStart titleBar menuBar False False 0 + windowIcons <- GTK.boxNew GTK.OrientationHorizontal 0 + widgetAddClasses windowIcons [ "windowIcon" ] + GTK.boxPackEnd titleBar windowIcons False False 0 + title <- GTK.labelNew ( Just "● New Document – MetaBrush" ) widgetAddClasses title [ "text", "title", "plain" ] - GTK.labelSetJustify title GTK.JustificationCenter - GTK.widgetSetHalign title GTK.AlignCenter - GTK.boxPackStart titleBar title True True 0 + GTK.boxSetCenterWidget titleBar ( Just title ) --------------------------------------------------------- -- Tool bar @@ -154,17 +162,17 @@ main = do --------------------------------------------------------- -- Main viewport - widgetAddClass mainView "viewport_bg" + widgetAddClass viewportGrid "viewport_bg" rvRulerCorner <- GTK.revealerNew rvLeftRuler <- GTK.revealerNew rvTopRuler <- GTK.revealerNew viewport <- GTK.drawingAreaNew - GTK.gridAttach mainView rvRulerCorner 0 0 1 1 - GTK.gridAttach mainView rvLeftRuler 0 1 1 1 - GTK.gridAttach mainView rvTopRuler 1 0 1 1 - GTK.gridAttach mainView viewport 1 1 1 1 + GTK.gridAttach viewportGrid rvRulerCorner 0 0 1 1 + GTK.gridAttach viewportGrid rvLeftRuler 0 1 1 1 + GTK.gridAttach viewportGrid rvTopRuler 1 0 1 1 + GTK.gridAttach viewportGrid viewport 1 1 1 1 rulerCorner <- GTK.boxNew GTK.OrientationVertical 0 leftRuler <- GTK.boxNew GTK.OrientationVertical 0 diff --git a/assets/theme.css b/assets/theme.css index 2f89dbb..a6f5411 100644 --- a/assets/theme.css +++ b/assets/theme.css @@ -14,6 +14,8 @@ /* Viewport background colour */ .viewport_bg { background-color: rgb(236, 223, 210); + min-width: 20px; + min-height: 20px; } /* Basic text colour */ @@ -103,19 +105,22 @@ /* Title bar */ .titleBar { min-height: 20px; - font-size: 11px; + font-size: 12px; } -/* Title bar */ .titleBar > * :hover { background-color: rgb(72,70,61); } +.title { + border-top: 2px solid rgb(41, 40, 40); +} + .menuItem { background-color: rgb(41, 40, 40); margin-left: 2px; - padding-left: 8px; - padding-right: 8px; + padding-left: 6px; + padding-right: 6px; margin-left: 0px; border-top: 2px solid rgb(41, 40, 40); } @@ -127,7 +132,7 @@ /* Menu drop shadow */ .menuItem > * > * { - box-shadow: 2px 2px 4px 0px rgba(28,25,25,0.5); + box-shadow: 2px 4px 3px -1px rgba(28,25,25,0.5); border: 1px solid rgb(28,25,25); border-top: 1px solid rgb(72,70,61); } @@ -150,9 +155,10 @@ border-left: 2px solid rgb(234,223,204); } -.title { - font-size: 12px; +/* +.windowIcon { } +*/ /* Tool bar */ .toolBar { diff --git a/img/MetaBrush_ui_mockup.svg b/img/MetaBrush_ui_mockup.svg index bffeb7f..b02bb02 100644 --- a/img/MetaBrush_ui_mockup.svg +++ b/img/MetaBrush_ui_mockup.svg @@ -47,7 +47,7 @@ objecttolerance="1" inkscape:window-maximized="1" inkscape:window-y="115" - inkscape:window-x="-8" + inkscape:window-x="2552" inkscape:window-height="1377" inkscape:window-width="2560" inkscape:guide-bbox="true" @@ -55,9 +55,9 @@ showgrid="false" inkscape:current-layer="layer1" inkscape:document-units="mm" - inkscape:cy="421.74309" - inkscape:cx="750.76483" - inkscape:zoom="1" + inkscape:cy="399.13966" + inkscape:cx="834.67434" + inkscape:zoom="0.70710678" inkscape:pageshadow="2" inkscape:pageopacity="0.0" borderopacity="1.0" @@ -5537,5 +5537,27 @@ d="m -135.45938,-192.29552 -0.66146,-0.92604 -0.62838,0.95911" id="path4212-4" sodipodi:nodetypes="ccc" /> + + . . . diff --git a/src/app/MetaBrush/Asset/Colours.hs b/src/app/MetaBrush/Asset/Colours.hs index 43a9a8c..69d5064 100644 --- a/src/app/MetaBrush/Asset/Colours.hs +++ b/src/app/MetaBrush/Asset/Colours.hs @@ -85,10 +85,11 @@ colourNames = Colours type Colours = ColourRecord GDK.RGBA colours :: GTK.WidgetPath -> IO Colours -colours windowWidgetPath = for colourNames \ ( ColourName { .. } ) -> do - style <- GTK.styleContextNew - GTK.styleContextSetPath style windowWidgetPath - GTK.styleContextAddClass style colourName - case colourType of - BackgroundColor -> GTK.styleContextGetBackgroundColor style stateFlags - Color -> GTK.styleContextGetColor style stateFlags +colours windowWidgetPath = + for colourNames \ ( ColourName { .. } ) -> do + style <- GTK.styleContextNew + GTK.styleContextSetPath style windowWidgetPath + GTK.styleContextAddClass style colourName + case colourType of + BackgroundColor -> GTK.styleContextGetBackgroundColor style stateFlags + Color -> GTK.styleContextGetColor style stateFlags