Skip to content
This repository has been archived by the owner on Oct 24, 2022. It is now read-only.

Commit

Permalink
Improves Aesthetics and Usefulness of most forms
Browse files Browse the repository at this point in the history 
This attempts to present a cleaner UI by both using bootstrap form styles and moving
as much help as possible inline to the appropriate element.

closes #23
  • Loading branch information
@JPrevost
JPrevost committed Jun 30, 2015
1 parent 6717b99 commit b74ce74
Show file tree
Hide file tree
Showing 21 changed files with 607 additions and 242 deletions.
78 changes: 49 additions & 29 deletions app/views/channel/create.scala.html
View file
Expand Up @@ -2,32 +2,52 @@
* Page with form to create new Channel *
* Copyright (c) 2015 MIT Libraries *
*****************************************************************************@
@(subscriber_id: Int, chanForm: Form[Channel])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@layout.main("New Destination - TopicHub") {
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
@form(routes.Application.createChannel(subscriber_id)) {
@select(chanForm("protocol"), options(Map("sword" -> "SWORD", "email" -> "email")))
@select(chanForm("mode"), options(Map("package" -> "package", "alert" -> "alert")))
@inputText(chanForm("description"))
@inputText(chanForm("userId"))
@inputText(chanForm("password"))
@inputText(chanForm("channelUrl"))
<input id="submit" type="submit" value="Create">
}
</div>
<div class="col-md-8">
<div class="jumbotron">
<h2>Define a content destination</h2>
<p>Each destination represents an 'address' where content packages or notifications can be sent.</p>
<p>The first two selections specify how content will be delivered - only choose them if you can support the protocol: unless you run a
repository, you are unlikely to have support for SWORD, but you almost certainly have an email client.</p>
<p>Choose a description that distinguishes one destination from another. The 'channelUrl' is an address: use an HTTP URL
for SWORD, or a 'mailto:' URL for email. If authenticaton is required, enter the credentials also.</p>
</div>
</div>
</div>
</div>
}
@(subscriber_id: Int, chanForm: Form[Channel])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@implicitField = @{ helper.FieldConstructor(bootstrapHorizontal.f) }
@layout.main("New Destination - TopicHub") {
<h2>Define a content destination</h2>
<p>Each destination represents an 'address' where content packages or notifications can be sent.</p>

@form(routes.Application.createChannel(subscriber_id), 'class -> "form-horizontal") {
<span id="helpBlock" class="help-block">* Denotes Required Element</span>

@select(chanForm("protocol"),
options(Map("sword" -> "SWORD", "email" -> "email")),
'class -> "form-control",
'_label -> "* Protocol",
'_help -> "Unless you run a repository, you are unlikely to have support for SWORD, but you almost certainly have an email client.")

@select(chanForm("mode"),
options(Map("package" -> "package", "alert" -> "alert")),
'class -> "form-control",
'_label -> "* Mode",
'_help -> "")

@inputText(chanForm("description"),
'class -> "form-control",
'_label -> "* Description",
'_help -> "")

@inputText(chanForm("userId"),
'class -> "form-control",
'_label -> "* UserID for Sword Endpoint",
'_help -> "")

@inputText(chanForm("password"),
'class -> "form-control",
'_label -> "* Password for Sword Endpoint",
'_help -> "")

@inputText(chanForm("channelUrl"),
'class -> "form-control",
'_label -> "* URL for Sword Endpoint",
'_help -> "Use an HTTP URL for SWORD, or a 'mailto:' URL for email.")

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="submit" type="submit" class="btn btn-primary">Create Channel</button>
</div>
</div>
}
}
78 changes: 50 additions & 28 deletions app/views/collection/create.scala.html
View file
Expand Up @@ -4,35 +4,57 @@
*****************************************************************************@
@(pub: Publisher, collForm: Form[Collection])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@implicitField = @{ helper.FieldConstructor(bootstrapHorizontal.f) }
@layout.main("New Collection - TopicHub") {
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
@form(routes.Application.createCollection(pub.id)) {
@select(collForm("ctype_id"), options(ContentType.mapView))
@select(collForm("resmap_id"), options(ResourceMap.mapView))
@inputText(collForm("tag"))
@textarea(collForm("description"))
@inputText(collForm("policy"))
@select(collForm("active"), options(Map("true" -> "true", "false" -> "false")))
<input id="submit" type="submit" value="Create">
}
</div>
<div class="col-md-8">
<div class="jumbotron">
<h2>Define a content collection</h2>
<p>All the content you publish to the hub must be placed in a <em>collection</em>.
You may define as many collections as you like, but items
in a given collection must share the first two attributes on the left:
a <em>content type</em> and a <em>package format</em>. If your content cannot be described by one of these choices,
you may not deposit it to the hub. Package format names abbreviate the kinds of files in a package; so
<code>mets-nlm</code> means that in addition to an article PDF, the package has a METS file and a metadata file
conforming to the NLM-DTD schema.</p>
<p>The description field is the collection name, and the policy describes any use or other restrictions
you wish to express. This policy will appear, e.g. in the SWORD service document for the collection.</p>
<p>When you have saved the collection definition, the hub will email you precise instructions on how to make deposits to it.</p>
</div>
<h2>Define a content collection</h2>

<p>All the content you publish to the hub must be placed in a <em>collection</em>.
You may define as many collections as you like, but items
in a given collection must share a Content Type and Resource Map (package format).

@form(routes.Application.createCollection(pub.id), 'class -> "form-horizontal") {
<span id="helpBlock" class="help-block">* Denotes Required Element</span>

@select(collForm("ctype_id"),
options(ContentType.mapView),
'class -> "form-control",
'_label -> "* Content Type",
'_help -> "")

@select(collForm("resmap_id"),
options(ResourceMap.mapView),
'class -> "form-control",
'_label -> "* Resource Map",
'_help -> """Resource Map names abbreviate the kinds of files in a package;
so <code>mets-nlm</code> means that in addition to an article PDF,
the package has a METS file and a metadata file conforming to the NLM-DTD
schema.""")

@inputText(collForm("tag"),
'class -> "form-control",
'_label -> "* Tag",
'_help -> "Identifier of the Collection in the harvest feed. Ex: ACTA_PHYSICA_POLONICA")

@textarea(collForm("description"),
'class -> "form-control",
'_label -> "* Collection Name",
'_help -> "")

@inputText(collForm("policy"),
'class -> "form-control",
'_label -> "* Policy",
'_help -> "Describe any use or other restrictions you wish to express")

@select(collForm("active"),
options(Map("true" -> "true", "false" -> "false")),
'class -> "form-control",
'_label -> "* Active",
'_help -> "Leave active unless you want to ignore this collection in your data feed.")

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="submit" type="submit" class="btn btn-primary">Create Collection</button>
</div>
</div>
</div>
}
}
51 changes: 41 additions & 10 deletions app/views/content_format/create.scala.html
View file
Expand Up @@ -4,15 +4,46 @@
************************************************************************@
@(cfmtForm: Form[ContentFormat])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@implicitField = @{ helper.FieldConstructor(bootstrapHorizontal.f) }
@layout.main("New Content Format - TopicHub") {
<h2>Add a new content format</h2>
@form(routes.Application.createContentFormat) {
@inputText(cfmtForm("tag"))
@inputText(cfmtForm("label"))
@inputText(cfmtForm("description"))
@inputText(cfmtForm("url"))
@inputText(cfmtForm("mimetype"))
@inputText(cfmtForm("logo"))
<input id="submit" type="submit" value="Create">
}
<h2>Add a new Content Format</h2>
@form(routes.Application.createContentFormat, 'class -> "form-horizontal") {
<span id="helpBlock" class="help-block">* Denotes Required Element</span>

@inputText(cfmtForm("tag"),
'class -> "form-control",
'_label -> "* Tag",
'_help -> "A brief name to describe this Content Format. ex: marcxml")

@inputText(cfmtForm("label"),
'class -> "form-control",
'_label -> "* Label",
'_help -> "A potentially richer name to display. ex: NLM DTD 2.1")

@inputText(cfmtForm("description"),
'class -> "form-control",
'_label -> "* Description",
'_help -> "ex. Dublin Core Export")

@inputText(cfmtForm("url"),
'class -> "form-control",
'_label -> "* URL",
'_help -> "URL to a website with more information about this format. Ex. http://www.loc.gov/standards/marcxml/")

@inputText(cfmtForm("mimetype"),
'class -> "form-control",
'_label -> "* Mimetype",
'_help -> "ex. text/xml")

@inputText(cfmtForm("logo"),
'class -> "form-control",
'_label -> "Logo",
'_help -> "An optional link to an image that represents this format.")

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="submit" type="submit" class="btn btn-primary">Create Content Format</button>
</div>
</div>
}
}
40 changes: 32 additions & 8 deletions app/views/content_type/create.scala.html
View file
Expand Up @@ -4,13 +4,37 @@
************************************************************************@
@(ctypeForm: Form[ContentType])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@implicitField = @{ helper.FieldConstructor(bootstrapHorizontal.f) }
@layout.main("New Content Type - TopicHub") {
<h2>Add a new content type</h2>
@form(routes.Application.createContentType) {
@inputText(ctypeForm("tag"))
@inputText(ctypeForm("label"))
@inputText(ctypeForm("description"))
@inputText(ctypeForm("logo"))
<input id="submit" type="submit" value="Create">
}
<h2>Add a new Content Type</h2>
@form(routes.Application.createContentType, 'class -> "form-horizontal") {
<span id="helpBlock" class="help-block">* Denotes Required Element</span>

@inputText(ctypeForm("tag"),
'class -> "form-control",
'_label -> "* Tag",
'_help -> "A brief name to describe this Content Type. ex: article")

@inputText(ctypeForm("label"),
'class -> "form-control",
'_label -> "* Label",
'_help -> "A potentially richer name to display. ex: Article")

@inputText(ctypeForm("description"),
'class -> "form-control",
'_label -> "* Description",
'_help -> "ex. a published journal article")

@inputText(ctypeForm("logo"),
'class -> "form-control",
'_label -> "Logo",
'_help -> "An optional link to an image that represents this Content Type.")

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="submit" type="submit" class="btn btn-primary">Create Content Type</button>
</div>
</div>

}
}
60 changes: 50 additions & 10 deletions app/views/finder/create.scala.html
View file
Expand Up @@ -4,16 +4,56 @@
*****************************************************************************@
@(tag: String, finderForm: Form[Finder])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@implicitField = @{ helper.FieldConstructor(bootstrapHorizontal.f) }
@layout.main("Create Finder - TopicHub") {
<h2>Add a new finder</h2>
@form(routes.Application.createFinder(tag)) {
@select(finderForm("scheme_id"), options(Scheme.mapView))
@select(finderForm("content_format_id"), options(ContentFormat.mapView))
@textarea(finderForm("description"))
@inputText(finderForm("cardinality"))
@inputText(finderForm("idKey"))
@inputText(finderForm("idLabel"))
@inputText(finderForm("author"))
<input id="submit" type="submit" value="Create">
<h2>Add a New Finder</h2>
@form(routes.Application.createFinder(tag), 'class -> "form-horizontal") {
<span id="helpBlock" class="help-block">* Denotes Required Element</span>

@select(finderForm("scheme_id"),
options(Scheme.mapView),
'class -> "form-control",
'_label -> "* Scheme",
'_help -> "")

@select(finderForm("content_format_id"),
options(ContentFormat.mapView),
'class -> "form-control",
'_label -> "* Content Format",
'_help -> "")

@textarea(finderForm("description"),
'class -> "form-control",
'_label -> "* Description",
'_help -> "ex. Title from 245$a")

@inputText(finderForm("cardinality"),
'class -> "form-control",
'_label -> "* Cardinality",
'_help -> "Should we expect 1 or more than one. Enter '1' or 'n' to represent that.")

@inputText(finderForm("idKey"),
'class -> "form-control",
'_label -> "* Content Format",
'_help -> "ex. //datafield[@tag='245']/subfield[@code='a']")

@inputText(finderForm("idLabel"),
'class -> "form-control",
'_label -> "* Content Format",
'_help -> "ex. Title. Or you can do another xpath like: //datafield[@tag='100']/subfield[@code='j']/preceding-sibling::subfield[@code='a']")


@inputText(finderForm("author"),
'class -> "form-control",
'_label -> "* Author",
'_help -> """Who wrote this finder in case we need to make tweaks to get it
working (probably this is you)?""")

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="submit" type="submit" class="btn btn-primary">Create Finder</button>
</div>
</div>

}
}
50 changes: 41 additions & 9 deletions app/views/harvest/create.scala.html
View file
Expand Up @@ -4,14 +4,46 @@
************************************************************************@
@(pub: Publisher, harvestForm: Form[Harvest])(implicit request: play.api.mvc.RequestHeader, messages: Messages)
@import helper._
@implicitField = @{ helper.FieldConstructor(bootstrapHorizontal.f) }
@layout.main("Harvest - TopicHub") {
<h2>Define a content harvest</h2>
@form(routes.Application.createHarvest(pub.id)) {
@inputText(harvestForm("name"))
@inputText(harvestForm("protocol"), 'placeholder -> "oai-pmh is the only supported protocol at this time.")
@inputText(harvestForm("service_url"))
@inputText(harvestForm("resource_url"))
@inputDate(harvestForm("start"))
<input id="submit" type="submit" value="Create">
}
<h2>Define a content harvest</h2>
@form(routes.Application.createHarvest(pub.id), 'class -> "form-horizontal") {
<span id="helpBlock" class="help-block">* Denotes Required Element</span>

@inputText(harvestForm("name"),
'class -> "form-control",
'_label -> "* Harvest Name",
'_help -> "")


@inputText(harvestForm("protocol"),
'class -> "form-control",
'placeholder -> "oai-pmh",
'_label -> "* Protocol",
'_help -> "oai-pmh is the only supported protocol at this time.")


@inputText(harvestForm("service_url"),
'class -> "form-control",
'_label -> "* Service URL",
'_help -> "ex. http://repo.scoap3.org/oai2d")


@inputText(harvestForm("resource_url"),
'class -> "form-control",
'_label -> "* Resource URL",
'_help -> "ex. http://repo.scoap3.org/record/${recordId}/")

@inputDate(harvestForm("start"),
'class -> "form-control",
'_label -> "* Start Date",
'_help -> "ex. What date should the Harvest Start in the format 'yyyy-MM-dd'?")


<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="submit" type="submit" class="btn btn-primary">Create Harvest</button>
</div>
</div>
}
}

1 comment on commit b74ce74

@richardrodgers
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

I'll look forward to cleaner UIs throughout!

Please sign in to comment.