center title, paned viewport

app/Main.hs

@@ -92,21 +92,28 @@ main = do
   uiGrid <- GTK.gridNew
   GTK.setContainerChild baseOverlay uiGrid
 
-  logo      <- GTK.boxNew GTK.OrientationVertical   0
+  logo      <- GTK.boxNew   GTK.OrientationVertical   0
-  titleBar  <- GTK.boxNew GTK.OrientationHorizontal 0
+  titleBar  <- GTK.boxNew   GTK.OrientationHorizontal 0
-  toolBar   <- GTK.boxNew GTK.OrientationVertical   0
+  toolBar   <- GTK.boxNew   GTK.OrientationVertical   0
-  fileBar   <- GTK.boxNew GTK.OrientationHorizontal 0
+  fileBar   <- GTK.boxNew   GTK.OrientationHorizontal 0
-  mainView  <- GTK.gridNew
+  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 mainPane  2 2 2 3
-  GTK.gridAttach uiGrid panelGrid 3 2 1 2
+
-  GTK.gridAttach uiGrid infoBar   2 3 1 1
+  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.boxSetCenterWidget titleBar ( Just title )
-  GTK.widgetSetHalign title GTK.AlignCenter
-  GTK.boxPackStart titleBar title True True 0
 
   ---------------------------------------------------------
   -- 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 viewportGrid rvRulerCorner 0 0 1 1
-  GTK.gridAttach mainView rvLeftRuler   0 1 1 1
+  GTK.gridAttach viewportGrid rvLeftRuler   0 1 1 1
-  GTK.gridAttach mainView rvTopRuler    1 0 1 1
+  GTK.gridAttach viewportGrid rvTopRuler    1 0 1 1
-  GTK.gridAttach mainView viewport      1 1 1 1
+  GTK.gridAttach viewportGrid viewport      1 1 1 1
 
   rulerCorner <- GTK.boxNew GTK.OrientationVertical   0
   leftRuler   <- GTK.boxNew GTK.OrientationVertical   0

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-left: 6px;
-  padding-right: 8px;
+  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 {

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:cy="399.13966"
-     inkscape:cx="750.76483"
+     inkscape:cx="834.67434"
-     inkscape:zoom="1"
+     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" />
+    <text
+       id="text4239"
+       y="-196.22501"
+       x="134.90924"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5833px;line-height:1.25;font-family:'Pori Chords ASC Std';-inkscape-font-specification:'Pori Chords ASC Std';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       xml:space="preserve"><tspan
+         style="stroke-width:0.264583"
+         y="-196.22501"
+         x="134.90924"
+         id="tspan4237"
+         sodipodi:role="line" /></text>
+    <text
+       id="text1848-5-16"
+       y="-196.0674"
+       x="-36.769897"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.84093px;line-height:1.25;font-family:'Pori Chords ASC Std';-inkscape-font-specification:'Pori Chords ASC Std';letter-spacing:0px;word-spacing:0px;display:inline;fill:#d4be98;fill-opacity:1;stroke:none;stroke-width:1.46023"
+       xml:space="preserve"><tspan
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.84093px;font-family:Lato;-inkscape-font-specification:Lato;fill:#d4be98;fill-opacity:1;stroke-width:1.46023"
+         y="-196.0674"
+         x="-36.769897"
+         id="tspan1846-4-5"
+         sodipodi:role="line">. . .</tspan></text>
   </g>
 </svg>

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
+colours windowWidgetPath =
-  style <- GTK.styleContextNew
+  for colourNames \ ( ColourName { .. } ) -> do
-  GTK.styleContextSetPath  style windowWidgetPath
+    style <- GTK.styleContextNew
-  GTK.styleContextAddClass style colourName
+    GTK.styleContextSetPath  style windowWidgetPath
-  case colourType of
+    GTK.styleContextAddClass style colourName
-    BackgroundColor -> GTK.styleContextGetBackgroundColor style stateFlags
+    case colourType of
-    Color           -> GTK.styleContextGetColor           style stateFlags
+      BackgroundColor -> GTK.styleContextGetBackgroundColor style stateFlags
+      Color           -> GTK.styleContextGetColor           style stateFlags