Imeji-gui - page-components

This page explains the template structure of the imeji gui and describes the working draft for the gui-restructure branch.


 * https://github.com/imeji-community/imeji/tree/gui-restructure


 * Work Package - KA (1.5 man-months or 3 x 0.5 man-months)
 * 1. Welcome Page [[Image:Checkmark.png | 18px]]
 * 2. Images Detailpage [[Image:Checkmark.png | 18px]]
 * 3. Collection Startpage [[Image:Checkmark.png | 18px]]
 * 4. Album Startpage [[Image:Checkmark.png | 18px]]
 * 5. Images – Overview [[Image:Checkmark.png | 18px]]
 * 6. Collection – Images [[Image:Checkmark.png | 18px]]
 * 7. Album – Images [[Image:Checkmark.png | 18px]]
 * 8. Collection Overview
 * 9. Album Overview


 * Dialogs - MS (confirmation pages / confirm boxes)
 * rebuild done [[Image:Checkmark.png | 18px]]


 * Extra Work Package - KA
 * Admin Pages [[Image:Checkmark.png | 18px]]


 * imeji - new Homepage - KA
 * WordPress - Admin, Config etc. [[Image:Checkmark.png | 18px]]
 * Theme - Design, CSS [[Image:Checkmark.png | 18px]]

Modal Dialogs

 * were include at the end of site, before end tag of body -- see template_site.xhtml
 * includes modalDialogs_from_template (e.g. in template/sub_template/template_image_tiledlist.xhtml)
 * global modal dialogs for these template
 * includes modalDialogs_from_site (e.g. in CollectionBrowse.xhtml)
 * site specific modal dialogs

currentMainMenu

 * for highlight the current main menu item see the styleClass conditions in templates/component/menu/mainmenu_default.xhtml for the specific variable values
 * ui:param currentMainMenu must be defined in every &lt;site&gt;.xhtml (e.g. collection, album, mediaEntry, welcome, admin, ...)

= PAGES =
 * all pages contain navigation structures and components (which can include navigations points)
 * the general used components are summarized in a "general section" for a better overview
 * if a page has a different header or footer section, put the header/footer section to the page and describe it there
 * if a content section differs from the general content section, name it "specific content", otherwise choose "addtional content" to describe which components are also included in the content section
 * differences between "area" and "panel"
 * area describes content with multi line (e.g. like textarea)
 * panel describes a single line content (e.g. like a input)
 * components/elements which are fixed should be marked with [[Image:Checkmark.png | 18px]]
 * components/elements which are bugy should be marked with [[Image:Red_cross_decline.png | 18px]]

header

 * white label instance logo - as shortcut for the home page
 * meta menu with login/logout, link to help page, language selector
 * simple search menu
 * link to advanced search

page_content

 * main menu navigation
 * status message area (e.g. after login)
 * page title (e.g. collection / album title)
 * history / breadcrump navigation

page_footer

 * imeji status (version and build date)

confirm boxes

 * headline
 * text (optional: inputbox e.g. for discard message)
 * cancel/submit buttons

specific content

 * main menu
 * status message area (e.g. confirmation message after login)
 * carousel with thumbnails of media elements (from public collections)
 * information block as tab block (about, news (rss/twitter), how to)
 * supporter area (imeji community logo and escidoc logo)

additional content

 * sub menu
 * action menu - sort by ... asc/desc, show as rdf - (menuLevel2)
 * separate message area (searchQueryMessageArea) for:
 * Ajax search query display (when coming from search)
 * Search 'revise' button (when coming from search)
 * paginator - top / bottom - (paginator):
 * range selector for number of results on one page (paginatorRangeSelector)
 * page paginator with single page selection - up to seven pages - (paginatorSinglePages)
 * jump-to-page box (paginatorJumpBox)
 * facets-filter selection (selectionInfoPanel)
 * number of results
 * number of selected images
 * tiled media list
 * list header
 * option box for selection (selectionBoxLayer)
 * list body
 * item (image) entries with thumbnail, checkbox and title
 * item (image) information layer - on mouse over - (informationLayer)
 * facets box (facetsArea)

