Imeji-gui - page-components

Internal Meetings Cooperation Specification Architecture Installer Ingest Functional Specification Technical Specification Metadata RDF mapping Metadata terms edit

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