file tab close buttons

MetaBrush.cabal

@@ -120,5 +120,7 @@ executable MetaBrush
           ^>= 0.0.1
       , gi-cairo-connector
           ^>= 0.0.1
+      , haskell-gi-base
+          ^>= 0.24
       , text
           ^>= 1.2.3.1 && < 1.2.5

app/Main.hs

@@ -1,4 +1,7 @@
 {-# LANGUAGE BlockArguments    #-}
+{-# LANGUAGE ConstraintKinds   #-}
+{-# LANGUAGE GADTs             #-}
+{-# LANGUAGE LambdaCase        #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE RecordWildCards   #-}
 {-# LANGUAGE TypeApplications  #-}
@@ -8,6 +11,8 @@ module Main
   where
 
 -- base
+import Control.Monad
+  ( void )
 import Data.Foldable
   ( for_ )
 import Data.Int
@@ -55,7 +60,7 @@ main = do
   ---------------------------------------------------------
   -- Initialise GTK
 
-  _ <- GTK.init Nothing
+  void $ GTK.init Nothing
   Just screen <- GDK.screenGetDefault
 
   themePath <- Text.pack <$> ( Directory.canonicalizePath =<< Cabal.getDataFileName "theme.css" )
@@ -131,7 +136,7 @@ main = do
   logoArea <- GTK.drawingAreaNew
   GTK.boxPackStart logo logoArea True True 0
 
-  _ <- GTK.onWidgetDraw logoArea
+  void $ GTK.onWidgetDraw logoArea
     $ Cairo.renderWithContext
       ( drawLogo logo_base logo_highlight logo_base ) 
 
@@ -162,9 +167,6 @@ main = do
 
   widgetAddClass fileBar "fileBar"
 
-  ---------------------------------------------------------
-  -- Main viewport
-
   fileTabs <- GTK.boxNew GTK.OrientationHorizontal 0
   GTK.containerAdd fileBar fileTabs
   widgetAddClasses fileTabs [ "fileBar", "plain", "text" ]
@@ -172,25 +174,60 @@ main = do
   phantomRadioButton <- GTK.radioButtonNew ( [] @GTK.RadioButton )
 
   for_ [ 1 .. 12 ] \ i -> do
-    pgButton <- GTK.radioButtonNewWithLabelFromWidget ( Just phantomRadioButton ) ( "● New Document (" <> Text.pack ( show i ) <> ")" )
+    -- File tab elements.
+    pgButton <- GTK.radioButtonNewWithLabelFromWidget ( Just phantomRadioButton ) ( "New Document (" <> Text.pack ( show i ) <> ")" )
     GTK.toggleButtonSetMode pgButton False -- don't display radio indicator
-    widgetAddClasses pgButton [ "fileBarTab" ]
+    closeFileButton <- GTK.buttonNewWithLabel "x"
-    GTK.boxPackStart fileTabs pgButton False False 0
+
+    -- Create box for file tab elements.
+    tab <- GTK.boxNew GTK.OrientationHorizontal 0
+    widgetAddClasses tab [ "fileBarTab" ]
+    GTK.boxPackStart fileTabs tab               False False 0
+    GTK.boxPackStart tab      pgButton          True  True  0
+    GTK.boxPackStart tab      closeFileButton   False False 0
+
+    widgetAddClasses pgButton        [ "fileBarTabButton" ]
+    widgetAddClasses closeFileButton [ "fileBarCloseButton" ]
+
+    void $ GTK.onButtonClicked pgButton do
+      active <- GTK.toggleButtonGetActive pgButton
+      flags  <- GTK.widgetGetStateFlags tab
+      if active
+      then GTK.widgetSetStateFlags tab ( GTK.StateFlagsActive : flags ) True
+      else GTK.widgetSetStateFlags tab ( filter ( /= GTK.StateFlagsActive ) flags ) True
+
+{-
+    void $ GTK.onButtonClicked closeFileButton do
+      closeFileDialog ...
+-}
+
+    for_ @_ @_ @_ @() [ Exists @GTK.IsWidget pgButton, Exists @GTK.IsWidget closeFileButton ] \ ( Exists button ) -> do
+      void $ GTK.onWidgetEnterNotifyEvent button \ _ -> do
+        flags <- GTK.widgetGetStateFlags tab
+        GTK.widgetSetStateFlags tab ( GTK.StateFlagsPrelight : flags ) True
+        pure False
+      void $ GTK.onWidgetLeaveNotifyEvent button \ _ -> do
+        flags <- GTK.widgetGetStateFlags tab
+        GTK.widgetSetStateFlags tab ( filter ( /= GTK.StateFlagsPrelight ) flags ) True
+        pure False
 
   GTK.scrolledWindowSetPolicy           fileBar GTK.PolicyTypeAutomatic GTK.PolicyTypeNever
   GTK.scrolledWindowSetOverlayScrolling fileBar True
 
+  ---------------------------------------------------------
+  -- Main viewport
+
   widgetAddClass viewportGrid "viewport_bg"
   
   rvRulerCorner   <- GTK.revealerNew
   rvLeftRuler     <- GTK.revealerNew
   rvTopRuler      <- GTK.revealerNew
-  viewport      <- GTK.drawingAreaNew
+  viewportOverlay <- GTK.overlayNew
 
   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
+  GTK.gridAttach viewportGrid viewportOverlay 1 1 1 1
 
   rulerCorner <- GTK.boxNew GTK.OrientationVertical   0
   leftRuler   <- GTK.boxNew GTK.OrientationVertical   0
@@ -227,8 +264,25 @@ main = do
   GTK.widgetSetVexpand leftRuler       True
   GTK.widgetSetHexpand topRuler        True
   GTK.widgetSetVexpand topRuler        False
-  GTK.widgetSetHexpand viewport    True
+  GTK.widgetSetHexpand viewportOverlay True
-  GTK.widgetSetVexpand viewport    True
+  GTK.widgetSetVexpand viewportOverlay True
+
+  viewport <- GTK.drawingAreaNew
+  GTK.setContainerChild viewportOverlay viewport
+
+  viewportScrollbarGrid <- GTK.gridNew
+  GTK.overlayAddOverlay viewportOverlay viewportScrollbarGrid
+
+  viewportHScrollbar <- GTK.scrollbarNew GTK.OrientationHorizontal ( Nothing @GTK.Adjustment )
+  viewportVScrollbar <- GTK.scrollbarNew GTK.OrientationVertical   ( Nothing @GTK.Adjustment )
+  GTK.widgetSetValign  viewportHScrollbar GTK.AlignEnd
+  GTK.widgetSetHalign  viewportVScrollbar GTK.AlignEnd
+  GTK.widgetSetVexpand viewportVScrollbar True
+  GTK.widgetSetHexpand viewportHScrollbar True
+  GTK.gridAttach viewportScrollbarGrid viewportHScrollbar 0 1 1 1
+  GTK.gridAttach viewportScrollbarGrid viewportVScrollbar 1 0 1 1
+  widgetAddClass viewportHScrollbar "viewportScrollbar"
+  widgetAddClass viewportVScrollbar "viewportScrollbar"
 
   ---------------------------------------------------------
   -- Panels
@@ -255,3 +309,7 @@ main = do
   GTK.main
 
   exitSuccess
+
+
+data Exists c where
+  Exists :: c a => a -> Exists c

assets/theme.css

@@ -16,6 +16,7 @@
   background-color: rgb(236, 223, 210);
   min-width: 60px;
   min-height: 40px;
+  -GtkWidget-window-dragging: false;
 }
 
 /* Basic text colour */
@@ -59,13 +60,17 @@
 }
 
 /* Viewport scrollbar colour */
-.viewport_scrollbar {
+.viewportScrollbar {
-  color: rgba(40, 39, 39, 0.66);
+  color: purple; /* debugging */
+  background-color: rgba(45, 39, 39, 0.66);
+  margin: 4px;
+  min-width: 8px;
+  min-height: 8px;
 }
 
 /* Tab scrollbar colour */
-.tab_scrollbar {
+.tabScrollbar {
-  color: rgba(48, 45, 38, 0.66);
+  background-color: rgba(48, 45, 38, 0.66);
 }
 
 /* Rulers */
@@ -148,6 +153,10 @@
   border-left: 2px solid rgb(41, 40, 40);
 }
 
+.submenuItem:disabled {
+  color: rgb(149,149,149);
+}
+
 .submenuSeparator {
   background-color: rgb(28,25,25);
   padding-top: 1px;
@@ -176,8 +185,6 @@
 
 .fileBarTab {
   border-top: 3px solid rgb(41, 40, 40);
-  padding-left: 8px;
-  padding-right: 8px;
 }
 
 .fileBarTab:hover {
@@ -189,6 +196,23 @@
   background-color: rgb(72,70,61);
 }
 
+.fileBarTabButton {
+  padding-left: 8px;
+  padding-right: 3px;
+  margin: 0px;
+}
+
+.fileBarCloseButton {
+  padding-left: 5px;
+  padding-right: 5px;
+  margin: 0px;
+  color: rgba(212, 190, 152,0.2);
+}
+
+.fileBarCloseButton:hover {
+  color: rgba(213,19,36,0.9);
+}
+
 /* Panels */
 .panels {
   min-width: 120px;
@@ -201,7 +225,3 @@
   font-size:  10px;
   -GtkWidget-window-dragging: true;
 }
-
-.submenuItem:disabled {
-  color: rgb(149,149,149);
-}

src/app/MetaBrush/UI/Menu.hs

@@ -116,6 +116,7 @@ data EditMenu ( rt :: ResourceType )
   , copy        :: !( MenuItem  NoSubresource rt )
   , paste       :: !( MenuItem  NoSubresource rt )
   , duplicate   :: !( MenuItem  NoSubresource rt )
+  , delete      :: !( MenuItem  NoSubresource rt )
   , editSep2    :: !( Separator rt )
   , preferences :: !( MenuItem  NoSubresource rt )
   }
@@ -171,6 +172,7 @@ editMenuDescription
   , copy        = MenuItemDescription  "Copy"        [ "submenuItem" ] Nothing NoSubresource
   , paste       = MenuItemDescription  "Paste"       [ "submenuItem" ] Nothing NoSubresource
   , duplicate   = MenuItemDescription  "Duplicate"   [ "submenuItem" ] Nothing NoSubresource
+  , delete      = MenuItemDescription  "Delete"      [ "submenuItem" ] Nothing NoSubresource
   , editSep2    = SeparatorDescription               [ "submenuSeparator" ]
   , preferences = MenuItemDescription  "Preferences" [ "submenuItem" ] Nothing NoSubresource
   }