Added UI for timeline creation.

doc/issues/desktop/0005bn2.rst

@@ -1,9 +0,0 @@
-Fix user menu UI.
-=================
-
-UI for user menu does not work.
-
-=========  ==========
-Created:   2011-05-15
-Resolved:  YYYY-MM-DD
-=========  ==========

doc/issues/desktop/0005bs2.rst

@@ -0,0 +1,14 @@
+Fix user menu UI.
+=================
+
+UI for user menu does not work.
+
+Resolution
+----------
+
+UI menu changed to be displayed to the right of the username, in the empty black space vailable.
+
+=========  ==========
+Created:   2011-05-15
+Resolved:  2011-06-01
+=========  ==========

doc/issues/desktop/0008tn2.rst

@@ -1,10 +0,0 @@
-Create and implement UI for timeline creation.
-==============================================
-
-There should be a way through the interface for a user to create a new
-timeline.
-
-=========  ==========
-Created:   2011-05-15
-Resolved:  YYYY-MM-DD
-=========  ==========

doc/issues/desktop/0008ts2.rst

@@ -0,0 +1,15 @@
+Create UI for timeline creation.
+================================
+
+There should be a way through the interface for a user to create a new
+timeline.
+
+Resolution
+----------
+
+Abstracted the login dialog CSS to support other dialogs of the same look and feel. Used this to create a dialog for creating new timelines. 
+
+=========  ==========
+Created:   2011-05-15
+Resolved:  2011-06-01
+=========  ==========

doc/issues/desktop/0015tn2.rst

@@ -0,0 +1,9 @@
+Create new timeline button in timeline menu.
+============================================
+
+Need a button to trigger the new timeline dialog.
+
+=========  ==========
+Created:   2011-06-01
+Resolved:  YYYY-MM-DD
+=========  ==========

doc/issues/desktop/0016bn5.rst

@@ -0,0 +1,7 @@
+Duration of next previous entries are not updated when a timestamp is updated.
+==============================================================================
+
+=========  ==========
+Created:   2011-06-01
+Resolved:  YYYY-MM-DD
+=========  ==========

www/css/ts-screen.css

@@ -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 {
+    .dialog div.container .button-panel {
-      text-align: right;
       margin-top: 0.5em;
-      font-family: Arvo;
+      overflow: hidden; }
-      font-size: 1.2em; }
+      .dialog div.container .button-panel .validate-tips {
-      #login div.container #login-button .validate-tips {
         font-size: 1em; }
-      #login div.container #login-button a {
+      .dialog div.container .button-panel .dialog-button {
-        color: #eeeeee; }
+        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 {
+  #user .user-menu .user-menu-items {
-    margin-top: -0.5em;
-    text-align: right;
-    right: 0;
     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;

www/css/ts-screen.scss

@@ -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 {
+    .user-menu .user-menu-items {
-        margin-top: -0.5em;
-        text-align: right;
-        right: 0;
         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; }
 
 }
 

www/index.yaws

@@ -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>

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;
 
 })