add info bar

MetaBrush.cabal

@@ -85,8 +85,8 @@ executable MetaBrush
     other-modules:
         MetaBrush.Asset.Colours
       , MetaBrush.Asset.Cursor
+      , MetaBrush.Asset.InfoBar
       , MetaBrush.Asset.Logo
-      , MetaBrush.Asset.Magnifier
       , MetaBrush.Asset.TickBox
       , MetaBrush.Asset.Tools
       , MetaBrush.Asset.WindowIcons

app/Main.hs

@@ -2,6 +2,7 @@
 {-# LANGUAGE ConstraintKinds   #-}
 {-# LANGUAGE GADTs             #-}
 {-# LANGUAGE LambdaCase        #-}
+{-# LANGUAGE NegativeLiterals  #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE RecordWildCards   #-}
 {-# LANGUAGE TypeApplications  #-}
@@ -28,6 +29,9 @@ import qualified System.Directory as Directory
 import qualified GI.Cairo.Render.Connector as Cairo
   ( renderWithContext )
 
+-- gi-cairo-render
+import qualified GI.Cairo.Render as Cairo
+
 -- gi-gdk
 import qualified GI.Gdk as GDK
 
@@ -40,9 +44,11 @@ import qualified Data.Text as Text
 
 -- MetaBrush
 import MetaBrush.Asset.Colours
-  ( ColourRecord(..), getColours )
+  ( getColours )
 import MetaBrush.Asset.Cursor
   ( drawCursorIcon )
+import MetaBrush.Asset.InfoBar
+  ( drawMagnifier, drawTopLeftCornerRect )
 import MetaBrush.Asset.Logo
   ( drawLogo )
 import MetaBrush.Asset.Tools
@@ -138,6 +144,11 @@ main = do
   widgetAddClass uiGrid "bg"
 
   ---------------------------------------------------------
+  -- Title bar
+
+  widgetAddClass titleBar "titleBar"
+
+  --------
   -- Logo
 
   widgetAddClass logo "logo"
@@ -148,10 +159,8 @@ main = do
   void $ GTK.onWidgetDraw logoArea
     $ Cairo.renderWithContext ( drawLogo colours )
 
-  ---------------------------------------------------------
+  ------------
-  -- Title bar
+  -- Menu bar
-
-  widgetAddClass titleBar "titleBar"
 
   ( menuBar, _menu ) <- newMenuBar
   widgetAddClasses menuBar [ "menuBar", "text", "plain" ]
@@ -258,12 +267,6 @@ main = do
   brushToolArea     <- GTK.drawingAreaNew
   metaToolArea      <- GTK.drawingAreaNew
 
-{-
-  for_ [ selectionToolArea, brushToolArea, metaToolArea ] \ toolArea -> do
-    GTK.widgetSetValign toolArea GTK.AlignCenter
-    GTK.widgetSetHalign toolArea GTK.AlignCenter
--}
-
   GTK.containerAdd selectionTool selectionToolArea
   GTK.containerAdd       penTool       penToolArea
   GTK.containerAdd      pathTool      pathToolArea
@@ -422,7 +425,83 @@ main = do
   ---------------------------------------------------------
   -- Info bar
 
-  widgetAddClass infoBar "infoBar"
+  widgetAddClasses infoBar [ "infoBar", "monospace", "contrast" ]
+
+  zoomBox        <- GTK.boxNew GTK.OrientationHorizontal 0
+  cursorPosBox   <- GTK.boxNew GTK.OrientationHorizontal 0
+  topLeftPosBox  <- GTK.boxNew GTK.OrientationHorizontal 0
+  botRightPosBox <- GTK.boxNew GTK.OrientationHorizontal 0
+
+  for_ [ botRightPosBox, topLeftPosBox, cursorPosBox, zoomBox ] \ box -> do
+    GTK.boxPackEnd infoBar box False False 0
+    widgetAddClass box "infoBarBox"
+
+  -------------
+  -- Magnifier
+
+  magnifierArea <- GTK.drawingAreaNew
+  zoomText <- GTK.labelNew ( Just "300%" )
+
+  GTK.boxPackStart zoomBox magnifierArea True True 0
+  GTK.boxPackStart zoomBox zoomText      True True 0
+
+  void $ GTK.onWidgetDraw magnifierArea \ctx ->
+    ( `Cairo.renderWithContext` ctx ) $ do
+      Cairo.scale 0.9 0.9
+      Cairo.translate 14 10
+      drawMagnifier colours
+
+  -------------------
+  -- Cursor position
+
+  cursorPosArea <- GTK.drawingAreaNew
+  cursorPosText <- GTK.labelNew ( Just "x: 212.12 px\ny: 120.23 px" )
+
+  GTK.boxPackStart cursorPosBox cursorPosArea False False 0
+  GTK.boxPackStart cursorPosBox cursorPosText False False 0
+
+  void $ GTK.onWidgetDraw cursorPosArea \ctx ->
+    ( `Cairo.renderWithContext` ctx ) $ do
+      Cairo.scale 0.75 0.75
+      Cairo.translate 10 7
+      drawCursorIcon colours
+
+  ---------------------
+  -- Top left position
+
+  topLeftPosArea <- GTK.drawingAreaNew
+  topLeftPosText <- GTK.labelNew ( Just "x: 212.12 px\ny: 120.23 px" )
+
+  GTK.boxPackStart topLeftPosBox topLeftPosArea False False 0
+  GTK.boxPackStart topLeftPosBox topLeftPosText False False 0
+
+  void $ GTK.onWidgetDraw topLeftPosArea
+    $ Cairo.renderWithContext
+      ( drawTopLeftCornerRect colours )
+
+  -------------------------
+  -- Bottom right position
+
+  botRightPosArea <- GTK.drawingAreaNew
+  botRightPosText <- GTK.labelNew ( Just "x: 212.12 px\ny: 120.23 px" )
+
+  GTK.boxPackStart botRightPosBox botRightPosArea False False 0
+  GTK.boxPackStart botRightPosBox botRightPosText False False 0
+
+  void $ GTK.onWidgetDraw botRightPosArea \ctx ->
+    ( `Cairo.renderWithContext` ctx ) $ do
+      Cairo.scale -1 -1
+      Cairo.translate -40 -40
+      drawTopLeftCornerRect colours
+
+  -------------------------
+
+  for_ [ magnifierArea, cursorPosArea, topLeftPosArea, botRightPosArea ] \ area -> do
+    widgetAddClass area "infoBarIcon"
+    GTK.widgetSetSizeRequest area 40 40 -- not sure why this is needed...?
+
+  for_ [ zoomText, cursorPosText, topLeftPosText, botRightPosText ] \ info -> do
+    widgetAddClass info "infoBarInfo"
 
   ---------------------------------------------------------
   -- Actions

assets/theme.css

@@ -10,7 +10,7 @@
   background-color: rgb(72,70,61);
 }
 .highlight {
-  color: rgb(234,223,204)
+  color: rgb(234,223,204);
 }
 .cursor {
   color:rgb(234,223,204);
@@ -48,6 +48,8 @@
 .viewport {
   background-color: rgb(236, 223, 210);
   -GtkWidget-window-dragging: false;
+  min-width: 120px;
+  min-height: 90px;
 }
 .viewportScrollbar {
   background-color: rgba(45, 39, 39, 0.66);
@@ -165,6 +167,7 @@ tooltip {
 }
 
 .menuItem {
+  color: rgba(212, 190, 152,0.5);
   background-color: rgb(41, 40, 40);
   padding-left: 8px;
   padding-right: 8px;
@@ -175,21 +178,25 @@ tooltip {
 /* Menu item hover effect (workaround) */
 .menuItem:selected {
   border-color: rgb(72,70,61);
+  color: rgb(212, 190, 152);
 }
 
 /* Styling for active menu item */
 .menuItem:active, .menuItem:checked, .menuItem:hover {
   border-color: rgb(234,223,204);
   background-color: rgb(72,70,61);
+  color: rgb(212, 190, 152);
 }
 
 .menuItem > * > * {
   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);
+  color: rgb(212, 190, 152);
 }
 
 .submenuItem {
+  color: rgb(212, 190, 152);
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 10px;

src/app/MetaBrush/Asset/Colours.hs

@@ -83,7 +83,7 @@ colourNames = Colours
   , controlPointOutline = ColourName "controlPointStroke"          Colour [ GTK.StateFlagsNormal ]
   , path                = ColourName "path"                        Colour [ GTK.StateFlagsNormal ]
   , brushStroke         = ColourName "brushStroke"                 Colour [ GTK.StateFlagsNormal ]
-  , viewport            = ColourName "viewport"                    Colour [ GTK.StateFlagsNormal ]
+  , viewport            = ColourName "viewport"          BackgroundColour [ GTK.StateFlagsNormal ]
   , viewportScrollbar   = ColourName "viewportScrollbar" BackgroundColour [ GTK.StateFlagsNormal ]
   , tabScrollbar        = ColourName "tabScrollbar"      BackgroundColour [ GTK.StateFlagsNormal ]
   , magnifier           = ColourName "magnifier"                   Colour [ GTK.StateFlagsNormal ]

src/app/MetaBrush/Asset/InfoBar.hs

@@ -1,8 +1,8 @@
 {-# LANGUAGE NamedFieldPuns   #-}
 {-# LANGUAGE NegativeLiterals #-}
 
-module MetaBrush.Asset.Magnifier
+module MetaBrush.Asset.InfoBar
-  ( drawMagnifier )
+  ( drawMagnifier, drawTopLeftCornerRect )
   where
 
 -- gi-cairo-render
@@ -29,7 +29,7 @@ drawMagnifier ( Colours { magnifier, glass } ) = do
   Cairo.curveTo  2.480469  5.882813  4.914063  1.753906  8.964844  0.707031
   Cairo.curveTo 13.011719 -0.339844 17.144531  2.09375  18.191406  6.144531
   Cairo.closePath
-  Cairo.fillPreserve
+  Cairo.fill
 
   -- Magnifier.
   withRGBA magnifier Cairo.setSourceRGBA
@@ -58,6 +58,30 @@ drawMagnifier ( Colours { magnifier, glass } ) = do
   Cairo.curveTo  9.734375   1.445313 10.292969  1.375    10.855469  1.375
   Cairo.closePath
   Cairo.setFillRule Cairo.FillRuleWinding
-  Cairo.fillPreserve
+  Cairo.fill
+
+  pure True
+
+drawTopLeftCornerRect :: Colours -> Cairo.Render Bool
+drawTopLeftCornerRect ( Colours { bg, viewport } ) = do
+
+  Cairo.newPath
+  Cairo.moveTo  8 10
+  Cairo.lineTo 32 10
+  Cairo.lineTo 32 30
+  Cairo.lineTo  8 30
+  Cairo.closePath
+
+  withRGBA viewport Cairo.setSourceRGBA
+  Cairo.fill
+
+  Cairo.newPath
+  Cairo.moveTo 12 24
+  Cairo.lineTo 12 14
+  Cairo.lineTo 24 14
+  
+  Cairo.setLineWidth 4
+  withRGBA bg Cairo.setSourceRGBA
+  Cairo.stroke
 
   pure True