Added UI for timeline creation.
This commit is contained in:
Jonathan Bernard
@ -77,22 +77,22 @@ input {
|
||||
#timeline .drop-menu .drop-menu-items .timeline-link {
|
||||
font-size: medium; }
|
||||
|
||||
#login {
|
||||
.dialog {
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: #eeeeee;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100em;
|
||||
z-index: 10; }
|
||||
#login * {
|
||||
.dialog * {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
#login div.container {
|
||||
.dialog div.container {
|
||||
background: #222222;
|
||||
border-radius: 10px;
|
||||
font-family: Cantarell;
|
||||
@ -101,26 +101,96 @@ input {
|
||||
margin-top: 4em;
|
||||
padding: 1em;
|
||||
width: 20em; }
|
||||
#login div.container h2 {
|
||||
.dialog div.container h2 {
|
||||
border-bottom: thin solid #eeeeee;
|
||||
font-family: Arvo;
|
||||
padding-bottom: 0.5em;
|
||||
margin-bottom: 0.5em; }
|
||||
#login div.container label {
|
||||
.dialog div.container label {
|
||||
display: inline-block;
|
||||
width: 6em; }
|
||||
#login div.container input {
|
||||
.dialog div.container input {
|
||||
color: #222222; }
|
||||
#login div.container #login-button {
|
||||
text-align: right;
|
||||
.dialog div.container .button-panel {
|
||||
margin-top: 0.5em;
|
||||
font-family: Arvo;
|
||||
font-size: 1.2em; }
|
||||
#login div.container #login-button .validate-tips {
|
||||
overflow: hidden; }
|
||||
.dialog div.container .button-panel .validate-tips {
|
||||
font-size: 1em; }
|
||||
#login div.container #login-button a {
|
||||
color: #eeeeee; }
|
||||
.dialog div.container .button-panel .dialog-button {
|
||||
float: right;
|
||||
padding-left: 1em;
|
||||
font-family: Arvo;
|
||||
font-size: 1.2em; }
|
||||
.dialog div.container .button-panel .dialog-button a {
|
||||
color: #eeeeee; }
|
||||
|
||||
#login.dialog {
|
||||
background: white;
|
||||
opacity: 1; }
|
||||
|
||||
/*#login {
|
||||
|
||||
background: white;
|
||||
color: $lightTxt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
width: 100%;
|
||||
height: 100em;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.container {
|
||||
|
||||
background: $darkBg;
|
||||
border-radius: 10px;
|
||||
font-family: Cantarell;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 4em;
|
||||
padding: 1em;
|
||||
width: 20em;
|
||||
|
||||
h2 {
|
||||
border-bottom: thin solid $lightBg;
|
||||
font-family: Arvo;
|
||||
padding-bottom: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
input {
|
||||
color: $darkTxt;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
|
||||
text-align: right;
|
||||
margin-top: 0.5em;
|
||||
|
||||
font-family: Arvo;
|
||||
font-size: 1.2em;
|
||||
|
||||
.validate-tips { font-size: 1em; }
|
||||
|
||||
a { color: $lightBg; }
|
||||
}
|
||||
}
|
||||
}*/
|
||||
#user {
|
||||
font-family: "Josefin Sans";
|
||||
margin-top: -0.3em;
|
||||
@ -140,14 +210,20 @@ input {
|
||||
display: inline-block; }
|
||||
#user.edit-fullname .fullname {
|
||||
display: none; }
|
||||
#user .drop-menu {
|
||||
#user .user-menu {
|
||||
display: inline-block; }
|
||||
#user .drop-menu .drop-menu-items {
|
||||
margin-top: -0.5em;
|
||||
text-align: right;
|
||||
right: 0;
|
||||
#user .user-menu .user-menu-items {
|
||||
list-style: none;
|
||||
width: 10em; }
|
||||
display: none; }
|
||||
#user .user-menu .user-menu-items li {
|
||||
display: inline-block;
|
||||
padding-left: 0.5em; }
|
||||
#user .user-menu .user-menu-items a {
|
||||
text-decoration: none; }
|
||||
#user .user-menu .user-menu-items a:hover {
|
||||
text-decoration: underline; }
|
||||
#user .user-menu:hover .user-menu-items, #user .user-menu-items:hover {
|
||||
display: inline-block; }
|
||||
|
||||
#entry-list {
|
||||
margin: 6em 0 0 0;
|
||||
|
||||
@ -107,7 +107,81 @@ input {
|
||||
}
|
||||
}
|
||||
|
||||
#login {
|
||||
.dialog {
|
||||
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: $lightTxt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
width: 100%;
|
||||
height: 100em;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.container {
|
||||
|
||||
background: $darkBg;
|
||||
border-radius: 10px;
|
||||
font-family: Cantarell;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 4em;
|
||||
padding: 1em;
|
||||
width: 20em;
|
||||
|
||||
h2 {
|
||||
border-bottom: thin solid $lightBg;
|
||||
font-family: Arvo;
|
||||
padding-bottom: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
input {
|
||||
color: $darkTxt;
|
||||
}
|
||||
|
||||
.button-panel {
|
||||
margin-top: 0.5em;
|
||||
overflow: hidden;
|
||||
|
||||
.validate-tips { font-size: 1em; }
|
||||
|
||||
.dialog-button {
|
||||
|
||||
float: right;
|
||||
padding-left: 1em;
|
||||
|
||||
font-family: Arvo;
|
||||
font-size: 1.2em;
|
||||
|
||||
a { color: $lightBg; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#login.dialog {
|
||||
background: white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*#login {
|
||||
|
||||
background: white;
|
||||
color: $lightTxt;
|
||||
@ -169,7 +243,7 @@ input {
|
||||
a { color: $lightBg; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
#user {
|
||||
|
||||
@ -197,16 +271,22 @@ input {
|
||||
.fullname { display: none; }
|
||||
}
|
||||
|
||||
.drop-menu { display: inline-block; }
|
||||
.user-menu { display: inline-block; }
|
||||
|
||||
.drop-menu .drop-menu-items {
|
||||
margin-top: -0.5em;
|
||||
text-align: right;
|
||||
right: 0;
|
||||
.user-menu .user-menu-items {
|
||||
list-style: none;
|
||||
width: 10em;
|
||||
display: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
a { text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
}
|
||||
|
||||
.user-menu:hover .user-menu-items, .user-menu-items:hover { display: inline-block; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -61,9 +61,9 @@ out(YArg) ->
|
||||
<script type="text/html" id="userTemplate">
|
||||
<div class="fullname">{{name}}</div>
|
||||
<input class="fullname-input" type="text" value="{{name}}"/></div>
|
||||
<div class="drop-menu">
|
||||
<div class="user-menu">
|
||||
<div class="username"> - {{id}}</div>
|
||||
<ul class="drop-menu-items">
|
||||
<ul class="user-menu-items">
|
||||
<li><a href="#">logout</a></li>
|
||||
<li><a href="#">user info</a></li>
|
||||
</ul>
|
||||
@ -103,14 +103,28 @@ out(YArg) ->
|
||||
<body>
|
||||
|
||||
<!-- == LOGIN FORM == -->
|
||||
<div id="login" class="hidden">
|
||||
<div id="login" class="hidden dialog">
|
||||
<div class="container">
|
||||
<h2>Login</h2>
|
||||
<div><label>Username: </label><input type="text" id="username-input"></input></div>
|
||||
<div><label>Password: </label><input type="password" id="password-input"></input></div>
|
||||
<div id="login-button">
|
||||
<div class="button-panel">
|
||||
<span class='validate-tips'></span>
|
||||
<a href="#">login</a>
|
||||
<div id="login-button" class="dialog-button"><a href="#">login</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- == NEW TIMELINE FORM == -->
|
||||
<div id="new-timeline" class="hidden dialog">
|
||||
<div class="container">
|
||||
<h2>Create a new timeline:</h2>
|
||||
<div><label>Timeline ID: </label><input type="text" id="new-timeline-id"></input></div>
|
||||
<div><label>Description: </label><input type="text" id="new-timeline-desc"></input></div>
|
||||
<div class="button-panel">
|
||||
<span class='validate-tips'></span>
|
||||
<div id="new-timeline-create" class="dialog-button"><a href="#">create</a></div>
|
||||
<div id="new-timeline-cancel" class="dialog-button"><a href="#">cancel</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
41
www/js/ts.js
41
www/js/ts.js
@ -468,6 +468,10 @@ $(document).ready(function(){
|
||||
// create the login dialog
|
||||
this.loginDialog = new TS.LoginView
|
||||
|
||||
// create the new timeline dialog
|
||||
this.newTimelineDialog = new TS.NewTimelineView
|
||||
|
||||
// initialize data, either from boostrapped data, or via user login
|
||||
if (window.bootstrap) { this.initializeData(window.bootstrap()) }
|
||||
else {
|
||||
// this is async (waiting for user input)
|
||||
@ -596,6 +600,43 @@ $(document).ready(function(){
|
||||
}
|
||||
});
|
||||
|
||||
TS.NewTimelineView = Backbone.View.extend({
|
||||
el: $("#new-timeline"),
|
||||
|
||||
events: {
|
||||
"click #new-timeline-create a" : "createTimeline",
|
||||
"click #new-timeline-cancel a" : "hide"
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'createTimeline', 'hide', 'show');
|
||||
|
||||
if (options.timelineCollection == undefined) {
|
||||
throw "Can not create the NewTimelineView without the timeline collection."
|
||||
} else {
|
||||
this.timelineCollection = this.collection.get(
|
||||
options.timelineCollection);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
createTimeline: function() {
|
||||
var timelineId = this.$("#new-timeline-id").val();
|
||||
var timelineDesc = this.$("#new-timeline-desc").val();
|
||||
this.timelineCollection.create(
|
||||
{id: timelineId, description: timelineDesc});
|
||||
},
|
||||
|
||||
hide: function() { $(this.el).addClass('hidden'); },
|
||||
|
||||
show: function() {
|
||||
this.$("#new-timeline-id".val('');
|
||||
this.$("#new-timeline-desc".val('');
|
||||
$(this.el).removeClass('hidden');
|
||||
this.$("#new-timeline-id").focus();
|
||||
}
|
||||
});
|
||||
|
||||
TS.app = new TS.AppView;
|
||||
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user