docs:manual:1.2.0: Complete UI pages

Signed-off-by: Aesara <[email protected]>

pages/docs/manuals/v1.2.0/_index.md

@@ -12,23 +12,26 @@ sectionNavURL = "/docs/manuals/v1.2.0"
 Welcome to the MyPaint v1.2.0 User manual. Here you can learn the broad strokes of how MyPaint works.
 
 # User Interface
-When MyPaint is first opened, you'll see a single window appear with not much in it. In the centre, there's a plain
-off-white paper background where you can draw. At the top, there are toolbars and menus. At the bottom, there's a status
-bar with some buttons and indicators clustered in the corners.
+When MyPaint is first opened, a single relatively sparse window will appear. At the centre, there's a plain off-white
+background where you can draw (the **canvas**). At the top, there are toolbars and menus. At the bottom, there's a
+status bar with some buttons and indicators clustered in the corners.
 
 {{< img src="mypaint-window-new.jpg" caption="A fresh installation of MyPaint" >}}
 
 {{< img src="mypaint-window-in-use.jpg" caption="MyPaint's user interface adapts to meet your needs">}}
 
-With a bit of customization you can set up sidebars full of dockable panels and palettes. You can make the MyPaint use
-the full screen area too, and tell it to hide the controls while you're working.
+MyPaint can be customised with dockable panels and palettes, all hideable while you work.
 
-## More Information
-- [Main Toolbar]({{< relref "ui/main-toolbar" >}})
-- [UI Toolbar]({{< relref "ui/ui-toolbar" >}})
-- [Footer bar]({{< relref "ui/footer-bar" >}})
-- Dockable panels
-- [Fullscreen mode]({{< relref "ui/fullscreen" >}})
+## Read more
+To learn more about MyPaint's user interface, refer to these pages:
+
+{{< flex grow="true" >}}
+    {{< button content="Main Toolbar" href="ui/main-toolbar" >}}
+    {{< button content="UI Toolbar" href="ui/ui-toolbar" >}}
+    {{< button content="Footer Bar" href="ui/footer-bar" >}}
+    {{< button content="Dockable Panels" href="./panels" >}}
+    {{< button content="Fullscreen Mode" href="ui/fullscreen" >}}
+{{< /flex >}}
 
 # Tools
 ## Anatomy of a stroke

pages/docs/manuals/v1.2.0/colour/_index.md

@@ -1,5 +1,6 @@
 +++
 title = "Colour"
+weight = 50
 +++
 
 MyPaint uses only one active colour (no foreground/background). However, the colour previews will display two colours while you adjust the colour: The old colour and the new colour with changes.

pages/docs/manuals/v1.2.0/paint-modes.md

@@ -1,5 +1,6 @@
 +++
 title = "Paint Modes"
+weight = 30
 +++
 
 _Paint modes_, also known as _brush blend modes_, change the way that the brush applies paint. They affect every kind of drawing and painting tool where you use the brush to apply paint. MyPaint's paint modes track the current brush, so if you choose an eraser preset from a brush group panel, you will see the Eraser symbol on the toolbar light up.

pages/docs/manuals/v1.2.0/panels/_index.md

@@ -1,5 +1,6 @@
 +++
 title = "Dockable Panels"
+weight = 40
 +++
 
 * [[HCY Wheel and Gamut Mask Editor|v1.2 HCY Wheel and Gamut Mask Editor]]

pages/docs/manuals/v1.2.0/popups/brush-groups.md

@@ -0,0 +1,6 @@
++++
+title = "Brush Group Panel"
+tags = "Incomplete"
++++
+
+TBD

pages/docs/manuals/v1.2.0/preferences/_index.md

@@ -1,6 +1,7 @@
 +++
 title = "Preferences"
 summary = "A description of MyPaint's configurable preferences"
+weight = 60
 +++
 
 The Preferences Window gives you options to configure MyPaint's appearance, input, keyboard shortcuts and many other settings. Open the Preferences Window by

pages/docs/manuals/v1.2.0/tools/_index.md

@@ -1,4 +1,5 @@
 +++
 title = "Tools"
 summmary = "A list of MyPaint's tools"
+weight = 20
 +++

pages/docs/manuals/v1.2.0/tools/colour-picker.md

@@ -1,5 +1,5 @@
 +++
-title = "Colour Picker Tool"
+title = "Colour Picker"
 tags = "Incomplete"
 +++
 

pages/docs/manuals/v1.2.0/tools/stroke-layer-picker.md

@@ -0,0 +1,6 @@
++++
+title = "Stroke & Layer Picker"
+tags = "Incomplete"
++++
+
+TBD.

pages/docs/manuals/v1.2.0/ui/_index.md

@@ -1,4 +1,6 @@
 +++
 title = "User Interface"
-summary = "This page provides an overview of the layout and details in MyPaint's UI"
+weight = 10
 +++