additional content

 * paginator without single page selection - top (paginator)
 * page paginator (paginatorItem)
 * facets-filter selection (selectionInfoPanel)
 * number of selected images
 * view container for the media element - e.g. image - (mediaDisplayContainer)
 * edit panel for select media item and/or delete item from collection
 * meta data description box (metadataListing)
 * list header (listHeader)
 * custom metadata (headerEntry)
 * technical metadata (headerEntry)
 * list body (listBody)
 * sidebar
 * title - e.g. "Metadata" (contentTitle)
 * link to edit custom metadata
 * content

additional content

 * paginator without single page selection - top (paginator)
 * page paginator (paginatorItem)
 * facets-filter selection (selectionInfoPanel)
 * number of selected images
 * view container for the media element - e.g. image - (mediaDisplayContainer)
 * edit panel for select media item and/or delete item from collection
 * meta data description box (metadataListing)
 * list header (listHeader)
 * custom metadata (headerEntry)
 * technical metadata (headerEntry)
 * list body (listBody)
 * sidebar
 * title - e.g. "Metadata" (contentTitle)
 * content
 * custom metadata edit:
 * metadata label
 * edit area
 * input, select fields
 * list footer (listFooter)
 * submit panel for cancel + save button

additional content

 * metadata edit list (metadataEditListing)
 * list body (listBody)
 * global edit
 * drop down box for metadata element - (elementSelector)
 * editArea, editLabel / editPanels, drop down box for predefined values
 * radio buttons for write options (writeOptionRadio) - change with submitPanel
 * submit panel to save changes for all items (submitPanel)
 * select metadata element to edit (editEntry)
 * thumbnail
 * label
 * editArea
 * submit panel for clear all, reset changes, cancel, submit - top / bottom - (submitPanel)

IMAGE Edit Metadata (Batch Edit)

 * metadata edit list (metadataBatchEditListing)
 * list body (listBody)
 * drop down box for metadata element - (elementSelector)
 * editArea
 * editLabel / editPanels
 * drop down box for predefined values
 * radio buttons for write options (writeOptionRadio)
 * list footer (listFooter)
 * submit panel for cancel, submit - bottom - (submitPanel)

additional content

 * upload area to drag and drop files
 * upload buttons
 * "add images" (link) to open client file explorer
 * "start uplaod" (link) to start the file upload process
 * input for file uplaod via link - image url
 * "start upload" (link)

additional content

 * sub menus
 * menu 1
 * option menu for sort, filter, create collection - (menuLevel2)
 * menu 2
 * action menu for order by, ... asc / desc - (menuLevel3)
 * paginator - top / bottom - (paginator):
 * range selector for number of results on one page (paginatorRangeSelector)
 * page paginator with single page selection - up to seven pages - (paginatorSinglePages)
 * jump-to-page box (paginatorJumpBox)
 * facets-filter selection (selectionInfoPanel)
 * number of all collections
 * delete box for selected collections
 * bibliographic list
 * list header (listHeader)
 * selection menu (selectionBoxLayer)
 * must be modify for - select all my collection, title: choose collections, ...
 * status (when logged in)
 * display options
 * list body (listBody)
 * collection entries (logged in)
 * checkbox, status, buttons for more/less display, metadata, navigation points and actions
 * collection entries (not logged in)
 * media item pile (check dev server), buttons for more/less display, metadata, navigation points and actions

additional content

 * sub menus
 * sub menu 1 (menuLevel2)
 * option menu (startpage, view images, collection metadata, upload images)
 * sub menu 2 (menuLevel3)
 * action menu (share collection, publish collection, delete)
 * tiled list for thumbnails - up to 5 -
 * navigation point to collection image list view
 * metadata box for collection description

additional content

 * sub menus
 * sub menu 1 (menuLevel2)
 * option menu (startpage, show images, collection metadata, upload images)
 * sub menu 2 (menuLevel3)
 * action menu (order by ... asc/desc, show as rdf, publish, delete, export)
 * paginator - top / bottom - (paginator):
 * range selector for number of results on one page (paginatorRangeSelector)
 * page paginator with single page selection - up to seven pages - (paginatorSinglePages)
 * jump-to-page box (paginatorJumpBox)
 * facets-filter selection (selectionInfoPanel)
 * number of results
 * option box for all media items (selectionBoxLayer)
 * number of selected images
 * option box for selected media items (selectionBoxLayer)


 * tiled media list
 * list header
 * option box for selection (selectionBoxLayer)
 * list body
 * item (image) entries with thumbnail, checkbox and title
 * item (image) information layer - on mouse over - (informationLayer)
 * facets box (facetsArea)

+ NOTICE for further development: COMBINE selectionBoxLayer from listHeader and selectionBoxLayer for all media items from selectionPanel

additional content

 * sub menu for collection (menuLevel2)
 * meta data description box (metadataListing)
 * list body (listBody)
 * collectionInformation
 * sidebar
 * title - (contentTitle)
 * link to edit
 * content
 * collection information via label and value
 * collection metadata profile
 * sidebar
 * title - (contentTitle)
 * link for show in xml
 * link for edit
 * content
 * metadata information via label and value

additional content

 * collection profile editor (collectionProfileEditor)
 * list header (listHeader)
 * title lable and input field
 * list body (listBody)
 * list entries (metadataEntry)
 * title
 * button to remove metadata
 * radio button for image caption
 * checkbox for metadata duplication "multiple"
 * checkbox for "preview"
 * metadata type
 * metadata display label "label"
 * metadata language selector
 * button for:
 * add label
 * add vocabulary
 * add predefined values
 * add child
 * submitPanel
 * buttons for:
 * add metadata
 * list footer (listFooter)
 * submit panel for cancel, submit (submitPanel)

specific content

 * main menu navigation
 * status message area (e.g. after login)
 * page title (e.g. collection / album title)
 * meta data description box (metadataListing)
 * list body (listBody)
 * collectionInformation
 * sidebar
 * title - (contentTitle)
 * area to edit collection information via label, value and more/less buttons
 * list footer (listFooter)
 * panel for cancel, submit (submitPanel)

additional content

 * sub menus
 * menu 1 (menuLevel2)
 * option menu for sort, filter, create album
 * menu 2 (menuLevel3)
 * action menu for order by, ... asc / desc
 * paginator - top / bottom - (paginator):
 * range selector for number of results on one page (paginatorRangeSelector)
 * page paginator with single page selection - up to seven pages - (paginatorSinglePages)
 * jump-to-page box (paginatorJumpBox)
 * facets-filter selection (selectionInfoPanel)
 * number of all albums
 * delete box for selected album
 * list for album overview (albumList)
 * list header (listHeader)
 * selection menu (selectionBoxLayer)
 * order option: status
 * order option: label
 * author
 * images
 * description
 * order option: last modification date
 * de-/activate option
 * list body
 * album entries with checkbox and column values and link to album

additional content

 * sub menus
 * sub menu 1 (menuLevel2)
 * option menu startpage, album metadata
 * sub menu 2 (menuLevel3)
 * action menu for share album, release, delete
 * tiled list for thumbnails - up to 5 -
 * navigation point to collection image list view
 * metadata box for collection description

additional content

 * sub menus
 * sub menu 1 (menuLevel2)
 * option menu for startpage, show images, album metadata
 * sub menu 2 (menuLevel3)
 * action menu for order by ... asc/desc, view as rdf, publish, delete
 * paginator - top / bottom - (paginator):
 * range selector for number of results on one page (paginatorRangeSelector)
 * page paginator with single page selection - up to seven pages - (paginatorSinglePages)
 * jump-to-page box (paginatorJumpBox)
 * facets-filter selection (selectionInfoPanel)
 * number of results
 * option box for all media items (selectionBoxLayer)
 * number of selected images
 * option box for selected media items (selectionBoxLayer)
 * tiled media list
 * list header
 * option box for selection (selectionBoxLayer)
 * list body
 * item (image) entries with thumbnail, checkbox and title
 * item (image) information layer - on mouse over - (informationLayer)

+ NOTICE for further development: COMBINE selectionBoxLayer from listHeader and selectionBoxLayer for all media items from selectionPanel

additional content

 * sub menu for album (menuLevel2)
 * meta data description box (metadataListing)
 * list body (listBody)
 * albumInformation
 * sidebar
 * title - (contentTitle)
 * link to edit
 * content
 * album information via label and value

