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
  • 2. Images Detailpage
  • 3. Collection Startpage
  • 4. Album Startpage
  • 5. Images – Overview
  • 6. Collection – Images
  • 7. Album – Images
  • 8. Collection Overview
  • 9. Album Overview

• Dialogs - MS (confirmation pages / confirm boxes)
  • rebuild done

• Extra Work Package - KA
  • Admin Pages

• imeji - new Homepage - KA
  • WordPress - Admin, Config etc.
  • Theme - Design, CSS

IMPORTANT NOTICE

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 <site>.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
• components/elements which are bugy should be marked with

GENERAL COMPONENTS

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

HOME / WELCOME http://demo.imeji.org/

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)

IMAGES http://demo.imeji.org/imeji/browse?page=1

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)

IMAGES ⇒ Detailpage http://demo.imeji.org/imeji/item/7L1Y1zUukNWTZPlR

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

IMAGE Edit Metadata (Single item)

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

IMAGE Edit Metadata (Selected items)

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)

IMAGE Upload

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)

COLLECTIONS http://demo.imeji.org/imeji/collections?page=1

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

COLLECTION ⇒ Startpage http://demo.imeji.org/imeji/collection/WzHMBMua7PCdaxB

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

COLLECTION ⇒ Images http://demo.imeji.org/imeji/collection/WzHMBMua7PCdaxB/browse

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

COLLECTION ⇒ SHOW METADATA http://demo.imeji.org/imeji/collection/WzHMBMua7PCdaxB/infos?init=1

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

COLLECTION Profile Editor

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)

COLLECTIONS Create/Edit Collection http://demo.imeji.org/imeji/createcollection

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)

ALBUMS http://demo.imeji.org/imeji/albums?page=1

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

ALBUM ⇒ Startpage http://demo.imeji.org/imeji/album/D7Y_q0FuwxcyN6Hd

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

ALBUM ⇒ Images http://demo.imeji.org/imeji/album/D7Y_q0FuwxcyN6Hd/browse

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

ALBUM ⇒ SHOW METADATA http://demo.imeji.org/imeji/album/D7Y_q0FuwxcyN6Hd/infos?init=1

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

ALBUM EDIT METADATA (like Collection Metadata)

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)

SHARE Page

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

ADAVANCED SEARCH http://demo.imeji.org/imeji/search

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)

SIMPLE / ADAVANCED SEARCH ⇒ Resultpage (like Images)

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)

ADMIN (Overview Page) http://demo.imeji.org/imeji/admin

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: <descriptionForReindex>

ADMIN (Create User)

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

ADMIN (View Users)

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 ⇒ 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.

ADMIN (Edit User)

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'

ADMIN (Storage Information)

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
  • Import files to internal storage

Additional content

• Will contain the import utilities in future

ERROR Page (404,500)

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)

Cascading Style Sheets