From 0a6d49fb906e704b69bc8e56a4708ac6fd12d8a0 Mon Sep 17 00:00:00 2001 From: Adrian Marin Date: Sat, 6 Jul 2024 15:09:37 +0300 Subject: [PATCH] use the Image component so we avoid content redraw --- docs/.vitepress/theme/components/Image.vue | 41 ++++++++++++----- docs/3.0/actions.md | 14 +++--- docs/3.0/associations.md | 2 +- docs/3.0/associations/belongs_to.md | 12 ++--- docs/3.0/associations/has_many.md | 2 +- docs/3.0/associations/has_one.md | 2 +- docs/3.0/authorization.md | 18 ++++---- docs/3.0/basic-filters.md | 10 ++--- docs/3.0/branding.md | 10 ++--- docs/3.0/cards.md | 20 ++++----- .../associations_description_option_common.md | 2 +- docs/3.0/common/reloadable.md | 2 +- docs/3.0/common/scopes_common.md | 2 +- docs/3.0/common/show_hide_buttons_common.md | 2 +- docs/3.0/custom-asset-pipeline.md | 2 +- docs/3.0/custom-fields.md | 10 ++--- docs/3.0/customizable-controls.md | 12 ++--- docs/3.0/customization.md | 20 ++++----- docs/3.0/dashboards.md | 2 +- docs/3.0/dynamic-filters.md | 30 ++++++------- docs/3.0/faq.md | 10 ++--- docs/3.0/field-options.md | 44 +++++++++---------- docs/3.0/field-wrappers.md | 10 ++--- docs/3.0/fields.md | 2 +- docs/3.0/fields/badge.md | 2 +- docs/3.0/fields/boolean.md | 2 +- docs/3.0/fields/boolean_group.md | 2 +- docs/3.0/fields/code.md | 2 +- docs/3.0/fields/date_time.md | 2 +- docs/3.0/fields/files.md | 2 +- docs/3.0/fields/heading.md | 2 +- docs/3.0/fields/key_value.md | 2 +- docs/3.0/fields/location.md | 4 +- docs/3.0/fields/markdown.md | 2 +- docs/3.0/fields/money.md | 12 ++--- docs/3.0/fields/preview.md | 2 +- docs/3.0/fields/progress_bar.md | 4 +- docs/3.0/fields/record_link.md | 5 ++- docs/3.0/fields/status.md | 2 +- docs/3.0/fields/tags.md | 22 +++++----- docs/3.0/fields/time.md | 2 +- docs/3.0/fields/trix.md | 2 +- docs/3.0/gem-server-authentication.md | 4 +- docs/3.0/grid-view.md | 8 ++-- .../guides/act-as-taggable-on-integration.md | 2 +- docs/3.0/guides/basic-authentication.md | 2 +- .../conditionally-render-styled-rows.md | 2 +- docs/3.0/guides/display-scope-record-count.md | 2 +- docs/3.0/guides/export-to-csv.md | 2 +- docs/3.0/guides/format-ruby-object-to-json.md | 4 +- .../guides/nested-records-when-creating.md | 4 +- docs/3.0/guides/tabs-counter-indicator.md | 2 +- .../guides/use-markdown-in-help-attributes.md | 2 +- docs/3.0/internals.md | 2 +- docs/3.0/map-view.md | 2 +- docs/3.0/menu-editor.md | 22 +++++----- .../native-components/avo-panel-component.md | 24 +++++----- docs/3.0/record-previews.md | 2 +- docs/3.0/records-reordering.md | 6 +-- docs/3.0/resource-panels.md | 12 ++--- docs/3.0/resource-sidebar.md | 2 +- docs/3.0/resource-tools.md | 6 +-- docs/3.0/resources.md | 23 +++++----- docs/3.0/scopes.md | 2 +- docs/3.0/search.md | 22 +++++----- docs/3.0/stimulus-integration.md | 28 ++++-------- docs/3.0/tabs.md | 4 +- 67 files changed, 279 insertions(+), 266 deletions(-) diff --git a/docs/.vitepress/theme/components/Image.vue b/docs/.vitepress/theme/components/Image.vue index afb23d8e..51ccd837 100644 --- a/docs/.vitepress/theme/components/Image.vue +++ b/docs/.vitepress/theme/components/Image.vue @@ -1,31 +1,52 @@ diff --git a/docs/3.0/actions.md b/docs/3.0/actions.md index 60251b50..a263979b 100644 --- a/docs/3.0/actions.md +++ b/docs/3.0/actions.md @@ -13,7 +13,7 @@ For example, you might want to mark a user as active/inactive and optionally sen Once you attach an action to a resource using the `action` method inside the `actions` method, it will appear in the **Actions** dropdown. By default, actions appear on the `Index`, `Show`, and `Edit` views. Versions previous to 2.9 would only display the actions on the `Index` and `Show` views. -![Actions dropdown](/assets/img/actions/actions-dropdown.gif) +Actions dropdown :::info Since version you may use the [customizable controls](./customizable-controls) feature to show the actions outside the dropdown. ::: @@ -85,7 +85,7 @@ More about this on the [authorization page](./authorization#attachments). ::: -![Actions](/assets/img/actions/action-fields.jpg) +Actions ## The `handle` method @@ -169,7 +169,7 @@ def handle(**args) end ``` -Avo alert responses +Avo alert responses ### Run actions silently @@ -419,7 +419,7 @@ end You may customize the labels for the action buttons using `confirm_button_label` and `cancel_button_label`. -Avo button labels +Avo button labels ### No confirmation actions @@ -608,7 +608,7 @@ end ``` ::: -![actions link demo](/assets/img/actions/action_link.gif) +actions link demo ## StimulusJS @@ -634,7 +634,7 @@ def actions action Avo::Actions::Test::CloseModal end ``` - + :::option `label` You can pass a `label` option to display that text @@ -658,4 +658,4 @@ def actions end ``` - + diff --git a/docs/3.0/associations.md b/docs/3.0/associations.md index c98e91e8..23b34419 100644 --- a/docs/3.0/associations.md +++ b/docs/3.0/associations.md @@ -60,4 +60,4 @@ You might want to change the name that appears on the association page. For exam You can customize that using [fields localization](i18n.html#localizing-fields). -Custom label +Custom label diff --git a/docs/3.0/associations/belongs_to.md b/docs/3.0/associations/belongs_to.md index cab12ffd..c48a64d5 100644 --- a/docs/3.0/associations/belongs_to.md +++ b/docs/3.0/associations/belongs_to.md @@ -79,13 +79,13 @@ Controls the creation link visibility on forms. On the `Index` and `Show` views, Avo will generate a link to the associated record containing the [`self.title`](./../resources.html#setting-the-title-of-the-resource) value of the target resource. -Belongs to index +Belongs to index -Belongs to show +Belongs to show On the `Edit` and `New` views, Avo will generate a dropdown element with the available records where the user can change the associated model. -Belongs to edit +Belongs to edit ## Polymorphic `belongs_to` @@ -136,7 +136,7 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Belongs to ploymorphic help +Belongs to ploymorphic help ## Searchable `belongs_to` @@ -157,8 +157,8 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Belongs to searchable -Belongs to searchable +Belongs to searchable +Belongs to searchable `searchable` works with `polymorphic` `belongs_to` associations too. diff --git a/docs/3.0/associations/has_many.md b/docs/3.0/associations/has_many.md index ffe017f0..ff7c861f 100644 --- a/docs/3.0/associations/has_many.md +++ b/docs/3.0/associations/has_many.md @@ -31,7 +31,7 @@ You can add use this option to make the association title clickable. That link w This feature doesn't go deeper than this. It just helps you see the association table easier in a separate page. -![](/assets/img/3_0/has_many/linkable.gif) + ::: ## Has Many Through diff --git a/docs/3.0/associations/has_one.md b/docs/3.0/associations/has_one.md index 84558957..7a17a3da 100644 --- a/docs/3.0/associations/has_one.md +++ b/docs/3.0/associations/has_one.md @@ -16,7 +16,7 @@ The `HasOne` association shows the unfolded view of your `has_one` association. field :admin, as: :has_one ``` -Has one +Has one ## Options diff --git a/docs/3.0/authorization.md b/docs/3.0/authorization.md index bc8787af..36252b01 100644 --- a/docs/3.0/authorization.md +++ b/docs/3.0/authorization.md @@ -110,7 +110,7 @@ Controls whether the user can see the actions button on the page. Controls whether the user can see the [records reordering](./records-reordering) buttons on the page. -Actions button +Actions button ::: @@ -142,14 +142,14 @@ In the `Post` `has_many` `Comments` example, when you want to authorize `show_co Controls whether the `Attach comment` button is visible. The `record` variable is the parent record (a `Post` instance in our scenario). - + ::: :::option `detach_{association}?` Controls whether the **detach button is available** on the associated record row on the view. The `record` variable is the actual row record (a `Comment` instance in our scenario). - + ::: :::option `view_{association}?` @@ -165,7 +165,7 @@ Controls whether the **view button is visible** on the associated record row on This **does not** control whether the user has access to that record. You control that using the Policy of that record (`PostPolicy.show?` in our example). ::: - + :::info Difference between `view_{association}?` and `show_{association}?` Let's take a `Post` `has_many` `Comment`s. @@ -184,28 +184,28 @@ Controls whether the **edit button is visible** on the associated record row on This **does not** control whether the user has access to that record's edit page. You control that using the Policy of that record (`PostPolicy.show?` in our example). ::: - + :::: :::option `create_{association}?` Controls whether the `Create comment` button is visible. The `record` variable is the parent record (a `Post` instance in our scenario). - + ::: :::option `destroy_{association}?` Controls whether the **delete button is visible** on the associated record row on the page.The `record` variable is the actual row record (a `Comment` instance in our scenario). - + ::: :::option `act_on_{association}?` Controls whether the `Actions` dropdown is visible. The `record` variable is the parent record (a `Post` instance in our scenario). - + ::: :::option `reorder_{association}?` @@ -321,7 +321,7 @@ When working with files, it may be necessary to establish policies that determin Both the `record` and the `user` will be available for you to access. - + :::option `upload_{FIELD_ID}?` Controls whether the user can upload the attachment. diff --git a/docs/3.0/basic-filters.md b/docs/3.0/basic-filters.md index 28e00604..d6287879 100644 --- a/docs/3.0/basic-filters.md +++ b/docs/3.0/basic-filters.md @@ -92,7 +92,7 @@ end Avo has several types of filters available [Boolean filter](#boolean_filter), [Select filter](#select_filter), [Multiple select filter](#multiple_select_filter) and [Text filter](#text_filter). -Avo filters +Avo filters ### Filter values @@ -319,7 +319,7 @@ class Avo::Filters::PostStatus < Avo::Filters::MultipleSelectFilter end ``` -Avo multiple select filter +Avo multiple select filter ### Dynamic options @@ -493,7 +493,7 @@ class Avo::Filters::CourseCity < Avo::Filters::BooleanFilter end ``` -Avo filters +Avo filters The `countries` method above will check if the `Avo::Filters::CourseCountryFilter` has anything selected. If so, get the names of the chosen ones. This way, you show only the cities from the selected countries and not all of them. @@ -611,7 +611,7 @@ end Besides checking if the countries filter is populated (`applied_filters["Avo::Filters::CourseCountryFilter"].present?`), we also want to allow the user to customize the cities filter further, so we need to check if the user has added a value to that filter (`applied_filters["Avo::Filters::CourseCountryFilter"].blank?`). If these conditions are true, the country filter has a value, and the user hasn't selected any values from the cities filter, we can react to it and set a value as the default one. -Avo filters +Avo filters Of course, you can modify the logic and return all kinds of values based on your needs. @@ -621,7 +621,7 @@ Of course, you can modify the logic and return all kinds of values based on your There might be times when you will want to show a message to the user when you're not returning any options. You may customize that message using the `empty_message` option. -Avo filters +Avo filters ```ruby{4} # app/avo/filters/course_city.rb diff --git a/docs/3.0/branding.md b/docs/3.0/branding.md index b1891ad5..3e13cc18 100644 --- a/docs/3.0/branding.md +++ b/docs/3.0/branding.md @@ -47,11 +47,11 @@ end You may also customize the color of Avo's background using the `background` key. -![](/assets/img/branding/green.jpg) + -![](/assets/img/branding/red.jpg) + -![](/assets/img/branding/orange.jpg) + :::info The color format can be hex (starting with `#`) or rgb (three groups split by a space, not a comma). @@ -105,7 +105,7 @@ Avo.configure do |config| end ``` -![](/assets/img/branding/chart-colors.jpg) + :::warning The chart colors should be hex colors. They are forwarded to chart.js @@ -117,7 +117,7 @@ We want to make it easy to change the logo for your app, so we added the `logo` The `logo` should be the "big" logo you want to display on the desktop version of your app, and `logomark` should be a squared-aspect image that Avo displays on the mobile version. -![](/assets/img/branding/logomark.gif) + ## Customize the missing image placeholder diff --git a/docs/3.0/cards.md b/docs/3.0/cards.md index 8e481c26..754d908f 100644 --- a/docs/3.0/cards.md +++ b/docs/3.0/cards.md @@ -29,7 +29,7 @@ class Avo::Cards::UsersMetric < Avo::Cards::MetricCard end ``` -Avo Metric Card +Avo Metric Card ## Ranges #### Control the aggregation using ranges @@ -80,7 +80,7 @@ class Avo::Cards::UsersMetric < Avo::Cards::MetricCard self.display_header = false end ``` -Avo Map card +Avo Map card ## Format @@ -100,7 +100,7 @@ class Avo::Cards::AmountRaised < Avo::Cards::MetricCard end ``` -![amount raised without format](/assets/img/3_0/cards/amount_raised_without_format.png) +amount raised without format Example with format: @@ -120,13 +120,13 @@ class Avo::Cards::AmountRaised < Avo::Cards::MetricCard end ``` -![amount raised with format](/assets/img/3_0/cards/amount_raised_with_format.png) +amount raised with format ## Metric card The metric card is your friend when you only need to display a simple big number. To generate one run `bin/rails g avo:card users_metric --type metric`. -Avo Metric +Avo Metric #### Calculate results @@ -197,7 +197,7 @@ class Avo::Cards::UsersMetric < Avo::Cards::MetricCard end ``` -Avo Prefix & suffix +Avo Prefix & suffix ## Chartkick card @@ -243,7 +243,7 @@ class Avo::Cards::UserSignups < Avo::Cards::ChartkickCard end ``` -Chartkick card +Chartkick card ### Chart types @@ -323,7 +323,7 @@ class Avo::Cards::ExampleCustomPartial < Avo::Cards::PartialCard # self.display_header = true end ``` -Custom partial card +Custom partial card You can embed a piece of content from another app using an iframe. You can hide the header using the `self.display_header = false` option. That will render the embedded content flush to the container. @@ -344,7 +344,7 @@ end ``` -Avo Map card +Avo Map card ## Cards visibility @@ -426,7 +426,7 @@ end ``` ::: -Avo Dashboard Divider +Avo Dashboard Divider Dividers can be a simple line between your cards or have some text on them that you control using the `label` option. When you don't want to show the line, you can enable the `invisible` option, which adds the divider but does not display a border or label. diff --git a/docs/3.0/common/associations_description_option_common.md b/docs/3.0/common/associations_description_option_common.md index 538729b0..db17482c 100644 --- a/docs/3.0/common/associations_description_option_common.md +++ b/docs/3.0/common/associations_description_option_common.md @@ -1,7 +1,7 @@ :::option `description` Changes the text displayed under the association name. -![](/assets/img/associations/description-option.jpg) + #### Default diff --git a/docs/3.0/common/reloadable.md b/docs/3.0/common/reloadable.md index be24b3bc..76a8879a 100644 --- a/docs/3.0/common/reloadable.md +++ b/docs/3.0/common/reloadable.md @@ -31,4 +31,4 @@ In the above example, the reloadable will be visible if the current_user is an a #### ExecutionContext The reloadable block executes within the [`ExecutionContext`](./../execution-context), granting access to all default methods and attributes. -Reloadable +Reloadable diff --git a/docs/3.0/common/scopes_common.md b/docs/3.0/common/scopes_common.md index b4b60df5..3b5871c2 100644 --- a/docs/3.0/common/scopes_common.md +++ b/docs/3.0/common/scopes_common.md @@ -27,7 +27,7 @@ end The `comments` query on the user `Index` page will have the `approved` scope attached. -Association scope +Association scope With version 2.5.0, you'll also have access to the `parent` record so that you can use that to scope your associated models even better. diff --git a/docs/3.0/common/show_hide_buttons_common.md b/docs/3.0/common/show_hide_buttons_common.md index a9b43172..79f05ee6 100644 --- a/docs/3.0/common/show_hide_buttons_common.md +++ b/docs/3.0/common/show_hide_buttons_common.md @@ -4,4 +4,4 @@ You will want to control the visibility of the attach/detach/create/destroy/acti Find out more on the [authorization](./../authorization#associations) page. -Associations authorization +Associations authorization diff --git a/docs/3.0/custom-asset-pipeline.md b/docs/3.0/custom-asset-pipeline.md index 483982ab..5b7671e8 100644 --- a/docs/3.0/custom-asset-pipeline.md +++ b/docs/3.0/custom-asset-pipeline.md @@ -96,7 +96,7 @@ The order in which Avo loads the partials and asset files is this one: 3. `_head.html.erb` ::: -![Avo and the asset pipeline](/assets/img/asset-pipeline.jpg) +Avo and the asset pipeline ### Sprockets and Propshaft diff --git a/docs/3.0/custom-fields.md b/docs/3.0/custom-fields.md index 9176c4ea..bae82078 100644 --- a/docs/3.0/custom-fields.md +++ b/docs/3.0/custom-fields.md @@ -54,7 +54,7 @@ class Avo::Resources::Project < Avo::BaseResource end end ``` -Progress custom field +Progress custom field The generated view components are basic text fields for now. @@ -254,7 +254,7 @@ No let's do something about those views. Let's add a progress bar to the `Index` <% end %> ``` -Progress bar custom field on index +Progress bar custom field on index For the `Edit` view, we're going to do something different. We'll implement a `range` input. @@ -295,7 +295,7 @@ function updateValue(e) { } ``` -Progress bar custom field edit +Progress bar custom field edit ## Field assets @@ -328,7 +328,7 @@ Avo ships with a few Stimulus controllers that help you build more dynamic field This controller allows you to hide your content and add a trigger to show it. You'll find it in the Trix field. -Hidden input controller +Hidden input controller You should add the `:always_show` `attr_reader` and `@always_show` instance variables to your field. @@ -372,4 +372,4 @@ Next, in your fields `Show` component, you need to do a few things. <% end %> ``` -Hidden input controller +Hidden input controller diff --git a/docs/3.0/customizable-controls.md b/docs/3.0/customizable-controls.md index 1aa72d63..4be45b42 100644 --- a/docs/3.0/customizable-controls.md +++ b/docs/3.0/customizable-controls.md @@ -4,7 +4,7 @@ license: advanced # Customizable controls -![](/assets/img/resources/customizable-controls/index.jpg) + One of the things that we wanted to support from day one is customizable controls on resource pages, and now, Avo supports customizable controls on , , and views and for the table row. @@ -12,7 +12,7 @@ One of the things that we wanted to support from day one is customizable control By default, Avo displays a few buttons (controls) for the user to use on the , , and views which you can override using the appropriate resource options. -![](/assets/img/3_0/customizable-controls/default-controls.png) + ## Customize the controls @@ -42,7 +42,7 @@ class Avo::Resources::Fish < Avo::BaseResource end ``` -![](/assets/img/3_0/customizable-controls/show-controls.png) + ::: :::option Edit page @@ -64,7 +64,7 @@ class Avo::Resources::Fish < Avo::BaseResource end ``` -![](/assets/img/3_0/customizable-controls/show-controls.png) + ::: :::option Index page @@ -84,7 +84,7 @@ class Avo::Resources::Fish < Avo::BaseResource end ``` -![](/assets/img/3_0/customizable-controls/index-controls.png) + ::: :::option Row controls @@ -110,7 +110,7 @@ class Avo::Resources::Fish < Avo::BaseResource end ``` -![](/assets/img/3_0/customizable-controls/row-controls.png) + ::: ## Controls diff --git a/docs/3.0/customization.md b/docs/3.0/customization.md index 86788d65..b79ebd4a 100644 --- a/docs/3.0/customization.md +++ b/docs/3.0/customization.md @@ -28,13 +28,13 @@ There are a few customization options to change how resources are displayed in t You may customize how many resources you can view per page with `config.per_page = 24`. -Per page config +Per page config ### Per page steps Similarly customize the per-page steps in the per-page picker with `config.per_page_steps = [12, 24, 48, 72]`. -Per page config +Per page config ### Resources via per page @@ -47,11 +47,11 @@ The `ResourceIndex` component supports two view types `:table` and `:grid`. You
Table view - Table view + Table view
Grid view - Grid view + Grid view
@@ -71,7 +71,7 @@ end That will render all `id` fields in the **Index** view as a link to that resource. -As link to resource +As link to resource ## Resource controls on the left side @@ -85,7 +85,7 @@ end ``` -Resource controls on the left side +Resource controls on the left side ## Container width @@ -154,7 +154,7 @@ You can access the context data with `::Avo::App.context` object. By default, Avo ships with breadcrumbs enabled. -Avo breadcrumbs +Avo breadcrumbs You may disable them using the `display_breadcrumbs` configuration option. @@ -431,7 +431,7 @@ Please follow [this](authentication.html#customise-the-sign-out-link) guide in [
- +
In the CRUD interface Avo adds the view by default. This means that when your users will see the view icon to go to that detail page and they will be redirected to the page when doing certain tasks (update a record, run an action, etc.). @@ -446,7 +446,7 @@ Avo.configure do |config| end ``` -![](/assets/img/customization/skip_show_view.gif) + ## Logger @@ -550,5 +550,5 @@ Avo.configure do |config| end ``` -Click to view record in Avo +Click to view record in Avo :::: diff --git a/docs/3.0/dashboards.md b/docs/3.0/dashboards.md index 16df45ec..b1541441 100644 --- a/docs/3.0/dashboards.md +++ b/docs/3.0/dashboards.md @@ -45,7 +45,7 @@ class Avo::Dashboards::MyDashboard < Avo::Dashboards::BaseDashboard end ``` -Avo Dashboard +Avo Dashboard ## Settings diff --git a/docs/3.0/dynamic-filters.md b/docs/3.0/dynamic-filters.md index 01a48718..483f4aea 100644 --- a/docs/3.0/dynamic-filters.md +++ b/docs/3.0/dynamic-filters.md @@ -60,8 +60,8 @@ There are a few types of filters available for you to use out of the box. - Is null - Is not null
- - + +
Test it on [avodemo](https://main.avodemo.com/avo/resources/users?filters[is_admin?][is_true][]=), check the [source code](https://github.com/avo-hq/main.avodemo.com/blob/main/app/avo/resources/user.rb#L38) @@ -81,11 +81,11 @@ Test it on [avodemo](https://main.avodemo.com/avo/resources/users?filters[is_adm
- - + +
- +
@@ -109,8 +109,8 @@ This filter will give you options from the database. - Is present - Is blank
- - + +
Test it on [avodemo](https://main.avodemo.com/avo/resources/teams?filters[memberships][contains][]=), check the [source code](https://github.com/avo-hq/main.avodemo.com/blob/main/app/avo/resources/team.rb#L75) @@ -128,8 +128,8 @@ Test it on [avodemo](https://main.avodemo.com/avo/resources/teams?filters[member - `<=` (lower than or equal to)
- - + +
Test it on [avodemo](https://main.avodemo.com/avo/resources/teams?filters[id][gte][]=2), check the [source code](https://github.com/avo-hq/main.avodemo.com/blob/main/app/avo/resources/team.rb#L27) @@ -144,8 +144,8 @@ Test it on [avodemo](https://main.avodemo.com/avo/resources/teams?filters[id][gt - Is null - Is not null
- - + +
Test it on [avodemo](https://main.avodemo.com/avo/resources/courses?filters[country][is][]=USA), check the [source code](https://github.com/avo-hq/main.avodemo.com/blob/main/app/avo/resources/course.rb#L55) @@ -167,8 +167,8 @@ Test it on [avodemo](https://main.avodemo.com/avo/resources/courses?filters[coun - Is blank
- - + +
Test it on [avodemo](https://main.avodemo.com/avo/resources/users?filters[first_name][contains][]=Avo), check the [source code](https://github.com/avo-hq/main.avodemo.com/blob/main/app/avo/resources/user.rb#L33) @@ -186,8 +186,8 @@ Test it on [avodemo](https://main.avodemo.com/avo/resources/users?filters[first_ Contained in will not work when using the `acts-as-taggable-on` gem. :::
- - + +
Test it on [avodemo](https://main.avodemo.com/avo/resources/courses?filters[skills][array_contains][]=), check the [source code](https://github.com/avo-hq/main.avodemo.com/blob/main/app/avo/resources/course.rb#L42) diff --git a/docs/3.0/faq.md b/docs/3.0/faq.md index f086aeeb..3fc0890a 100644 --- a/docs/3.0/faq.md +++ b/docs/3.0/faq.md @@ -147,8 +147,8 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Render new lines -Render new lines +Render new lines +Render new lines You can change how you display the information by using the `format_using` option. @@ -166,7 +166,7 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Render new lines +Render new lines ### Use the `white-space: pre-line` style rule @@ -182,7 +182,7 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Render new lines +Render new lines ### Use the `whitespace-pre-line` class @@ -198,4 +198,4 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Render new lines +Render new lines diff --git a/docs/3.0/field-options.md b/docs/3.0/field-options.md index 615c0772..f9ac0cf5 100644 --- a/docs/3.0/field-options.md +++ b/docs/3.0/field-options.md @@ -32,7 +32,7 @@ To customize the label, you can use the `name` property to pick a different labe field :is_available, as: :boolean, name: "Availability" ``` -Field naming convention override +Field naming convention override ## Showing / Hiding fields on different views @@ -114,7 +114,7 @@ field :is_writer, as: :text, format_using: -> { This example snippet will make the `:is_writer` field generate `👍` or `👎` emojis instead of `1` or `0` values on display views and the values `1` or `0` on form views. -Fields formatter +Fields formatter Another example: @@ -161,7 +161,7 @@ Add it to any field to make that column sortable in the view. field :name, as: :text, sortable: true ``` -Sortable fields +Sortable fields **Related:** - [Add an index on the `created_at` column](./best-practices#add-an-index-on-the-created-at-column) @@ -222,7 +222,7 @@ Some fields support the `placeholder` option, which will be passed to the inputs field :name, as: :text, placeholder: 'John Doe' ``` -Placeholder option +Placeholder option ## Required To indicate that a field is mandatory, you can utilize the `required` option, which adds an asterisk to the field as a visual cue. @@ -234,7 +234,7 @@ Avo automatically examines each field to determine if the associated attribute r field :name, as: :text, required: true ``` -Required option +Required option @@ -253,7 +253,7 @@ When you need to prevent the user from editing a field, the `disabled` option wi field :name, as: :text, disabled: true ``` -Disabled option +Disabled option ### Disabled as a block @@ -275,7 +275,7 @@ When you need to prevent the user from editing a field, the `readonly` option wi field :name, as: :text, readonly: true ``` -Readonly option +Readonly option ## Default Value @@ -302,7 +302,7 @@ field :custom_css, as: :code, theme: 'dracula', language: 'css', help: "This ena field :password, as: :password, help: 'You may verify the password strength here.' ``` -Help text +Help text ## Nullable @@ -333,7 +333,7 @@ field :name, as: :text, link_to_record: true field :email, as: :gravatar, link_to_record: true ``` -As link to resource +As link to resource You can add this property on [`id`](./fields/id.html), [`text`](./fields/text.html), and [`gravatar`](./fields/gravatar.html) fields. @@ -353,7 +353,7 @@ class Avo::Resources::Project < Avo::BaseResource end ``` -Index text align +Index text align ## Stacked layout @@ -364,11 +364,11 @@ field :meta, as: :key_value, stacked: true ``` #### `inline` layout (default) -![](/assets/img/fields/field_wrapper_layout_inline.jpg) + #### `stacked` layout -![](/assets/img/fields/field_wrapper_layout_stacked.jpg) + ## Global `stacked` layout @@ -396,9 +396,9 @@ To start customizing the field components, you can eject one or multiple field c #### Ejecting All Components for a Field -`$ rails g avo:eject --field-components --scope admin` +`$ rails g avo:eject --field-components FIELD_TYPE --scope admin` -Replace `` with the desired field type. For instance, to eject components for a Text field, use: +Replace `FIELD_TYPE` with the desired field type. For instance, to eject components for a Text field, use: `$ rails g avo:eject --field-components text --scope admin` @@ -552,7 +552,7 @@ field :name, as: :text, html: { } ``` -Index field wrapper +Index field wrapper ### Show field wrapper @@ -564,7 +564,7 @@ field :name, as: :text, html: { } ``` -Show field wrapper +Show field wrapper ### Show label target @@ -576,7 +576,7 @@ field :name, as: :text, html: { } ``` -Show label target +Show label target ### Show content target @@ -588,7 +588,7 @@ field :name, as: :text, html: { } ``` -Show content target +Show content target ### Edit field wrapper @@ -600,7 +600,7 @@ field :name, as: :text, html: { } ``` -Edit field wrapper +Edit field wrapper ### Edit label target @@ -612,7 +612,7 @@ field :name, as: :text, html: { } ``` -Edit label target +Edit label target ### Edit content target @@ -624,7 +624,7 @@ field :name, as: :text, html: { } ``` -Edit content target +Edit content target ### Edit input target @@ -636,7 +636,7 @@ field :name, as: :text, html: { } ``` -Index field wrapper +Index field wrapper ::: diff --git a/docs/3.0/field-wrappers.md b/docs/3.0/field-wrappers.md index 321747d3..02b440f7 100644 --- a/docs/3.0/field-wrappers.md +++ b/docs/3.0/field-wrappers.md @@ -13,7 +13,7 @@ You'll probably never have to use these components and helpers by themselves, bu # Index field wrapper -![](/assets/img/field-wrappers/index_field_wrapper.jpg) + Each field displayed on the view is wrapped in this component that regulates the way content is displayed and makes it easy to control some options. @@ -84,8 +84,8 @@ The instance of the resource. It's usually passed in with the `field_wrapper_arg # Show & Edit field wrapper -![](/assets/img/field-wrappers/show_field_wrapper.jpg) -![](/assets/img/field-wrappers/edit_field_wrapper.jpg) + + The and field wrappers are actually the same component. @@ -93,7 +93,7 @@ You may use the component `Avo::Index::FieldWrapperComponent` or the helper `fie ## Field wrapper areas -![](/assets/img/field-wrappers/field_wrapper_areas.jpg) + Each field wrapper is divided in three areas. @@ -230,7 +230,7 @@ Display the field in a column layout with the label on top of the value ``` ::: -![](/assets/img/field-wrappers/stacked_field.jpg) + :::option `style` diff --git a/docs/3.0/fields.md b/docs/3.0/fields.md index 902dfd9b..3db1be02 100644 --- a/docs/3.0/fields.md +++ b/docs/3.0/fields.md @@ -147,7 +147,7 @@ In the following example, the `is_available` field will render the label as *Is field :is_available, as: :boolean ``` -Field naming convention +Field naming convention :::info If having the fields stacked one on top of another is not the right layout, try the [resource-sidebar](./resource-sidebar). diff --git a/docs/3.0/fields/badge.md b/docs/3.0/fields/badge.md index 7cb5f09a..6e687c68 100644 --- a/docs/3.0/fields/badge.md +++ b/docs/3.0/fields/badge.md @@ -7,7 +7,7 @@ license: community The `Badge` field is used to display an easily recognizable status of a record. -Badge field +Badge field ```ruby field :stage, diff --git a/docs/3.0/fields/boolean.md b/docs/3.0/fields/boolean.md index 25708a17..acece823 100644 --- a/docs/3.0/fields/boolean.md +++ b/docs/3.0/fields/boolean.md @@ -7,7 +7,7 @@ license: community The `Boolean` field renders a `input[type="checkbox"]` on **Form** views and a nice green `check` icon/red `X` icon on the **Show** and **Index** views. -Boolean field +Boolean field ```ruby field :is_published, diff --git a/docs/3.0/fields/boolean_group.md b/docs/3.0/fields/boolean_group.md index 817eebfa..fdcccb47 100644 --- a/docs/3.0/fields/boolean_group.md +++ b/docs/3.0/fields/boolean_group.md @@ -5,7 +5,7 @@ license: community # Boolean Group -Boolean group field +Boolean group field The `BooleanGroup` is used to update a `Hash` with `string` keys and `boolean` values in the database. diff --git a/docs/3.0/fields/code.md b/docs/3.0/fields/code.md index bab7024c..70d2aa46 100644 --- a/docs/3.0/fields/code.md +++ b/docs/3.0/fields/code.md @@ -5,7 +5,7 @@ license: community # Code -Code field +Code field The `Code` field generates a code editor using [codemirror](https://codemirror.net/) package. This field is hidden on **Index** view. diff --git a/docs/3.0/fields/date_time.md b/docs/3.0/fields/date_time.md index 4275c74c..54cf38de 100644 --- a/docs/3.0/fields/date_time.md +++ b/docs/3.0/fields/date_time.md @@ -5,7 +5,7 @@ license: community # DateTime -DateTime field +DateTime field The `DateTime` field is similar to the Date field with two new attributes. `time_24hr` tells flatpickr to use 24 hours format and `timezone` to tell it in what timezone to display the time. By default, it uses your browser's timezone. diff --git a/docs/3.0/fields/files.md b/docs/3.0/fields/files.md index 1bc8b8da..1f9d7cbb 100644 --- a/docs/3.0/fields/files.md +++ b/docs/3.0/fields/files.md @@ -19,7 +19,7 @@ field :documents, as: :files :::option `view_type` -![](/assets/img/files_view_types.gif) + Set the default `view_type`. diff --git a/docs/3.0/fields/heading.md b/docs/3.0/fields/heading.md index 9b6be4f9..c662b276 100644 --- a/docs/3.0/fields/heading.md +++ b/docs/3.0/fields/heading.md @@ -22,7 +22,7 @@ end ::: -Heading field +Heading field The `Heading` field displays a header that acts as a separation layer between different sections. diff --git a/docs/3.0/fields/key_value.md b/docs/3.0/fields/key_value.md index b43b7a40..d746b11f 100644 --- a/docs/3.0/fields/key_value.md +++ b/docs/3.0/fields/key_value.md @@ -5,7 +5,7 @@ license: community # KeyValue -KeyValue field +KeyValue field The `KeyValue` field makes it easy to edit flat key-value pairs stored in `JSON` format in the database. diff --git a/docs/3.0/fields/location.md b/docs/3.0/fields/location.md index 12f21d32..7ed4625e 100644 --- a/docs/3.0/fields/location.md +++ b/docs/3.0/fields/location.md @@ -12,7 +12,7 @@ The `Location` field is used to display a point on a map. field :coordinates, as: :location ``` -Location field +Location field :::warning You need to add the `mapkick-rb` (not `mapkick`) gem to your `Gemfile` and have the `MAPBOX_ACCESS_TOKEN` environment variable with a valid [Mapbox](https://account.mapbox.com/auth/signup/) key. @@ -51,4 +51,4 @@ By using this notation, Avo will grab the `latitude` and `longitude` from those This will also render the view with two separate fields to edit the coordinates. -Location field +Location field diff --git a/docs/3.0/fields/markdown.md b/docs/3.0/fields/markdown.md index 9536e60d..fe3c1238 100644 --- a/docs/3.0/fields/markdown.md +++ b/docs/3.0/fields/markdown.md @@ -5,7 +5,7 @@ license: community # Markdown -Trix field +Trix field The `Markdown` field renders a [EasyMDE Markdown Editor](https://github.com/Ionaru/easy-markdown-editor) and is associated with a text or textarea column in the database. `Markdown` field converts text within the editor into raw Markdown text and stores it back in the database. diff --git a/docs/3.0/fields/money.md b/docs/3.0/fields/money.md index 7037faf9..8cb4183e 100644 --- a/docs/3.0/fields/money.md +++ b/docs/3.0/fields/money.md @@ -1,7 +1,7 @@ --- version: '3.6' license: community -betaStatus: Beta +BetaStatus: Beta --- # Money @@ -17,21 +17,21 @@ You can explore the implementation of the money field in [avodemo](https://main. ### Example on new - + - + ### Example on show with currencies USD - + ### Example on show with currencies RON - + ### Example on index - + ## Installation diff --git a/docs/3.0/fields/preview.md b/docs/3.0/fields/preview.md index 9ace97c9..d38f3940 100644 --- a/docs/3.0/fields/preview.md +++ b/docs/3.0/fields/preview.md @@ -7,7 +7,7 @@ license: community The `Preview` field adds a tiny icon to each row on the view that, when hovered, it will display a preview popup with more information regarding that record. -![](/assets/img/fields/preview/preview.gif) + ```ruby field :preview, as: :preview diff --git a/docs/3.0/fields/progress_bar.md b/docs/3.0/fields/progress_bar.md index 03aa4599..53a1b463 100644 --- a/docs/3.0/fields/progress_bar.md +++ b/docs/3.0/fields/progress_bar.md @@ -10,7 +10,7 @@ The `ProgressBar` field renders a `progress` element on `Index` and `Show` views ```ruby field :progress, as: :progress_bar ``` -Progress bar custom field on index +Progress bar custom field on index ## Options @@ -67,4 +67,4 @@ field :progress, value_suffix: "%" ``` -Progress bar custom field edit +Progress bar custom field edit diff --git a/docs/3.0/fields/record_link.md b/docs/3.0/fields/record_link.md index c23c09d0..78dc7d14 100644 --- a/docs/3.0/fields/record_link.md +++ b/docs/3.0/fields/record_link.md @@ -35,7 +35,7 @@ class Comment < ApplicationRecord end # Calling the method like so will give us an instance of a Post -Comment.first.post => # +Comment.first.post => # class Avo::Resources::Comment < Avo::BaseResource def fields @@ -45,7 +45,7 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Record link field +Record link field ## Options @@ -158,3 +158,4 @@ field :creator, as: :record_link, use_resource: "AdminUser", add_via_params: fal User.find user_id end ``` + diff --git a/docs/3.0/fields/status.md b/docs/3.0/fields/status.md index 5063533e..ebde8ead 100644 --- a/docs/3.0/fields/status.md +++ b/docs/3.0/fields/status.md @@ -17,7 +17,7 @@ field :progress, success_when: [:done], ``` -Status field +Status field ## Options diff --git a/docs/3.0/fields/tags.md b/docs/3.0/fields/tags.md index 39702a4e..feb4f82a 100644 --- a/docs/3.0/fields/tags.md +++ b/docs/3.0/fields/tags.md @@ -12,7 +12,7 @@ Adding a list of things to a record is something we need to do pretty frequently field :skills, as: :tags ``` -Avo tags field +Avo tags field ## Options @@ -36,7 +36,7 @@ class Course < ApplicationRecord end ``` -Avo tags field +Avo tags field #### Default @@ -85,7 +85,7 @@ field :skills, disallowed: ["not", "that"] ``` -Avo tags field +Avo tags field #### Default @@ -106,7 +106,7 @@ field :skills, enforce_suggestions: true ``` -Avo tags field +Avo tags field ::: @@ -121,7 +121,7 @@ field :skills, suggestions_max_items: 2 ``` -Avo tags field - suggestions max items option +Avo tags field - suggestions max items option #### Default @@ -141,7 +141,7 @@ field :items, close_on_select: true ``` -Avo tags field +Avo tags field ::: @@ -178,7 +178,7 @@ field :skills, delimiters: [",", " "] ``` -Avo tags field +Avo tags field #### Default @@ -211,7 +211,7 @@ field :skills, Valid values are `nil` for array values and `select` for a single value. -![](/assets/img/fields/tags-field/mode-select.gif) + ::: @@ -229,7 +229,9 @@ field :skills, When the user searches for a record, the field will perform a request to the server to fetch the records that match that query. -![](/assets/img/fields/tags-field/mode-select.gif) + + +
#### Default @@ -285,7 +287,7 @@ To mitigate that use the `fetch_labels` option. :::option `fetch_labels` :::warning -Deprecated since in favor of [`format_using`](tags#format_using) +Deprecated since in favor of [`format_using`](tags#format_using) ::: The `fetch_labels` option allows you to pass an array of custom strings to be displayed on the tags field. This option is useful when Avo is displaying a bunch of IDs and you want to show some custom label from that ID's record. diff --git a/docs/3.0/fields/time.md b/docs/3.0/fields/time.md index 16cc781d..0f25f737 100644 --- a/docs/3.0/fields/time.md +++ b/docs/3.0/fields/time.md @@ -6,7 +6,7 @@ license: community # Time -![](/assets/img/fields/time.png) + The `Time` field is similar to the [DateTime](./date_time) field and uses the time picker of flatpickr (without the calendar). You can use the `time_24hr` option for flatpickr to use the 24-hour format. Add the option `relative: false` if you want the time to stay absolute and not change based on the browser's timezone. diff --git a/docs/3.0/fields/trix.md b/docs/3.0/fields/trix.md index 2dbcfdee..3da6d8db 100644 --- a/docs/3.0/fields/trix.md +++ b/docs/3.0/fields/trix.md @@ -13,7 +13,7 @@ field :body, as: :trix The `Trix` field renders a [WYSIWYG Editor](https://trix-editor.org/) and can be associated with a `string` or `text` column in the database. The value stored in the database will be the editor's resulting `HTML` content. -Trix field +Trix field Trix field is hidden from the `Index` view. diff --git a/docs/3.0/gem-server-authentication.md b/docs/3.0/gem-server-authentication.md index 36d1a027..2b12b00e 100644 --- a/docs/3.0/gem-server-authentication.md +++ b/docs/3.0/gem-server-authentication.md @@ -76,8 +76,8 @@ You might need to install Avo's paid gems in you GitHub Actions pipeline. There Go in your repo, under Settings -> Secrets and Variables -> Actions -> New repository secret and add your Gem server token there with the name `BUNDLE_PACKAGER__DEV` and the token as the value. -![](/assets/img/3_0/gem-server-authentication/github-actions.png) -![](/assets/img/3_0/gem-server-authentication/new-secret.png) + + #### 2. Expose `BUNDLE_PACKAGER__DEV` as an environment variable diff --git a/docs/3.0/grid-view.md b/docs/3.0/grid-view.md index 8dcef420..b4cac6fe 100644 --- a/docs/3.0/grid-view.md +++ b/docs/3.0/grid-view.md @@ -1,7 +1,7 @@ # Grid view -
-Avo grid view +
+Avo grid view Some resources are best displayed in a grid view. We can do that with Avo using a `cover_url`, a `title`, and a `body`. @@ -26,7 +26,7 @@ class Avo::Resources::Post < Avo::BaseResource end ``` -Avo view switcher +Avo view switcher ## Make default view @@ -84,5 +84,5 @@ class Avo::Resources::Post < Avo::BaseResource end ``` -Grid html option +Grid html option diff --git a/docs/3.0/guides/act-as-taggable-on-integration.md b/docs/3.0/guides/act-as-taggable-on-integration.md index 1fc88e09..8fcca002 100644 --- a/docs/3.0/guides/act-as-taggable-on-integration.md +++ b/docs/3.0/guides/act-as-taggable-on-integration.md @@ -14,4 +14,4 @@ resource :taggings resource :tags ``` -![](/assets/img/3_0/guides/act-as-taggable-on-integration/act-as-taggable-on-integration.gif) + diff --git a/docs/3.0/guides/basic-authentication.md b/docs/3.0/guides/basic-authentication.md index 1ee944a4..e1937dcc 100644 --- a/docs/3.0/guides/basic-authentication.md +++ b/docs/3.0/guides/basic-authentication.md @@ -2,7 +2,7 @@ Because in Rails we commonly do that using a static function on the controller we need to [safely extend the controller](https://avohq.io/blog/safely-extend-a-ruby-on-rails-controller) to contain that function. -Add Avo behind Basic Authentication +Add Avo behind Basic Authentication In actuality we will end up with something that behaves like this: diff --git a/docs/3.0/guides/conditionally-render-styled-rows.md b/docs/3.0/guides/conditionally-render-styled-rows.md index f51379a6..e0ef20ba 100644 --- a/docs/3.0/guides/conditionally-render-styled-rows.md +++ b/docs/3.0/guides/conditionally-render-styled-rows.md @@ -1,6 +1,6 @@ # Conditionally render styled rows -![](./assets/conditionally-render-styled-rows.png) + We've had [a request](https://discord.com/channels/740892036978442260/1197693313520771113) come in from a customer to style their soft-deleted records differently than the regular ones. diff --git a/docs/3.0/guides/display-scope-record-count.md b/docs/3.0/guides/display-scope-record-count.md index 9373e167..e751ba31 100644 --- a/docs/3.0/guides/display-scope-record-count.md +++ b/docs/3.0/guides/display-scope-record-count.md @@ -9,7 +9,7 @@ You may use that to display a counter of how many records are there in that scop ### Example -![](/assets/img/3_0/guides/display-scope-record-count/scopes.png) + ```ruby{2-9} class Avo::Scopes::Scheduled < Avo::Advanced::Scopes::BaseScope diff --git a/docs/3.0/guides/export-to-csv.md b/docs/3.0/guides/export-to-csv.md index e57942af..eade77fc 100644 --- a/docs/3.0/guides/export-to-csv.md +++ b/docs/3.0/guides/export-to-csv.md @@ -61,5 +61,5 @@ class Avo::Actions::ExportCsv < Avo::BaseAction end ``` -![](/assets/img/3_0/guides/export-to-csv/export-to-csv.gif) + diff --git a/docs/3.0/guides/format-ruby-object-to-json.md b/docs/3.0/guides/format-ruby-object-to-json.md index f6dbda75..59484edc 100644 --- a/docs/3.0/guides/format-ruby-object-to-json.md +++ b/docs/3.0/guides/format-ruby-object-to-json.md @@ -6,7 +6,7 @@ It's common to have JSON objects stored in your database. So you might want to d field :meta, as: :code, language: 'javascript' ``` -Avo Admin for Rails +Avo Admin for Rails But that will be hard to read on one line like that. So we need to format it. @@ -20,7 +20,7 @@ field :meta, as: :code, language: 'javascript' do end ``` -Avo Admin for Rails +Avo Admin for Rails That's better! You'll notice that the field is missing on the `Edit` view. That's normal for a computed field to be hidden on `Edit`. To fix that, we should add another one just for editing. diff --git a/docs/3.0/guides/nested-records-when-creating.md b/docs/3.0/guides/nested-records-when-creating.md index 721cbb64..779015fa 100644 --- a/docs/3.0/guides/nested-records-when-creating.md +++ b/docs/3.0/guides/nested-records-when-creating.md @@ -4,7 +4,7 @@ demo: https://main.avodemo.com/avo/resources/fish/new # Nested records when creating -![](/assets/img/3_0/guides/nested-records-when-creating/nested-records-demo.gif) + A lot of you asked for the ability to create nested `has_many` records on the view. Although it's fairly "easy" to implement using `accepts_nested_attributes_for` for simple cases, it's a different story to extract it, make it available, and cover most edge cases for everyone. That's why Avo and no other similar gems dont't offer this feature as a first-party feature. @@ -151,4 +151,4 @@ There you have it! Apart from the resource tool and the `extra_params` attribute, we wrote regular Rails code that we would have to write to get this functionality in our app. -![](/assets/img/3_0/guides/nested-records-when-creating/nested-records-demo.gif) + diff --git a/docs/3.0/guides/tabs-counter-indicator.md b/docs/3.0/guides/tabs-counter-indicator.md index a4d79e4b..4c840dbf 100644 --- a/docs/3.0/guides/tabs-counter-indicator.md +++ b/docs/3.0/guides/tabs-counter-indicator.md @@ -2,7 +2,7 @@ When a tab contains an association field you may want to show some counter indicator about how many records are on that particular tab. You can include that information inside tab's name. -![](/assets/img/3_0/guides/tabs-counter-indicator/tabs_counter.png) + ```ruby{7,10,16-23} class Avo::Resources::User < Avo::BaseResource diff --git a/docs/3.0/guides/use-markdown-in-help-attributes.md b/docs/3.0/guides/use-markdown-in-help-attributes.md index e215faaf..92df41db 100644 --- a/docs/3.0/guides/use-markdown-in-help-attributes.md +++ b/docs/3.0/guides/use-markdown-in-help-attributes.md @@ -83,4 +83,4 @@ end ) ``` -![](/assets/img/3_0/guides/use-markdown-in-help-attributes/result.png) + diff --git a/docs/3.0/internals.md b/docs/3.0/internals.md index 50240198..7982a1ea 100644 --- a/docs/3.0/internals.md +++ b/docs/3.0/internals.md @@ -1,4 +1,4 @@ -## Internals +# Internals This section documents on how we think about the internals of Avo and hwo much you could/should hook into them to extend it. diff --git a/docs/3.0/map-view.md b/docs/3.0/map-view.md index f8c341a8..f1a8bb25 100644 --- a/docs/3.0/map-view.md +++ b/docs/3.0/map-view.md @@ -11,7 +11,7 @@ resources to be displayed to the map view they require a `coordinates` field, bu To enable map view for a resource, you need to add the `map_view` class attribute to a resource. That will add the view switcher to the view. -Avo view switcher +Avo view switcher ```ruby class Avo::Resources::City < Avo::BaseResource diff --git a/docs/3.0/menu-editor.md b/docs/3.0/menu-editor.md index a602572a..765bc4e7 100644 --- a/docs/3.0/menu-editor.md +++ b/docs/3.0/menu-editor.md @@ -37,7 +37,7 @@ Avo.configure do |config| end ``` -Avo main menu +Avo main menu For now, Avo supports editing only two menus, `main_menu` and `profile_menu`. However, that might change in the future by allowing you to write custom menus for other parts of your app. @@ -97,7 +97,7 @@ A few menu item types are supported `link_to`, `section`, `group`, `resource`, a link_to "Google", path: "https://google.com", target: :_blank ``` -Avo menu editor +Avo menu editor When you add the `target: :_blank` option, a tiny external link icon will be displayed. ::: @@ -124,7 +124,7 @@ resource :posts resource "Avo::Resources::Comments" ``` -Avo menu editor +Avo menu editor You can also change the label for the `resource` items to something else. @@ -154,7 +154,7 @@ dashboard :dashy dashboard "Sales" ``` -Avo menu editor +Avo menu editor You can also change the label for the `dashboard` items to something else. @@ -175,7 +175,7 @@ section "Resources", icon: "heroicons/outline/academic-cap" do end ``` -Avo menu editor +Avo menu editor ::: @@ -191,7 +191,7 @@ group "Blog" do end ``` -Avo menu editor +Avo menu editor ::: :::option `all_resources` @@ -255,7 +255,7 @@ end The `all_resources` helper is taking into account your [authorization](./authorization) rules, so make sure you have `def index?` enabled in your resource policy. ::: -Avo menu editor +Avo menu editor ## Item visibility @@ -326,7 +326,7 @@ section "Resources", icon: "heroicons/outline/adjustments" do end ``` -Avo menu editor +Avo menu editor ### Icons on resource, dashboard, and link_to items @@ -346,7 +346,7 @@ section "Resources", icon: "resources", collapsable: true do end ``` -Avo menu editor +Avo menu editor That will add the arrow icon next to the section to indicate it's collapsable. So when your users collapse and expand it, their choice will be stored in Local Storage and remembered in that browser. @@ -360,7 +360,7 @@ section "Resources", icon: "resources", collapsable: true, collapsed: true do end ``` -Avo menu editor +Avo menu editor You might want to allow your users to hide certain items from view. @@ -401,7 +401,7 @@ Avo.configure do |config| end ``` -Avo profile menu +Avo profile menu ## Forms in profile menu diff --git a/docs/3.0/native-components/avo-panel-component.md b/docs/3.0/native-components/avo-panel-component.md index 914b96ce..a3137095 100644 --- a/docs/3.0/native-components/avo-panel-component.md +++ b/docs/3.0/native-components/avo-panel-component.md @@ -22,7 +22,7 @@ The panel component is one of the most used components in Avo. <% end %> ``` -![](/assets/img/native-components/avo-panel-component/index.jpg) + ## Options @@ -42,7 +42,7 @@ The name of the panel. It's displayed on the top under the breadcrumbs. #### Type `String` -![](/assets/img/native-components/avo-panel-component/name.jpg) + ::: :::option `description` @@ -51,7 +51,7 @@ Small text under the name that speaks a bit about what the panel does. #### Type `String` -![](/assets/img/native-components/avo-panel-component/description.jpg) + ::: :::option `classes` @@ -60,7 +60,7 @@ A list of classes that should be applied to the panel container. #### Type `String` -![](/assets/img/native-components/avo-panel-component/classes.jpg) + ::: :::option `body_classes` @@ -69,7 +69,7 @@ A list of classes that should be applied to the body of panel. #### Type `String` -![](/assets/img/native-components/avo-panel-component/body_classes.jpg) + ::: :::option `data` @@ -78,7 +78,7 @@ A hash of data attributes to be forwarded to the panel container. #### Type `Hash` -![](/assets/img/native-components/avo-panel-component/classes.jpg) + ::: :::option `display_breadcrumbs` @@ -87,7 +87,7 @@ Toggles the breadcrumbs visibility. You can't customize the breadcrumbs yet. #### Type `Boolean` -![](/assets/img/native-components/avo-panel-component/display_breadcrumbs.jpg) + ::: ## Slots @@ -110,7 +110,7 @@ The section is automatically aligned to the right using `justify-end` class. <% end %> ``` -![](/assets/img/native-components/avo-panel-component/tools-slot.jpg) + ::: :::option `body` @@ -124,7 +124,7 @@ This is one of the main slots of the component where the bulk of the content is <% end %> ``` -![](/assets/img/native-components/avo-panel-component/body-slot.jpg) + ::: :::option `bare_content` @@ -138,7 +138,7 @@ Used when displaying the [Grid view](./../grid-view), it displays the data flush <% end %> ``` -![](/assets/img/native-components/avo-panel-component/grid-view.jpg) + ::: :::option `footer_tools` @@ -152,7 +152,7 @@ This is pretty much the same slot as `tools` but rendered under the `body` or `b <% end %> ``` -![](/assets/img/native-components/avo-panel-component/footer-controls.jpg) + ::: :::option `footer` @@ -177,5 +177,5 @@ The sidebar will conveniently show things in a smaller area on the right of the <% end %> <% end %> ``` -![](/assets/img/native-components/avo-panel-component/sidebar.png) + ::: diff --git a/docs/3.0/record-previews.md b/docs/3.0/record-previews.md index dcf8bddf..5a95d1d8 100644 --- a/docs/3.0/record-previews.md +++ b/docs/3.0/record-previews.md @@ -29,4 +29,4 @@ class Avo::Resources::Team < Avo::BaseResource end end ``` -![](/assets/img/3_0/record-previews/preview-field.png) + diff --git a/docs/3.0/records-reordering.md b/docs/3.0/records-reordering.md index c1ab39dc..78c5bb7f 100644 --- a/docs/3.0/records-reordering.md +++ b/docs/3.0/records-reordering.md @@ -39,7 +39,7 @@ The actions have access to `record`, `resource`, `options` (the `ordering` class That configuration will generate a button with a popover containing the ordering buttons. -Avo ordering +Avo ordering ## Always show the order buttons @@ -60,7 +60,7 @@ class Avo::Resources::CourseLink < Avo::BaseResource end ``` -Avo ordering +Avo ordering ## Display the buttons in the `Index` view or association view @@ -121,7 +121,7 @@ end ## Reorder using drag and drop - + Sometimes just picking up a record and dropping it in the position that you'd like it to be. That's exactly what this feature does. diff --git a/docs/3.0/resource-panels.md b/docs/3.0/resource-panels.md index 44956583..d74f388e 100644 --- a/docs/3.0/resource-panels.md +++ b/docs/3.0/resource-panels.md @@ -1,6 +1,6 @@ # Resource panels
-Panel +Panel Panels are the backbone of Avo's display infrastructure. Most of the information that's on display is wrapped inside a panel. They help maintain a consistent design throughout Avo's pages. They are also available as a view component `Avo::PanelComponent` for custom tools, and you can make your own pages using it. @@ -20,7 +20,7 @@ class Avo::Resources::User < Avo::BaseResource end end ``` -Root fields and panel fields +Root fields and panel fields You can customize the panel `name` and panel `description`. @@ -66,7 +66,7 @@ end On this example Avo figured out that a main panel was not declared and it computes one with all standalone fields. -![](/assets/img/resource-panels/1.png) +
@@ -104,7 +104,7 @@ end Since the field that has it owns panel was inserted between a bunch of standalone fields Avo will compute a main panel for the first batch of standalone fields (`id` and `name`) and will compute a simple panel for the remaining groups of standalone fields (`user` and `type`) -![](/assets/img/resource-panels/2.png) +
@@ -126,7 +126,7 @@ def fields end ``` -![](/assets/img/resource-panels/3.png) + By using the `main_panel` and `panel` method, you can manually customize the organization of fields within your resource, allowing for greater flexibility and control. @@ -154,4 +154,4 @@ class Avo::Resources::User < Avo::BaseResource end ``` -Index view +Index view diff --git a/docs/3.0/resource-sidebar.md b/docs/3.0/resource-sidebar.md index c0bd9052..0d226bf5 100644 --- a/docs/3.0/resource-sidebar.md +++ b/docs/3.0/resource-sidebar.md @@ -32,7 +32,7 @@ class Avo::Resources::User < Avo::BaseResource end ``` -![](/assets/img/resource-sidebar/sidebar.jpg) + The fields will be stacked in a similar way in a narrower area on the side of the main panel. You may notice that inside each field, the tabel and value zones are also stacked one on top of the other to allow for a larger area to display the field value. diff --git a/docs/3.0/resource-tools.md b/docs/3.0/resource-tools.md index bd182b22..0acb50e9 100644 --- a/docs/3.0/resource-tools.md +++ b/docs/3.0/resource-tools.md @@ -38,11 +38,11 @@ The partial is ready for you to customize further.

🪧 This partial is waiting to be updated

- You can edit this file here app/views/avo/resource_tools/post_info.html.erb. + You can edit this file here app/views/avo/resource_tools/post_info.html.erb.

- The resource tool configuration file should be here app/avo/resource_tools/post_info.rb. + The resource tool configuration file should be here app/avo/resource_tools/post_info.rb.

<% @@ -62,7 +62,7 @@ The partial is ready for you to customize further. ``` -Avo resource tool partial +Avo resource tool partial ## Partial context diff --git a/docs/3.0/resources.md b/docs/3.0/resources.md index 0906992b..6189f1e9 100644 --- a/docs/3.0/resources.md +++ b/docs/3.0/resources.md @@ -209,7 +209,7 @@ class Avo::Resources::User < Avo::BaseResource end ``` -![](/assets/img/resources/model-resource-mapping-1.jpg) + So when you click on the Users sidebar menu item, you get to the `Index` page where all the users will be displayed. The information displayed will be the gravatar image, the first and the last name. @@ -265,7 +265,7 @@ class Avo::Resources::Team < Avo::BaseResource end ``` -![](/assets/img/resources/model-resource-mapping-2.jpg) + But now, if we visit the `Users` page, we will see the fields for the `TeamUser` resource instead of `User` resource, and that's because Avo fetches the resources in an alphabetical order, and `TeamUser` resource is before `User` resource. That's definitely not what we want. The same might happen if you reference the `User` in other associations throughout your resource files. @@ -413,13 +413,14 @@ class Avo::Resources::Comment < Avo::BaseResource ActionView::Base.full_sanitizer.sanitize(record.body).truncate 30 } end +``` ::: :::option `self.description` You might want to display information about the current resource to your users. Then, using the `description` class attribute, you can add some text to the `Index`, `Show`, `Edit`, and `New` views. -Avo message +Avo message There are two ways of setting the description. The quick way as a `string` and the more customizable way as a `block`. @@ -479,7 +480,7 @@ We know, the array notation looks weird, but it works. On , the most common view type is `:table`, but you might have some data that you want to display in a `:grid` or `:map`. You can change that by setting `default_view_type` to `:grid` and by adding the `grid` block. -Avo grid view +Avo grid view ```ruby{2} class Avo::Resources::Post < Avo::BaseResource @@ -566,7 +567,7 @@ Avo.configure do |config| end ``` -Buttons on footer +Buttons on footer ::: @@ -605,7 +606,7 @@ class Avo::Resources::Comment < Avo::BaseResource end ``` -Hide the record selector. +Hide the record selector. ::: :::option `self.link_to_child_resource` @@ -643,7 +644,7 @@ class Avo::Resources::Course < Avo::BaseResource end ``` -Avo filters +Avo filters ::: :::option `self.components` @@ -742,7 +743,7 @@ class Avo::Resources::User < Avo::BaseResource end ``` -![Alt text](/assets/img/cards_on_resource.png) +Alt text :::option `self.pagination` This feature is designed for managing pagination. For example on large tables of data sometimes count is inefficient and unnecessary. @@ -793,7 +794,7 @@ self.pagination = -> do end ``` -![Default pagination](/assets/img/resources/pagination/default.png) +Default pagination

