User Tools
design:interface
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
design:interface [2014/01/08 10:16] emillyriverz [Counters] |
design:interface [2015/09/15 09:31] (current) Den Approved |
||
|---|---|---|---|
| Line 155: | Line 155: | ||
| {{:design:dropdownmenuandarrow.png|}} | {{:design:dropdownmenuandarrow.png|}} | ||
| - | {{:design:clickon.png|}} | + | {{:design:clickkon.png|}} |
| ==== Console counters ==== | ==== Console counters ==== | ||
| Line 168: | Line 168: | ||
| 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. | 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. | ||
| - | ==== List items ==== | + | ==== Console list items ==== |
| Console items may have lists inside, and the items of those lists may have the //new// and //seen// states: | Console items may have lists inside, and the items of those lists may have the //new// and //seen// states: | ||
| - | {{:design:notification1.png|}} | + | {{:design:notifici.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). | 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). | ||
| - | {{:design:invitation1.png|}} | + | {{:design:invitationacceptignore.png|}} |
| Line 183: | Line 183: | ||
| {{:design:feedbackmessages.png|}} | {{: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|}} | {{: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]]. | ||
design/interface.1389176202.txt.gz · Last modified: 2015/09/15 09:10 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported
