Difference between revisions of "Imeji-gui - page-components"

From MPDLMediaWiki
Jump to navigation Jump to search
m (github link)
m
Line 21: Line 21:
* Extra Work Package - KA
* Extra Work Package - KA
** Admin Pages [[Image:Checkmark.png | 18px]]
** Admin Pages [[Image:Checkmark.png | 18px]]
* imeji - new Homepage - KA
** WordPress - Admin, Config etc.
** Theme - Design, CSS





Revision as of 13:54, 26 November 2013

Template:Imeji

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

  • Work Package - KA (1.5 man-months or 3 x 0.5 man-months)
    • 1. Welcome Page Checkmark.png
    • 2. Images Detailpage Checkmark.png
    • 3. Collection Startpage Checkmark.png
    • 4. Album Startpage Checkmark.png
    • 5. Images – Overview Checkmark.png
    • 6. Collection – Images Checkmark.png
    • 7. Album – Images Checkmark.png
    • 8. Collection Overview
    • 9. Album Overview
  • Dialogs - MS (confirmation pages / confirm boxes)
    • rebuild done Checkmark.png
  • Extra Work Package - KA
    • Admin Pages Checkmark.png
  • imeji - new Homepage - KA
    • WordPress - Admin, Config etc.
    • Theme - Design, CSS


IMPORTANT NOTICE[edit]

Modal Dialogs[edit]

  • 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[edit]

  • 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[edit]

  • 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 Checkmark.png
  • components/elements which are bugy should be marked with Red cross decline.png


GENERAL COMPONENTS[edit]

header[edit]

  • 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[edit]

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

page_footer[edit]

  • imeji status (version and build date)

confirm boxes[edit]

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

HOME / WELCOME http://demo.imeji.org/ Checkmark.png[edit]

specific content[edit]

  • 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 Checkmark.png[edit]

additional content[edit]

  • 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 Checkmark.png[edit]

additional content[edit]

  • 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)Checkmark.png[edit]

additional content[edit]

  • 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)[edit]

additional content[edit]

  • 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)[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[edit]

additional content[edit]

  • 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[edit]

additional content[edit]

  • 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 Checkmark.png[edit]

additional content[edit]

  • 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 Checkmark.png[edit]

additional content[edit]

  • 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[edit]

additional content[edit]

  • 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[edit]

additional content[edit]

  • 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[edit]

specific content[edit]

  • 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[edit]

additional content[edit]

  • 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 Checkmark.png[edit]

additional content[edit]

  • 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 Checkmark.png[edit]

additional content[edit]

  • 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[edit]

additional content[edit]

  • 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)[edit]

specific content[edit]

  • 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[edit]

specific content[edit]

  • 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[edit]

additional content[edit]

  • 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)[edit]

additional content[edit]

  • 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 Checkmark.png[edit]

specific content[edit]

  • 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) Checkmark.png[edit]

specific content[edit]

  • 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) Checkmark.png[edit]

additional content[edit]

  • 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) Checkmark.png[edit]

specific content[edit]

  • 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) Checkmark.png[edit]

additional content[edit]

  • 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.[edit]

  • First Version of one Storage Tool Checkmark.png
    • Import files to internal storage

Additional content[edit]

  • Will contain the import utilities in future

ERROR Page (404,500)[edit]

additional content[edit]

  • Contains only one single text box for user information

LOGIN Page http://demo.imeji.org/imeji/album/M1r4NtZZZq6JFMNE[edit]

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

additional content[edit]

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