#### Countless @@ -806,7 +807,7 @@ self.pagination = -> do end ``` -![Countless pagination](/assets/img/resources/pagination/countless.png) +Countless pagination

#### Countless and "pageless" @@ -818,7 +819,7 @@ self.pagination = -> do } end ``` -![Countless pagination size empty](/assets/img/resources/pagination/countless_empty_size.png) +Countless pagination size empty ::: :::option `cache_hash` diff --git a/docs/3.0/scopes.md b/docs/3.0/scopes.md index ec7a7871..f113331a 100644 --- a/docs/3.0/scopes.md +++ b/docs/3.0/scopes.md @@ -4,7 +4,7 @@ license: advanced # Scopes -![](/assets/img/scopes.png) + :::warning This section is a work in progress. diff --git a/docs/3.0/search.md b/docs/3.0/search.md index 5fa10f50..bf7fbd58 100644 --- a/docs/3.0/search.md +++ b/docs/3.0/search.md @@ -68,7 +68,7 @@ Avo.configure do |config| By default, the search results will be displayed as text. By default search title will be the [resource title](./resources.html#self_title). -Blank search +Blank search You may configure that to be something more complex using the `card -> title` option. That will display it as the title of the search result. @@ -85,12 +85,12 @@ class Avo::Resources::Post < Avo::BaseResource end ``` -Search label +Search label ::: :::option `description` - + You might want to show more than just the title in the search result. Avo provides the `card -> description` option to add some more information. @@ -108,12 +108,12 @@ class Avo::Resources::Post < Avo::BaseResource end ``` -Search description +Search description ::: :::option `image_url` - + You may improve the results listing by adding an image to each search result. You do that by using the `card -> image_url` attribute that is an url to a image. @@ -134,7 +134,7 @@ end :::option `image_format` - + The image you add to a search result can have a different format based on what you set on the `card -> image_format` attribute. You may choose between three options: `:square`, `:rounded` or `:circle`. @@ -154,13 +154,13 @@ class Avo::Resources::Post < Avo::BaseResource end ``` -Search avatar +Search avatar :::option `help` You may improve the results listing header by adding a piece of text highlighting the fields you are looking for or any other instruction for the user. You do that by using the `help` attribute. This attribute takes a string and appends it to the title of the resource. -Search Header Help +Search Header Help ```ruby{4} class Avo::Resources::Post < Avo::BaseResource @@ -209,17 +209,17 @@ end When a resource has the `search` attribute with a valid configuration, a new search input will be displayed on the `Index` view. -![](/assets/img/search/resource_search.jpg) + ## Global search - + Avo also has a global search feature. It will search through all the resources that have the `search` attribute with a valid configuration. You open the global search input by clicking the trigger on the navbar or by using the CMD + K keyboard shortcut (Ctrl + K on Windows). -Global search trigger +Global search trigger ### Hide the global search diff --git a/docs/3.0/stimulus-integration.md b/docs/3.0/stimulus-integration.md index 1509ebe3..a6226a2d 100644 --- a/docs/3.0/stimulus-integration.md +++ b/docs/3.0/stimulus-integration.md @@ -14,13 +14,13 @@ This is not the **dependable fields** feature but a placeholder so we can observ _What we'll be able to do at the end of reading these docs_ -Debug on input stimulus method +Debug on input stimulus method :::info **Please note** that in order to have the JS code from your controllers loaded in Avo you'll need to add your asset pipeline using [these instructions](custom-asset-pipeline.html). It's really easier than it sounds. It's like you'd add a new JS file to your regular Rails app. ::: -
+
One of the most requested features is the ability to make the forms more dynamic. We want to bring the first iteration of this feature through Stimulus JS integration. This light layer will allow you to hook into the views and inject your functionality with Stimulus JS. @@ -65,14 +65,7 @@ field :has_skills, as: :tags For example for the following stimulus controllers `self.stimulus_controllers = "course-resource select-field association-fields"` Avo will generate the following markup for the `has_skills` field above on the `edit` view. ```html{4-7} -
+
``` @@ -99,12 +92,7 @@ field :has_skills, as: :tags All stimulus controllers receive the `view` attribute in the DOM. ```html{4-5} -
+
``` @@ -215,7 +203,7 @@ field :has_country, as: :boolean, html: { field :country, as: :select, options: Course.countries.map { |country| [country, country] }.to_h ``` -Toggle method +Toggle method ### `resource-edit#disable` @@ -236,7 +224,7 @@ field :has_skills, as: :boolean, html: { field :country, as: :select, options: Course.countries.map { |country| [country, country] }.to_h ``` -Disable method +Disable method You may also target the `wrapper` element for that field if the target field has more than one input like the searchable polymorphic `belongs_to` field. @@ -259,7 +247,7 @@ field :country, as: :select, options: Course.countries.map { |country| [country, For debugging purposes only, the `resource_edit` Stimulus JS controller provides the `debugOnInput` method that outputs the event and value for an action to the console. Use this just to make sure you targeted your fields correctly. It doesn't have any real use. -Debug on input stimulus method +Debug on input stimulus method ## Custom Stimulus controllers @@ -469,7 +457,7 @@ export default class extends Controller { This is how the fields behave with this Stimulus JS controller. -Debug on input stimulus method +Debug on input stimulus method ## Use Stimulus JS in a tool diff --git a/docs/3.0/tabs.md b/docs/3.0/tabs.md index 9e28388d..83ec11fe 100644 --- a/docs/3.0/tabs.md +++ b/docs/3.0/tabs.md @@ -36,13 +36,13 @@ class Avo::Resources::User < Avo::BaseResource end ``` -Avo tabs +Avo tabs To use tabs, you need to open a `tabs` group block. Next, you add your `tab` block where you add fields and panels like you're used to on resource root. Most fields like `text`, `number`, `gravatar`, `date`, etc. need to be placed in a `panel`. However, the `has_one`, `has_many`, and `has_and_belongs_to_many` have their own panels, and they don't require a `panel` or a `tab`. The tab `name` is mandatory is what will be displayed on the tab switcher. The tab `description` is what will be displayed in the tooltip on hover. -Avo tab name and description +Avo tab name and description ## Tabs on Show view