+
+This page provides an overview of the layout and details in MyPaint's UI

pages/docs/manuals/v1.2.0/ui/footer-bar/index.md

@@ -0,0 +1,53 @@
++++
+title = "Footer bar"
+summary = "A description of the strip of UI features at the bottom of the main window"
+weight = 30
++++
+
+The **Footer Bar** is a strip comprising the bottom of the [main window]({{< relref "../#user-interface" >}}). It
+consists of a status bar, and two clusters of controls for changing the brush and colour.
+
+# Status bar
+{{< img src="mypaint-footer-bar-status.jpg" width="100%" >}}
+
+The status bar at the bottom of the main window shows the current tool, and also the canvas's zoom and rotation.
+
+# Colour controls
+
+{{< img src="mypaint-footer-bar-colour.jpg" float="right" >}}
+
+The colour controls are clustered on the left side of the footer bar.
+
+**Eyedropper** button
+> <kbd>R</kbd>, and <kbd>ALT</kbd>+<kbd>LMB</kbd>
+- Pick a colour from the canvas. [Read more]({{< relref "../tools/colour-picker" >}})
+
+**Current and Previous Colour** indicator and menu
+> *Colour → Change Colour…*, or <kbd>C</kbd>.
+- A rectangle consisting of two sides (swatches). The left swatch shows the current brush colour, the right swatch shows
+the previous colour. 
+- Clicking the left swatch (current colour) opens the colour selector popup. [Read more]({{< relref "../popups/colour-selector" >}})
+- Clicking the right swatch (previous colour) reverts the brush to the previous colour.
+
+**Edit Colour Details** button 
+- Open the *Set Current Colour* popup window for inputting numeric colour values. [Read more]({{< relref "../colour/numeric-values" >}})
+
+**Add Colour to Palette** button
+> *Colour → Add Colour to Palette*
+- Adds the current brush colour to the palette. The palette will open in a sidebar panel if it isn't already open. [Read
+more]({{< relref "../panels/palette" >}})
+
+# Brush controls
+{{< img src="mypaint-footer-bar-brush.jpg" float="right" >}}
+
+The brush controls are clustered on the right side of the footer bar.
+
+**Current Brush** indicator and menu
+> *Brush → Change Brush…*, or <kbd>B</kbd>
+- A square containing the current brush icon.
+- Clicking the icon opens the brush groups popup. [Read more]({{< relref "../popups/brush-groups" >}})
+
+**Pick Stroke and Layer** button
+> Press <kbd>W</kbd>
+- Pick a brushstroke from the screen. If the stroke is on a different layer, MyPaint will switch to that layer.
+Invisible and locked layers can't be picked. Not every kind of image has a strokemap. [Read more]({{< relref "../tools/stroke-layer-picker" >}})

pages/docs/manuals/v1.2.0/ui/fullscreen.md

@@ -1,16 +1,11 @@
 +++
 title = "Fullscreen Mode"
-summary = "How to use MyPaint's fullscreen mode"
 +++
 
-Turn on the Fullscreen mode to maximize your drawing space. Differences in Fullscreen mode:
-* MyPaint's canvas fills your screen completely
-* No window borders or taskbar (Windows)
-* UI elements like Toolbar, floating and docked Panels, Footer are hidden when not in use
-* move the cursor to the UI element's location to show it
-* Main Menu is hidden under _MyPaint_ button
+MyPaint's fullscreen mode maximises useable drawing space on the screen.
+> *View → Fullscreen*, or <kbd>F11</kbd>, or [fullscreen button]({{< relref "ui-toolbar#fullscreen-toggle" >}})
 
-## To enter or leave Fullscreen
-* Click the Fullscreen icon in the [[UI toolbar|v1.2-UI-Toolbar]] (the double arrows, far right)
-* Main Menu _View_ → _Fullscreen_
-* Keyboard shortcut <kbd>F11</kbd>
+- Window borders and the system taskbar/dash/panel are hidden.
+- UI elements (e.g. toolbars, footer, and panels) can be toggled on/off.
+    - Move the cursor to the UI element's location to unhide it
+- Menus are hidden under the *MyPaint* button on the [main toolbar]({{< relref "main-toolbar" >}})

pages/docs/manuals/v1.2.0/ui/main-toolbar/index.md

@@ -2,9 +2,12 @@
 title = "Main Toolbar"
 summary = "The main toolbar contains painting tools and other commands"
 hideSummary = true
+weight = 10
 +++
 
