add info bar

This commit is contained in:
sheaf 2020-08-08 05:33:35 +02:00
parent c9394cc23f
commit 62ea168667
6 changed files with 613 additions and 501 deletions

View file

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

View file

@ -2,6 +2,7 @@
{-# LANGUAGE ConstraintKinds #-} {-# LANGUAGE ConstraintKinds #-}
{-# LANGUAGE GADTs #-} {-# LANGUAGE GADTs #-}
{-# LANGUAGE LambdaCase #-} {-# LANGUAGE LambdaCase #-}
{-# LANGUAGE NegativeLiterals #-}
{-# LANGUAGE OverloadedStrings #-} {-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecordWildCards #-} {-# LANGUAGE RecordWildCards #-}
{-# LANGUAGE TypeApplications #-} {-# LANGUAGE TypeApplications #-}
@ -28,6 +29,9 @@ import qualified System.Directory as Directory
import qualified GI.Cairo.Render.Connector as Cairo import qualified GI.Cairo.Render.Connector as Cairo
( renderWithContext ) ( renderWithContext )
-- gi-cairo-render
import qualified GI.Cairo.Render as Cairo
-- gi-gdk -- gi-gdk
import qualified GI.Gdk as GDK import qualified GI.Gdk as GDK
@ -40,9 +44,11 @@ import qualified Data.Text as Text
-- MetaBrush -- MetaBrush
import MetaBrush.Asset.Colours import MetaBrush.Asset.Colours
( ColourRecord(..), getColours ) ( getColours )
import MetaBrush.Asset.Cursor import MetaBrush.Asset.Cursor
( drawCursorIcon ) ( drawCursorIcon )
import MetaBrush.Asset.InfoBar
( drawMagnifier, drawTopLeftCornerRect )
import MetaBrush.Asset.Logo import MetaBrush.Asset.Logo
( drawLogo ) ( drawLogo )
import MetaBrush.Asset.Tools import MetaBrush.Asset.Tools
@ -138,6 +144,11 @@ main = do
widgetAddClass uiGrid "bg" widgetAddClass uiGrid "bg"
--------------------------------------------------------- ---------------------------------------------------------
-- Title bar
widgetAddClass titleBar "titleBar"
--------
-- Logo -- Logo
widgetAddClass logo "logo" widgetAddClass logo "logo"
@ -148,10 +159,8 @@ main = do
void $ GTK.onWidgetDraw logoArea void $ GTK.onWidgetDraw logoArea
$ Cairo.renderWithContext ( drawLogo colours ) $ Cairo.renderWithContext ( drawLogo colours )
--------------------------------------------------------- ------------
-- Title bar -- Menu bar
widgetAddClass titleBar "titleBar"
( menuBar, _menu ) <- newMenuBar ( menuBar, _menu ) <- newMenuBar
widgetAddClasses menuBar [ "menuBar", "text", "plain" ] widgetAddClasses menuBar [ "menuBar", "text", "plain" ]
@ -258,12 +267,6 @@ main = do
brushToolArea <- GTK.drawingAreaNew brushToolArea <- GTK.drawingAreaNew
metaToolArea <- 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 selectionTool selectionToolArea
GTK.containerAdd penTool penToolArea GTK.containerAdd penTool penToolArea
GTK.containerAdd pathTool pathToolArea GTK.containerAdd pathTool pathToolArea
@ -422,7 +425,83 @@ main = do
--------------------------------------------------------- ---------------------------------------------------------
-- Info bar -- 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 -- Actions

View file

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

File diff suppressed because it is too large Load diff

Before

Width:  |  Height:  |  Size: 247 KiB

After

Width:  |  Height:  |  Size: 246 KiB

View file

@ -83,7 +83,7 @@ colourNames = Colours
, controlPointOutline = ColourName "controlPointStroke" Colour [ GTK.StateFlagsNormal ] , controlPointOutline = ColourName "controlPointStroke" Colour [ GTK.StateFlagsNormal ]
, path = ColourName "path" Colour [ GTK.StateFlagsNormal ] , path = ColourName "path" Colour [ GTK.StateFlagsNormal ]
, brushStroke = ColourName "brushStroke" 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 ] , viewportScrollbar = ColourName "viewportScrollbar" BackgroundColour [ GTK.StateFlagsNormal ]
, tabScrollbar = ColourName "tabScrollbar" BackgroundColour [ GTK.StateFlagsNormal ] , tabScrollbar = ColourName "tabScrollbar" BackgroundColour [ GTK.StateFlagsNormal ]
, magnifier = ColourName "magnifier" Colour [ GTK.StateFlagsNormal ] , magnifier = ColourName "magnifier" Colour [ GTK.StateFlagsNormal ]

View file

@ -1,8 +1,8 @@
{-# LANGUAGE NamedFieldPuns #-} {-# LANGUAGE NamedFieldPuns #-}
{-# LANGUAGE NegativeLiterals #-} {-# LANGUAGE NegativeLiterals #-}
module MetaBrush.Asset.Magnifier module MetaBrush.Asset.InfoBar
( drawMagnifier ) ( drawMagnifier, drawTopLeftCornerRect )
where where
-- gi-cairo-render -- 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 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.curveTo 13.011719 -0.339844 17.144531 2.09375 18.191406 6.144531
Cairo.closePath Cairo.closePath
Cairo.fillPreserve Cairo.fill
-- Magnifier. -- Magnifier.
withRGBA magnifier Cairo.setSourceRGBA 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.curveTo 9.734375 1.445313 10.292969 1.375 10.855469 1.375
Cairo.closePath Cairo.closePath
Cairo.setFillRule Cairo.FillRuleWinding 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 pure True