diff --git a/docs/src/content/docs/docs/v2/area.png b/docs/src/content/docs/docs/v2/area.png index 8bf10461e2c4..db676384b1bf 100644 Binary files a/docs/src/content/docs/docs/v2/area.png and b/docs/src/content/docs/docs/v2/area.png differ diff --git a/docs/src/content/docs/docs/v2/areas.mdx b/docs/src/content/docs/docs/v2/areas.mdx index fd87d74749fa..45e9200dcff1 100644 --- a/docs/src/content/docs/docs/v2/areas.mdx +++ b/docs/src/content/docs/docs/v2/areas.mdx @@ -5,7 +5,6 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'; import {Monitor, Plus, TextT, Faders, Folder, Stack, SignOut, SignIn, Trash, Export, PlusCircle, Door, DotsThreeVertical} from "@phosphor-icons/react"; import logo from '/public/img/logo.svg'; - ## Introduction ![Area](area.png) diff --git a/docs/src/content/docs/docs/v2/color_picker.md b/docs/src/content/docs/docs/v2/color_picker.md index ea3b6e00ae16..164678c7b570 100644 --- a/docs/src/content/docs/docs/v2/color_picker.md +++ b/docs/src/content/docs/docs/v2/color_picker.md @@ -2,12 +2,31 @@ title: Color picker --- -![Color picker](color_picker.png) +Colors can be selected by using two methods: The color toolbar and the color picker overlay. -* Open, save the dialog to access it in other documents -* Reset the palette for the default material palette -* Add, remove and edit the name of the palette -* Add new colors by clicking on the plus button in the bottom -* Edit the colors by long clicking on the color +To update the color palette, read the [pack documentation](/docs/v2/pack). -You can access the color picker on the view tool by clicking on the color button. +## Color toolbar + +![Color toolbar](color_toolbar.png) + +If this is enabled in the settings, a color toolbar will be shown when a colorable tool is selected. This toolbar allows you to quickly select a color from a predefined set of colors. Click on the plus icon to select a custom color. + +## Color picker overlay + +![Color picker overlay](color_picker_overlay.png) + +This overlay can be opened by clicking on a property tile that is colorable, for example inside the properties panel of the pen tool. Click on a color to select it. Click on the custom button to open the custom color picker. + +If you want to delete a color from the palette, right click on it (or long press on touch devices) and select delete. + +### Custom color picker + +![Custom color picker](color_picker.png) + +Here you can select any color you want. On the left you can see a color wheel. Under it you can select the brightness of the color. +Note: if you choose a darker color on the bottom, the wheel selection gets less precise. + +Under the brightness slider you can see a preview of the selected color. You can also enter a hex code to select a color. It is specified as `#RRGGBB`, where `RR` is the red value, `GG` is the green value, and `BB` is the blue value in hexadecimal notation. + +On the right you can see the red, green and blue values that make up the color. These values can be changed by dragging the sliders or by entering a value between 0 and 255. Pin the color to add it to the color palette. diff --git a/docs/src/content/docs/docs/v2/color_picker.png b/docs/src/content/docs/docs/v2/color_picker.png index 1248b49a425b..3fca5fb48a4e 100644 Binary files a/docs/src/content/docs/docs/v2/color_picker.png and b/docs/src/content/docs/docs/v2/color_picker.png differ diff --git a/docs/src/content/docs/docs/v2/color_picker_overlay.png b/docs/src/content/docs/docs/v2/color_picker_overlay.png new file mode 100644 index 000000000000..6dc9760747d4 Binary files /dev/null and b/docs/src/content/docs/docs/v2/color_picker_overlay.png differ diff --git a/docs/src/content/docs/docs/v2/color_toolbar.png b/docs/src/content/docs/docs/v2/color_toolbar.png new file mode 100644 index 000000000000..889be797c466 Binary files /dev/null and b/docs/src/content/docs/docs/v2/color_toolbar.png differ diff --git a/docs/src/content/docs/docs/v2/intro.mdx b/docs/src/content/docs/docs/v2/intro.mdx index 747864b27d52..fada4ce9d456 100644 --- a/docs/src/content/docs/docs/v2/intro.mdx +++ b/docs/src/content/docs/docs/v2/intro.mdx @@ -46,7 +46,7 @@ To start working on the app, you have two options: - ![Welcome screen](welcome_screen_desktop.png) + ![Welcome screen](@assets/img/main.png) The top of the screen holds the update banner, a link to this documentation, and the Settings button. Finally, to the right of the Settings button, you have a drop-down menu for controlling when the update banner will appear (always/never/on updates). The Files section is the main area to the left. Here, you can do the following operations: @@ -64,15 +64,16 @@ To start working on the app, you have two options: When opening Butterfly on a mobile device, you will be presented with a screen like this: ![Welcome screen first part](welcome_screen_mobile_1.png) - The top of the screen holds the update banner. Below it, you can find a link to this documentation, the Settings button, and a drop-down menu for controlling when the update banner will appear (always/never/on updates). + The top of the screen you will see the release name and a link to the release notes and documentation. - Below those, you can find the Quickstart section with the templates available in the current location. For a fresh install, this includes the Light and Dark templates. + Below those, you can find the Quickstart section with the templates available in the current location. For a fresh install, this includes the Light and Dark templates. Below the templates, you will see your recent files. - Scrolling down, you will see the Files section: + Clicking on the files tab at the bottom will bring you to the file list: \ ![Welcome screen second part](welcome_screen_mobile_2.png) Here, you can do the following operations: - Select the display type ( Grid or List) + - Reloading the file list - Select the [source storage](../storage) of the files - Sort the display order of the files - Add a folder, file, template, or import files by clicking the plus sign diff --git a/docs/src/content/docs/docs/v2/pack.md b/docs/src/content/docs/docs/v2/pack.md index bcadaa8c39b7..628962bb28ad 100644 --- a/docs/src/content/docs/docs/v2/pack.md +++ b/docs/src/content/docs/docs/v2/pack.md @@ -2,26 +2,29 @@ title: Pack --- -:::caution[Upcoming changes] - -In-document packs will be deprecated soon. In the meantime, it is recommended to save your packs globally to ensure a smooth transition to future releases. - -See [this issue](https://github.com/LinwoodDev/Butterfly/issues/805) for details. - -::: - A pack is a collection of components that can be used in the stamp tool. You can create your own pack or import an existing one. For this click on the top left corner and click on "Packs". +Packs are saved globally, so you can use them in any document. If you want to share the pack in a document, you can bundle it with the document. + ## Properties -Name | Description ----: | :--- -Name | The name of the pack -Author | The author of the pack -Description | A description of the pack +| Name | Description | +| ----------: | :------------------------ | +| Name | The name of the pack | +| Author | The author of the pack | +| Version | The version of the pack | +| Description | A description of the pack | ### Components Components are a way to save elements that you use often. You can create your own components or import an existing one using packs. Use the components navigator page to paste components into your notes. + +## Styles + +Styles are used to customize the appearance of the text. The paragraph styles can be used to format a whole paragraph (like a heading), while the text styles can be used to format only a part of the text (like a bold word). + +## Palettes + +The color palettes can be used to quickly select colors for the colorable tools. You will see a color picker overlay (like mentioned in the [color picker documentation](/docs/v2/color_picker)) when you edit a color picker. diff --git a/docs/src/content/docs/docs/v2/welcome_screen_desktop.png b/docs/src/content/docs/docs/v2/welcome_screen_desktop.png deleted file mode 100644 index 658b52836a87..000000000000 Binary files a/docs/src/content/docs/docs/v2/welcome_screen_desktop.png and /dev/null differ diff --git a/docs/src/content/docs/docs/v2/welcome_screen_mobile_1.png b/docs/src/content/docs/docs/v2/welcome_screen_mobile_1.png index cbaa2e27da59..45107dcb8eeb 100644 Binary files a/docs/src/content/docs/docs/v2/welcome_screen_mobile_1.png and b/docs/src/content/docs/docs/v2/welcome_screen_mobile_1.png differ diff --git a/docs/src/content/docs/docs/v2/welcome_screen_mobile_2.png b/docs/src/content/docs/docs/v2/welcome_screen_mobile_2.png index d2680dd4660e..5e00db10cbd6 100644 Binary files a/docs/src/content/docs/docs/v2/welcome_screen_mobile_2.png and b/docs/src/content/docs/docs/v2/welcome_screen_mobile_2.png differ diff --git a/docs/src/content/docs/downloads/android.mdx b/docs/src/content/docs/downloads/android.mdx index fedd824dbc9a..9e58cc85a191 100644 --- a/docs/src/content/docs/downloads/android.mdx +++ b/docs/src/content/docs/downloads/android.mdx @@ -58,6 +58,14 @@ The nightly version is also available on the stores. Please note that this versi + + + + + + + + Read more about the nightly version of Butterfly [here](/community/nightly). @@ -65,5 +73,6 @@ Read more about the nightly version of Butterfly [here](/community/nightly). :::tip[What apk should I use?] **Universal** should work on all devices. If you want a smaller apk, use the one that matches your device's architecture. +**Legacy** apks are using the `useLegacyPackaging` flag on the build which compresses the native libraries to reduce the apk size. However, this can affect loading performance. Read more [in the android documentation](https://developer.android.com/reference/tools/gradle-api/7.1/com/android/build/api/dsl/JniLibsPackagingOptions#uselegacypackaging). :::