Differences

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

--- design:interface [2014/01/08 09:56]
emillyriverz [Console]
+++ design:interface [2015/09/15 09:31] (current)
Den Approved
@@ Line 147: / Line 147: @@
 All console buttons have //hover// state. All the console buttons have //clicked// state, except the buttons linked to other pages or popup windows.
-==== Dropdown menus ====
+==== Console dropdown menus ====
 Some buttons may contain dropdown menus. Dropdown menu presence may or may not be hinted with an arrow-shaped graphic. Dropdowns may be activated on //hover// and/or //click// events.
@@ Line 155: / Line 155: @@
 {{:design:dropdownmenuandarrow.png|}}
-{{:design:clickon.png|}}
+{{:design:clickkon.png|}}
-==== Counters ====
+==== Console counters ====
-{{:design:counters111.png|}}
+Console buttons may contain //counters// (Mailbox, Notifications and Invitations). Counters are displayed as highlighted indicators and numbers. They have two states, //new// (e.g., a new message, new invitation, new notification) and //seen// (seen, but not read yet).
-Also there are buttons that contain //counters// (Mailbox, Notifications and Invitations), counters usually consist of indicators highlighted with bright color, numbers and have two states: the state when it's "new" for example new message,new invitation or new notification,
+{{:design:counters111.png|}}
 {{:design:countersdark.png|}}
-and the state when it has been "seen, but not read" yet, the bright color of indicator only lasts till the first click, after the click it turns into more darker color.
 {{:design:maiboxinvitnocounter.png|}}
-If all the messages, invitations, notifications are read, the counter simply disappears.
+The //New// indicator only lasts until the first click, and then it can change to the //seen// state (I've received a new invitation but I haven't acted upon it yet). If there's no reason for the //seen// stage, counter disappears completely.
+==== Console list items ====
-===== Drop Down menu in Console =====
+Console items may have lists inside, and the items of those lists may have the //new// and //seen// states:
-The example of "new" and "seen" notifications in console:
+{{:design:notifici.png|}}
-{{:design:notification1.png|}}
+Some list items may not only contain text, but also pictures and links. In cases like the invitation list, there may also be additional buttons (like //accept// and //ignore// in this example).
-Notifications contain not only text, but also a user photo and links.
+{{:design:invitationacceptignore.png|}}
-{{:design:invitation1.png|}}
-In case it will be an invitation notification, additionally to user photos and links, buttons like //accept/ignore// on the example above can be used as well.
 ===== Feedback messages =====
 {{:design:feedbackmessages.png|}}
-Bright colored messages appear for few seconds, have an "x-close" button if user would like to proceed before the message disappears itself, usually contain error, warning or confirmation text information; each type of information has it's own color, red for errors, yellow for warnings and green for confirmations.
+Feedback messages are bright-colored messages that appear for a few seconds to give user site feedback about a just completed action.
+Feedback messages contain error, warning, or confirmation text information; each type of these has its own color. The "x" (close) button closes a feedback message instantly.
+===== Annotation message =====
 {{:design:anno_warning.png|}}
-There's also //Anno// messages, that differ from Feedback messages with not containing an "x-close" button, but having a warning icon. Anno appears usually when the user is searching for something that does not exist in the web area .
+Annotation messages are similar to feedback messages but are displayed persistently in the webpage flow. An annotation message has a warning icon and can't be closed.
+You can use an annotation message to make an important warning before some action, or to inform about the result of the action, if it deserves to stay persistenly on the page (e.g. //no results for your search//).
+===== Lists =====
+List is a table that contains various items your plugin may have. Usually lists contain thumbnail photos, links and a text, with table rows differentiated by alternating colors. You can find examples of lists in //Members//, //Photos//, and //Videos// pages.
+User list (with small avatars):
+{{:design:userlist1.png|}}
+Photo list (with mid-size picture thumbnails):
+{{:design:photolist1.1.png|}}
+Video list (with mid-size picture thumbnails and info):
+{{:design:videolist1.1.png|}}
+===== Paging =====
+{{:design:paging.png|}}
+Used for navigating and display the current location in the paged data. Previous/next icons are present if there are more than 2 pages of data.
+===== Icons =====
+When developing your plugins, you may need various icons for boxes, buttons, etc. Here's what Oxwall offers:
+Standard icon set:
+{{:design:iconset.png|}}
+Tiny icon set:
+{{:design:tinyiconset.png|}}
+Please note that every theme may have its own icons, although the sets should be identical to the ones in the [[design:psd-style-guides|Theme StyleGuide]].

Oxwall Software Documentation

User Tools

Site Tools

Differences

Page Tools