Missing Docs

docs/concepts/frames_layers.md

@@ -0,0 +1,13 @@
+---
+id: frames_layers
+title: Frames and Layers
+sidebar_label: Frames and Layers
+---
+
+(Section under construction)
+Note: add info about cel properties in cel.md as well
+
+Define frames as collection of cels list different properties of frames.
+
+Define layers and it's properties, list different typer of layers in detail.
+Discuss layer effects (i can't think of a better place)

docs/concepts/image_effects.md

@@ -0,0 +1,7 @@
+---
+id: animating_effects
+title: Animating Effects
+sidebar_label: Animating Effects
+---
+
+(Section under construction)

docs/concepts/project.md

@@ -8,7 +8,7 @@ In Pixelorama, the term "Project" refers to the entire sprite, which contains al
 
 A Project contains the following properties:
 - A set of frames for animations, along with their duration, animation tags and FPS, as well as multiple layers. Frames and layers intersect and create [cels](cel), which are the editable images themselves of the project.
-- A [size](../user_manual/transforming/#scale) - width and height - in pixels.
+- A [size](transforming/#scale) - width and height - in pixels.
 - A name.
 - [Brushes](brush) that are local to that specific project.
 - [Guides](../user_manual/user_interface/canvas/#rulers-and-guides) - lines that help you draw.

docs/user_manual/transforming.md → docs/concepts/transforming.md

@@ -4,6 +4,8 @@ title: Transforming
 sidebar_label: Transforming
 ---
 
+The term transformation describes an operation that changes or distorts something in some way.
+
 Currently, there are three types of transformations in Pixelorama. Translation (moving), scale and rotation. Transformations can either affect the currently active entire cels, or [selections](selecting).
 
 Keep in mind that **any content moved outside the canvas boundaries will be lost**.

docs/user_manual/customization/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Customization",
+    "position": 4
+  }

docs/user_manual/customization/layouts.md

@@ -0,0 +1,8 @@
+---
+id: layouts
+title: Managing Layouts
+sidebar_label: Managing Layouts
+sidebar_position: 3
+---
+
+(Section under construction)

docs/user_manual/customization/panels.md

@@ -0,0 +1,8 @@
+---
+id: panels
+title: Managing Panels
+sidebar_label: Managing Panels
+sidebar_position: 2
+---
+
+(Section under construction)

docs/user_manual/customization/preferences.md

@@ -0,0 +1,8 @@
+---
+id: preferences
+title: Preferences
+sidebar_label: Preferences
+sidebar_position: 1
+---
+
+(Section under construction)

docs/user_manual/open_and_import.md

@@ -0,0 +1,8 @@
+---
+id: open_and_import
+title: Open and Import
+sidebar_label: Open and Import
+sidebar_position: 5
+---
+
+(Section under construction)

docs/user_manual/save_and_export.md

@@ -2,7 +2,7 @@
 id: save_and_export
 title: Save and Export
 sidebar_label: Save and Export
-sidebar_position: 3
+sidebar_position: 6
 ---
 
 You can either save or export your projects. Saving a project will create a [.pxo file](../concepts/project/#pxo-files), which is Pixelorama's custom file format, while exporting means that one (or multiple, in case of animations) `.png`(s), an `.apng`, or a `.gif` file will be created.

docs/user_manual/tool_types/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Know Your Tools",
+    "position": 3
+  }

docs/user_manual/drawing.md → docs/user_manual/tool_types/drawing.md

@@ -38,7 +38,7 @@ The "Fill inside" option fills the entire area with the selected color between t
 ### Pixel Perfect
 The Pencil and Eraser (and [Shading](shading)!) tools have an option called "Pixel Perfect". This essentially creates "pixel perfect" lines for you by automatically removing the middle pixel of L-shapes. In other words, it removes extra adjacent pixels often referred to as "doubles" in order to create lines that are one-pixel thick.
 
-![Not pixel-perfect line vs pixel perfect line](../../static/img/pixel_perfect_line_diff.png)
+![Not pixel-perfect line vs pixel perfect line](../../../static/img/pixel_perfect_line_diff.png)
 
 ##### Not pixel-perfect line on the left, compared to a pixel perfect line on the right.
 

docs/user_manual/selecting.md → docs/user_manual/tool_types/selecting.md

@@ -4,7 +4,7 @@ title: Selecting
 sidebar_label: Selecting
 ---
 
-You can select specific areas of your sprite to make changes at. When there is an available selection, any operation such as drawing, shading and image effect application will only affect the selected part(s) of the drawing. Selections also allow you to easily [apply transformations to specific parts of the image, such as moving and scaling](transforming). An active selection is denoted by a [marching ants effect](https://en.wikipedia.org/wiki/Marching_ants) around the selected pixels.
+You can select specific areas of your sprite to make changes at. When there is an available selection, any operation such as drawing, shading and image effect application will only affect the selected part(s) of the drawing. Selections also allow you to easily [apply transformations to specific parts of the image, such as moving and scaling](../../concepts/transforming). An active selection is denoted by a [marching ants effect](https://en.wikipedia.org/wiki/Marching_ants) around the selected pixels.
 
 ## Selection Tools
 You can use one of the available selection tools in Pixelorama. Each tool selects things slightly differently.

docs/user_manual/user_interface/canvas.md

@@ -2,6 +2,7 @@
 id: canvas
 title: The Canvas
 sidebar_label: The Canvas
+sidebar_position: 2
 ---
 
 ![Pixelorama's Canvas](../../../static/img/canvas.png)

docs/user_manual/user_interface/canvas_preview.md

@@ -0,0 +1,11 @@
+---
+id: canvas_preview
+title: Canvas Preview
+sidebar_label: Canvas Preview
+---
+
+(Section under construction)
+
+describe how to zoom in/out, describe it can do animation independent of the timeline's play button (even if you press play button of preview, only the preview starts to animate)
+
+describe the animation modes (all frames / current frame as spritesheet)

docs/user_manual/user_interface/color_picker.md

@@ -0,0 +1,10 @@
+---
+id: color_picker
+title: Color Picker
+sidebar_label: Color Picker
+sidebar_position: 2
+---
+
+(Section under construction)
+
+Note: reason for using Color Picker as a singular is so that we don't have to change it again for 1.x

docs/user_manual/user_interface/global_options.md

@@ -0,0 +1,11 @@
+---
+id: global_options
+title: Global Tool Options
+sidebar_label: Global Tool Options
+---
+
+(Section under contruction)
+
+add it to the list in [user interface basics](user_interface)
+Describe each option one by one.
+This should also inclyde dynamics in detail.

docs/user_manual/palettes.md → docs/user_manual/user_interface/palettes.md

@@ -2,7 +2,6 @@
 id: palettes
 title: Palettes
 sidebar_label: Palettes
-sidebar_position: 4
 ---
 
 Palettes are a way to organize colors in your projects.
@@ -16,7 +15,7 @@ Palettes currently don't support undo/redo so be careful with any modifications
 :::
 
 ## Palettes panel
-![Pixelorama's Canvas](../../static/img/palettes-panel.png)
+![Pixelorama's Canvas](../../../static/img/palettes-panel.png)
 
 The top of the panel consists of `Palettes selector`, [`Edit palette button`](#editing-palette-metadata) and [`Add new palette button`](#creating-new-palette).
 
@@ -25,7 +24,7 @@ The main section is the [`Palette grid`](#palette-grid), displaying all colors p
 On the left of the [`Palette grid`](#palette-grid) are [`tools`](#palette-grid-tools) used to edit the colors of the palette.
 
 ### Creating a new palette {#creating-new-palette}
-![Pixelorama's Canvas](../../static/img/palette-create.png)
+![Pixelorama's Canvas](../../../static/img/palette-create.png)
 
 A new palette can be created by clicking `Add new palette button`.
 
@@ -62,7 +61,7 @@ You can limit colors import to just some or all cels (as seen in the animation t
 | All frames | Colors imported from all frames and their layers. |
 
 ### Editing palette metadata {#editing-palette-metadata}
-![Pixelorama's Canvas](../../static/img/palette-edit.png)
+![Pixelorama's Canvas](../../../static/img/palette-edit.png)
 
 Currently, selected palette metadata can be edited with `Edit palette button`.
 

docs/user_manual/user_interface/reference_images.md

@@ -0,0 +1,9 @@
+---
+id: reference_images
+title: Reference Images
+sidebar_label: Reference Images
+---
+
+(Section under construction)
+
+we have to decide if we should document 0.11.x or 1.x here...

docs/user_manual/tools.md → docs/user_manual/user_interface/toolbar.md

@@ -1,12 +1,12 @@
 ---
-id: tools
-title: Tools
-sidebar_label: Tools
+id: toolbar
+title: The Toolbar
+sidebar_label: The Toolbar
 ---
 
 Tools are the main way to interact with your artwork.
 
-![Pixelorama's toolbar, located on the left side of the application window.](../../static/img/toolbar.png)
+![Pixelorama's toolbar, located on the left side of the application window.](../../../static/img/toolbar.png)
 ##### Pixelorama's toolbar, located on the left side of the application window.
 
 ## Left and right mouse buttons
@@ -18,16 +18,16 @@ In Pixelorama, you are given the ability to map a different tool to each mouse b
 
 So, to sum up, blue represents the left mouse button and orange represents the right mouse button. To map a tool to your left mouse button you can left-click the button of the tool you want to map in the toolbar, and to map a tool to your right mouse button you can right-click the tool button.
 
-When you are on your [canvas](user_interface/canvas), if you left-click, the tool that you left-clicked on the toolbar will be used and if you right-click, the tool that you right-clicked will be used.
+When you are on your [canvas](canvas), if you left-click, the tool that you left-clicked on the toolbar will be used and if you right-click, the tool that you right-clicked will be used.
 
-![A screenshot example of the Pencil tool having a blue half background, which is mapped to the left mouse button and the Eraser tool having an orange half background, which is mapped to the right mouse button.](../../static/img/left_right_tools.png)
+![A screenshot example of the Pencil tool having a blue half background, which is mapped to the left mouse button and the Eraser tool having an orange half background, which is mapped to the right mouse button.](../../../static/img/left_right_tools.png)
 
 ##### A screenshot example of the Pencil tool having a blue half background, which is mapped to the left mouse button and the Eraser tool having an orange half background, which is mapped to the right mouse button.
 
 ## The tools
 These are all of the available tools in Pixelorama in order, from top to bottom.
 
-### [The selection tools](selecting)
+### [The selection tools](../tool_types/selecting)
 | Name      | Description | Default Shortcut |
 | ----------- | ----------- | ----------- |
 | Rectangular Selection | Create a rectangular selection.| L: <kbd>R</kbd>, R: <kbd> Alt + R</kbd> |
@@ -36,29 +36,29 @@ These are all of the available tools in Pixelorama in order, from top to bottom.
 | Select By Color | Selects all parts of the cel that share the same color.| L: <kbd>W</kbd>, R: <kbd> Alt + W</kbd> |
 | Magic Wand | Selects the neighboring same-color area of the pixel the cursor was in on mouse button press. | L: <kbd>Q</kbd>, R: <kbd> Alt + Q</kbd> |
 | Lasso / Free Select Tool | Selects a rough outline of an area. | L: <kbd>F</kbd>, R: <kbd> Alt + F</kbd> |
-| Move | Moves the content of the active cel. Not a selection tool, see [transforming](transforming). | L: <kbd>T</kbd>, R: <kbd> Alt + T</kbd> |
+| Move | Moves the content of the active cel. Not a selection tool, see [transforming](../../concepts/transforming). | L: <kbd>T</kbd>, R: <kbd> Alt + T</kbd> |
 
-### [Canvas](user_interface/canvas) navigation tools
+### [Canvas](canvas) navigation tools
 | Name      | Description | Default Shortcut |
 | ----------- | ----------- | ----------- |
 | Zoom | Allows the user to change the zoom level of the canvas.| L: <kbd>Z</kbd>, R: <kbd> Alt + Z</kbd> |
 | Pan | Allows the user to move around the canvas. | L: <kbd>M</kbd>, R: <kbd> Alt + M</kbd> |
 
-### [Drawing tools and drawing-assisting tools](drawing)
+### [Drawing tools and drawing-assisting tools](../tool_types/drawing)
 | Name      | Description | Default Shortcut |
 | ----------- | ----------- | ----------- |
 | Color Picker | Get the color of the pixel on mouse position. | L: <kbd>O</kbd>, R: <kbd> Alt + O</kbd> |
 | Pencil | Draw individual pixels on mouse position.| L: <kbd>P</kbd>, R: <kbd> Alt + P</kbd> |
 | Eraser | Erase individual pixels on mouse position.| L: <kbd>E</kbd>, R: <kbd> Alt + E</kbd> |
 | Bucket | Fill a same-color area or all of the pixels of the same color with a new color. | L: <kbd>B</kbd>, R: <kbd> Alt + B</kbd> |
-| Shading | [See this page for a detailed explanation.](shading)| L: <kbd>U</kbd>, R: <kbd> Alt + U</kbd> |
+| Shading | [See this page for a detailed explanation.](../tool_types/shading)| L: <kbd>U</kbd>, R: <kbd> Alt + U</kbd> |
 | Line Tool | Create a straight line. | L: <kbd>L</kbd>, R: <kbd> Alt + L</kbd> |
 | Rectangle Tool | Create a rectangle.| L: <kbd>S</kbd>, R: <kbd> Alt + S</kbd> |
 | Ellipse Tool | Create an ellipse. | L: <kbd>C</kbd>, R: <kbd> Alt + C</kbd> |
 
 Hovering your mouse over a tool button will reveal a small display that can give you more information about the tool.
 
-![Hover](../../static/img/toolbar_hover.png)
+![Hover](../../../static/img/toolbar_hover.png)
 
 ## Tool options
 Almost every tool has certain properties that the user can tweak, such as brush type and size, different modes, color or mirroring. The tool options are located in the right side of the application window and they are separated in left tool and right tool settings. These, of course, correspond to the two tools you have mapped at your two mouse buttons. The two colors are also mapped to different mouse buttons. The left one is for the left mouse button tool, and the right one is for the right mouse button tool.
@@ -77,7 +77,7 @@ Most of the tools have some binary property that has to be changed often. Holdin
 
 The tool options change every time the user changes the available tool, and most tools have their own unique options.
 
-![An example of tool options, for the Pencil and Eraser tool.](../../static/img/tool_options.png)
+![An example of tool options, for the Pencil and Eraser tool.](../../../static/img/tool_options.png)
 ##### An example of tool options, for the Pencil and Eraser tool.
 
 ### Changing colors

docs/user_manual/user_interface/topbar.md

@@ -0,0 +1,9 @@
+---
+id: topbar
+title: The Topbar
+sidebar_label: The Topbar
+---
+
+(Section under construction)
+
+briefly describe what menus contain, mention sliders in the topbar, mention status label and the current frame/total frames label

docs/user_manual/user_interface/user_interface_basics.md → docs/user_manual/user_interface/user_interface.md

@@ -1,5 +1,5 @@
 ---
-id: user_interface_basics
+id: user_interface
 title: User Interface Basics
 sidebar_label: User Interface Basics
 sidebar_position: 1
@@ -13,13 +13,19 @@ Pixelorama aims for a simplistic and understandable, yet professional User Inter
 
 Now, let's categorize the common elements of which the UI is consisted of and give everything a short description.
 
-- **1** - The traditional top bar with menus found in most windowed applications.
-- **2** - The [toolbar](../tools). The area where you can select a tool to work with.
+- **1** - The traditional [top bar](topbar) with menus found in most windowed applications.
+- **2** - The [toolbar](toolbar). The area where you can select a tool to work with.
 - **3** - Project tabs. This is where you will find all of your currently opened projects and switch between them by clicking on their respective tab.
 - **4** - The [timeline](timeline). This is where you will find the sprite's layers and frames for animation.
-- **5** - A small canvas preview. There you can also preview your animation independently from your main canvas.
-- **6** - The [tool options](../tools/#tool-options). This is where you can configure some settings of your currently active tools, as well as select your left and right colors.
-- **7** - The [palettes](../palettes). Useful for easily picking pre-set colors.
+- **5** - A small [canvas preview](canvas_preview). There you can also preview your animation independently from your main canvas.
+- **6** - The [color pickers](color_pickers) for left/right tools.
+- **7** - The [global tool options](global_options) which are same for both left/right tools.
+- **8** - The [tool options](toolbar/#tool-options). This is where you can configure some settings of your currently active tools, as well as select your left and right colors.
+- **9** - The [palettes](palettes). Useful for easily picking pre-set colors.
+
+:::tip Even More Panels!!!
+There are also other panels in pixelorama but they are hidden by default.
+:::
 
 Located in the middle of your view, the [canvas](canvas) is the "sheet" on which you are creating your artwork. This is the main area of the workspace because this is where you will be doing all of the drawing.