From 62ea168667ccac4b96c04330d8e828f687d7fa00 Mon Sep 17 00:00:00 2001 From: sheaf Date: Sat, 8 Aug 2020 05:33:35 +0200 Subject: [PATCH] add info bar --- MetaBrush.cabal | 2 +- app/Main.hs | 103 +- assets/theme.css | 9 +- img/MetaBrush_ui_mockup.svg | 966 +++++++++--------- src/app/MetaBrush/Asset/Colours.hs | 2 +- .../Asset/{Magnifier.hs => InfoBar.hs} | 32 +- 6 files changed, 613 insertions(+), 501 deletions(-) rename src/app/MetaBrush/Asset/{Magnifier.hs => InfoBar.hs} (82%) diff --git a/MetaBrush.cabal b/MetaBrush.cabal index dd35262..d302330 100644 --- a/MetaBrush.cabal +++ b/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 diff --git a/app/Main.hs b/app/Main.hs index ae0fbdd..e04946e 100644 --- a/app/Main.hs +++ b/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 - - widgetAddClass titleBar "titleBar" + ------------ + -- Menu bar ( 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 diff --git a/assets/theme.css b/assets/theme.css index 84a5b6a..9907f40 100644 --- a/assets/theme.css +++ b/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; diff --git a/img/MetaBrush_ui_mockup.svg b/img/MetaBrush_ui_mockup.svg index e156bef..e7fa673 100644 --- a/img/MetaBrush_ui_mockup.svg +++ b/img/MetaBrush_ui_mockup.svg @@ -8,9 +8,9 @@ xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="379.03928mm" + width="376.4017mm" height="233.0961mm" - viewBox="0 0 379.03928 233.0961" + viewBox="0 0 376.40171 233.0961" version="1.1" id="svg6301" inkscape:version="1.0 (4035a4fb49, 2020-05-01)" @@ -42,9 +42,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="1.4142136" - inkscape:cx="385.83839" - inkscape:cy="253.70522" + inkscape:zoom="1" + inkscape:cx="549.39054" + inkscape:cy="345.34923" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" @@ -66,6 +66,8 @@ inkscape:document-rotation="0" inkscape:lockguides="false"> @@ -77,7 +79,7 @@ image/svg+xml - + @@ -85,7 +87,7 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(162.74701,208.59428)" + transform="translate(160.10944,208.59428)" style="display:inline"> + style="opacity:1;fill:#2e2b4a;fill-opacity:1;stroke:none;stroke-width:0.0144343;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" /> hover:select: hover:select: + style="opacity:1;fill:#f7ebf6;fill-opacity:1;stroke:#e3b9df;stroke-width:0.339009;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" /> + style="opacity:1;fill:#48463d;fill-opacity:1;stroke:none;stroke-width:0.522892;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.992157;paint-order:stroke fill markers" /> + style="fill:#2b81b1;fill-opacity:1;stroke-width:0.854462;stroke-linecap:round;paint-order:stroke fill markers" /> + style="stroke-width:0.206108;stroke-miterlimit:4;stroke-dasharray:none"> + style="fill:none;stroke:#d4be98;stroke-width:0.229022;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> @@ -594,14 +596,14 @@ cy="-196.56718" r="1.040269" /> + style="fill:none;stroke:#a1dde9;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="fill:none;stroke:#a1dde9;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="fill:none;stroke:#a1dde9;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="fill:none;stroke:#a1dde9;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="fill:none;stroke:#a1dde9;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="fill:none;stroke:#a1dde9;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> Stroke 3 + style="opacity:1;fill:none;fill-opacity:1;stroke:#eadfcc;stroke-width:0.452;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" /> + style="opacity:1;fill:#eadfcc;fill-opacity:1;stroke:#48463d;stroke-width:0.548;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" /> View + style="opacity:1;fill:#48463d;fill-opacity:1;stroke:none;stroke-width:2.59514;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.992157;paint-order:stroke fill markers" /> + style="opacity:1;fill:none;fill-opacity:1;stroke:#eadfcc;stroke-width:0.452;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" /> Stroke 5 x: 212.12 pxy: 120.23 px @@ -5334,7 +5336,7 @@ sodipodi:role="line">x: 10.05 pxy: 340.23 px x: 410.12 pxy: 20.00 px 300% Transform settings ... + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#eadfcc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.452;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /> + style="opacity:1;fill:#eadfcc;fill-opacity:1;stroke:none;stroke-width:0.548;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" /> + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#eadfcc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.452;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /> 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