Differences

This shows you the differences between two versions of the page.

--- interface:start [2021/12/07 18:09] – eli
+++ interface:frontend_development [2021/12/09 01:19] (current) – we will log interface iteractions in the wiki diogo
@@ Line 1: / Line 1: @@
-======= Interface =======
+======= November Iteration =======
 GNU social v3's backend and frontend development is currently taking place. The default interface serves as the groundwork for future user experience endeavors but also, to develop all the necessary tools needed to make plugin development possible in a timely manner.
 ===== Twig templates =====
 The Twig template engine is used, making it possible to create reusable interface components. In general, templates take the shape of either whole pages, or small widgets. The latter being used extensively on the former.
@@ Line 13: / Line 15: @@
 <code>/templates/cards/</code>
-User system theme is followed by default, however the user can customise the colours it desires.
+User system theme is followed by default, however there are plugins available to change the theme colours as desired, see [[frontend_development#oomox|this section]] for more information.
 ----
-====== Feeds ======
-Feed navigation is done through the left panel, the current feed is presented on center and posting is possible on the right panel. Additional navigational links can be added as the user desires.
-Bear in mind that in the following images, the user profile section colours are user defined through the ProfileColour plugin.
+====== Page structure ======
+The page is formed by three regions, each one containing their own components/widgets. Plugins may be added through events in a myriad of specific locales within these regions. If the plugin requires it's own widget to be presented, the context and importance need to be considered when choosing the desired locale.
+The standard page grid regions are:
+  * left panel
+  * active page
+  * right panel
+Assuming a LTR layout, the left panel is the first area our eyes are drawn upon, and therefore it provides profile information and the main navigation tab. Placement within this region should only be considered if the context allows and/or is of high importance within the given page.
+The active page region, as the name implies, is used by the current route page template. Nonetheless, it is here that most context specific placement opportunities will take place. If a feed is currently active, the respective Note widgets are placed, which provide various ways to append plugin widgets, for example.
+Finally, the right panel serves as an area for any plugin that isn't highly specific on context/use or that isn't primordial to the user experience basic functionality.
+//Bear in mind that in the following images, the user profile section colours are user defined through the **ProfileColour** plugin.//
 ===== Dark default theme =====
-{{interface:feed_dark_theme.png?direct&400|}}
+{{interface:feed_dark_theme.png|}}
 ===== Light default theme =====
-{{interface:feed_light_theme.png?direct&400|}}
+{{interface:feed_light_theme.png|}}
 ----
 ====== User panel ======
-Various user panel organisational improvements were done, more specific categorisation being a big part of it.
+Various user panel organisational improvements were done, more specific categorisation being a big part of it. Additionally, plugins can be placed within each category if it desires.
+An example of the three-like hierarchy possible:
   * Profile
@@ Line 49: / Line 73: @@
     * Xmpp
     * ...
 ===== Dark default theme =====
-{{interface:dark_theme_settings.png?direct&400|}}
-==== Oomox plugin ====
+{{ interface:dark_theme_settings.png | Dark default theme }}
-Theme colour customisation is made possible through the Oomox plugin, the corresponding user panel profile settings section is added through a //PopulateProfileSettingsTabs// event.
-=== Defining theme colours ===
+----
-{{interface:settings_change_theme_colours.png?direct&200|}}
-{{interface:settings_change_theme_colours2.png?direct&200|}}
-=== Resulting theme example ===
-{{interface:settings_change_theme_colours_design_is_passion.png?direct&400|}}
 ====== Language ======
-User is able to defined preferred languages, by default the highest priority language set will be used as a [[https://www.w3.org/International/questions/qa-html-language-declarations#attributes|lang]] HTML attribute when posting a new note. As implied, the user is able to order languages preferred.
-When posting a note, the language option will be available under the "Additional options" details element.
+The user is able to define preferred languages, by default the highest priority language set will be used as a [[https://www.w3.org/International/questions/qa-html-language-declarations#attributes|lang]] HTML attribute when posting a new note. As implied, the user is able to order languages preferred.
+When posting a note, the language option will be available under the **Additional options** details element.
+By providing this information, within the HTML markup itself, screen readers performance should improve.
 ===== Language settings page =====
 The user panel section provides a multiple select box, after the language preference selection the user is redirected to order them.
-{{interface:settings_language.png?direct&400 | Language user panel settings section }}
+{{interface:settings_language.png | User panel language section }}
+{{ interface:settings_language_order.png| The page the user is redirected to upon sending the previous form }}
+----
-{{ interface:settings_language_order.png?direct&400| The page the user is redirected to upon sending the previous form }}
-===== Posting component template language selection =====
+====== Plugins ======
-{{interface:posting_language_options.png?direct&200|}}
+----
+===== Oomox =====
+Theme colour customisation is made possible through the Oomox plugin, the corresponding user panel profile settings section is added with the help of a **//PopulateProfileSettingsTabs//** event.
+----
+==== Defining theme colours ====
+{{interface:settings_change_theme_colours.png?320 | The Oomox user panel section}}
+{{ interface:settings_change_theme_colours2.png?320| Settings available }}
+----
+==== User custom theme example ====
+{{interface:settings_change_theme_colours_design_is_passion.png| User custom theme example}}
+----