-{{< img src="main-toolbar.jpg" caption="The main toolbar with the customisation menu open" >}}
+{{< id "main-toolbar-image" nomd >}}
+{{< img src="main-toolbar.jpg" caption="The main toolbar with the context menu open" >}}
+{{< /id >}}
 
 The **Main Toolbar** contains MyPaint's painting tools, and other commands. It is located at the top of the
 [main window]({{< relref "../#user-interface" >}}), next to the menu. It continues into the [UI toolbar]({{< relref
@@ -16,10 +19,17 @@ what appears on it.
 {{< img src="main-toolbar-file.jpg" float="right" >}}
 The File Handling toolbar buttons let you load and save the working canvas. They are visible by default.
 
-- **New File** (_File → New_, or `Ctrl+N`). Starts a new, blank canvas.
-- **Open File** (_File → Open…_, or `Ctrl+O`). Open a file on disk, so it can be edited in the canvas area.
-- **Save File** (_File → Save…_, or `Ctrl+S`). Saves the current canvas to a file on disk. If it hasn't got a file name
-yet, you'll be asked for one.
+**New File**
+> *File → New*, or `Ctrl+N`
+- Starts a new, blank canvas.
+
+**Open File**
+> *File → Open…*, or `Ctrl+O`
+- Open a file on disk, so it can be edited in the canvas area.
+
+**Save File**
+> *File → Save…*, or `Ctrl+S`
+- Saves the current canvas to a file on disk. If it hasn't got a file name yet, you'll be asked for one.
 
 # Core Tools
 {{< img src="main-toolbar-tools.jpg" float="right" >}}
@@ -31,21 +41,21 @@ The core set of tools cannot be hidden using the popup menu.
 
 - Toggles the Eraser paint/blend mode, which affects how the painting tools operate. [Read more]({{< relref
 "../paint-modes#eraser" >}})
-- Other optional paint modes can be toggled on the toolbar: see [Blend Modes]({{< relref "#blend-modes" >}})
-below.
+- Other optional paint modes can be toggled on the toolbar, see [blend modes]({{< relref "#blend-modes" >}}).
+
 
-**Freehand** (paint brush)
+**Freehand** (paintbrush)
 > *Edit → Freehand*, or `P`
 
 - The default painting tool; paint using the current brush and colour, without constraints. [Read more]({{< relref
 "../tools/freehand" >}})
 
-**Pick Colour** (eye dropper)
+**Pick Colour** (eyedropper)
 > *Colour → Pick Colour*, or `R`
 
 - Pick a new painting colour from the canvas. [Read more]({{< relref "../tools/colour-picker" >}})
 
-**Flood fill** (paint bucket)
+**Flood Fill** (paint bucket)
 > *Edit → Flood Fill*
 
 - Fills an area with the current painting colour.
@@ -67,7 +77,8 @@ below.
 {{< img src="main-toolbar-scraps.jpg" float="right" >}}
 
 The Scraps Switcher toolbar buttons let you quickly save drafts to a dedicated folder on disk, and load them in again.
-These items are optional, you need to use the [main toolbar's context menu]({{< relref "#" >}}) to make them visible.
+These items are optional, you need to use the [main toolbar's context menu]({{< relref "#main-toolbar-image" >}}) to
+make them visible.
 
 Scrap file revisions are stored with numbered filenames in a single folder. The scrap folder's location can be changed
 in the [Preferences window]({{< relref "../preferences" >}})
@@ -106,8 +117,8 @@ The toolbar items are only sensitive when you can undo or redo a step.
 {{< img src="main-toolbar-blend.jpg" float="right" >}}
 
 Paint blend modes change how your brush affects the layer you paint on. These toolbar buttons are optional, and you need
-to use the [main toolbar's context menu]({{< relref "#" >}}) to make them visible. [Read more about paint modes]({{<
-relref "../paint-modes" >}})
+to use the [main toolbar's context menu]({{< relref "#main-toolbar-image" >}}) to make them visible. [Read more about
+paint modes]({{< relref "../paint-modes" >}})
 
 **Lock Alpha** (padlock)
 > *Brush → Paint Mode → Paint Mode: Lock Alpha*, or press `Shift+L`
@@ -181,7 +192,7 @@ tools, so they are visible by default.
 {{< img src="main-toolbar-view-alt.jpg" float="right" >}}
 
 These buttons allow single-click adjustments of the view. These items are optional, you need to use the [main toolbar's
-context menu]({{< relref "#" >}}) to make them visible.
+context menu]({{< relref "#main-toolbar-image" >}}) to make them visible.
 
 There's no equivalent of these buttons for the canvas position, but the cursor keys will pan around the canvas.
 
@@ -197,7 +208,7 @@ There's no equivalent of these buttons for the canvas position, but the cursor k
 {{< img src="main-toolbar-view-reset.jpg" float="right" >}}
 
 These are for resetting the view. These items are optional, you need to use the [main toolbar's context menu]({{< relref
-"#" >}}) to make them visible.
+"#main-toolbar-image" >}}) to make them visible.
 
 **Reset and Centre View**
 > *View → Reset and Centre View*, or press `F12`