specific content

 * main menu navigation
 * status message area (e.g. active album)
 * page title (e.g. collection / album title)
 * metadata description box (metadataListing)
 * list body (listBody)
 * albumInformation
 * sidebar
 * title - (contentTitle)
 * area to edit album information via label, value and more/less buttons
 * list footer (listFooter)
 * panel for cancel, submit (submitPanel)

specific content

 * main menu navigation
 * status message area (e.g. active album)
 * page title (e.g. collection / album title)
 * share component (shareComponent)
 * email input
 * role selection
 * submit panel for cancel, submit (submitPanel)
 * confirm dialog for sharing

additional content

 * collection seletor for search query (detailSearch)
 * list body (listBody)
 * searchListEntry
 * collection selector (collectionSelector)
 * collection filter entries
 * connector (NOT, ...)
 * metadata type
 * compare selector ( --, exactly )
 * input field for search value
 * more/less buttons for collection filter entries
 * submit panel for more/less buttons for searchListEntries
 * submit panel for clear values, search (submitPanel)

additional content

 * sub menu
 * action menu - sort by ... asc/desc, show as rdf - (menuLevel2)
 * separate message area (searchQueryMessageArea) for:
 * Ajax search query display
 * Search 'revise' button
 * paginator - top / bottom - (paginator):
 * range selector for number of results on one page (paginatorRangeSelector)
 * page paginator with single page selection - up to seven pages - (paginatorSinglePages)
 * jump-to-page box (paginatorJumpBox)
 * facets-filter selection (selectionInfoPanel)
 * number of results
 * number of selected images
 * tiled media list
 * list header
 * option box for selection (selectionBoxLayer)
 * list body
 * item (image) entries with thumbnail, checkbox and title
 * item (image) information layer - on mouse over - (informationLayer)
 * facets box (facetsArea)

specific content

 * main menu
 * message area (e.g. for login message)
 * page title
 * section list user
 * section list configuration
 * section list storage
 * section list advanced settings

+ NOTICE: every section list contains of: entry with label and description - e.g. Reindex: 

specific content

 * main menu
 * message area (e.g. for login message)
 * page title
 * user list (userListCreate)
 * list body (listBody)
 * sidebar
 * title (contentTitle)
 * content
 * edit user profile with label and values
 * checkbox for 'send email'
 * list footer (listFooter)
 * cancel/submit buttons

additional content

 * List of all user accounts, each user has info (listAllUser):
 * list body (listBody)
 * username
 * email
 * userright information - list of related collections and albums
 * Role for collection/album
 * Link to collection/album
 * actions for edit user, send new password, delete user &rArr; should be reduce to an selectionBoxLayer by hover username
 * name and email of user

+ NOTICE for further development: add area for display user online status ++ function to send one email to all user, e.g. for next imeji update, etc.

specific content

 * main menu
 * message area (e.g. for login message)
 * page title
 * user list (userListEdit)
 * list body (listBody)
 * userinfos via label and input value, change password with submit button to change password (userInfoEntry)
 * Possibility to edit data (textoutputfield changes to textinputfield)
 * user rights entry with label for collection/album/metadata-profile and the revoke action (userRightsEntry)
 * role for collection/album
 * id of collection/album
 * button 'revoke'

additional content

 * section list storage
 * list header (listHeader)
 * title - database information
 * title - storage information
 * list body (listBody)
 * data information about images, users, collections, albums
 * number of files, size of files, free space

ADMIN (Storage Tools) - not available a.t.m.

 * First Version of one Storage Tool [[Image:Checkmark.png | 18px]]
 * Import files to internal storage

Additional content

 * Will contain the import utilities in future

additional content

 * Contains only one single text box for user information

LOGIN Page http://demo.imeji.org/imeji/album/M1r4NtZZZq6JFMNE
e.g. when you view an private album and you are not logged in (http://demo.imeji.org/imeji/album/M1r4NtZZZq6JFMNE)

additional content

 * login form
 * Text input fields for login data (email, pwd)
 * submit panel for cancel/submit (submitPanel)