remove use of modal dialogs

pboard/pboard/templates/dashboard.mak

@@ -1,45 +1,64 @@
 <%inherit file="local:templates.master"/>
-<%def name="get_icon_class_from_node_type(node_type)">
 
-</%def>
 
-<%def name="node_treeview(node_list, indentation=0)">
-  % if len(node_list)>0:
-    <!--ul style="list-style:none; margin-left: ${(indentation+1)*0.5}em;"-->
-    % for node in node_list:
-      <tr title="Last updated: ${node.updated_at}">
-        <td style="padding-left: ${(indentation+1)*0.5}em;">
-          <a href="?node=${node.node_id}" title="${node.data_label}">
-            <i class='${node.getIconClass()}'></i>
-            % if len(node.data_label)<=15:
-              ${node.data_label}
-            % else:
-              ${node.data_label[0:15]}...
-            % endif
-          </a>
-        </td>
-        <td class="text-right">
-          <a href="${tg.url('/move_node_upper?node_id=%i'%(node.node_id))}" title="Move up"><i class=" icon-g-up-arrow"></i></a>
-          <a href="${tg.url('/move_node_lower?node_id=%i'%(node.node_id))}" title="Move down"><i class=" icon-g-down-arrow"></i></a>
-          <a href="" title="Edit"><i class="icon-g-edit"></i></a>
-        </td>
-      </tr>
-      ${node_treeview(node.getChildren(), indentation+1)}
-    % endfor
-    <!--/ul-->
+
+<%def name="node_treeview(node_list, indentation=-1)">
+  % if indentation==-1:
+    <tr>
+      <td style="padding-left: ${(indentation+1)*0.8}em;">
+        <a href="?node=0" title="${_('Root')}">
+          <i class='icon-g-folder-open'></i>
+          ${_('Root')}
+        </a>
+      </td>
+      <td class="text-right">
+        <div class="pod-toolbar">
+          <a href="${tg.url('/create_document?parent_id=0')}" title="${_('Add child document')}"><i class="icon-g-circle-plus"></i></a>
+        </div>
+      </td>
+    </tr>
+    ${node_treeview(node_list, 0)}
+  % else:
+    % if len(node_list)>0:
+      % for node in node_list:
+        <tr title="Last updated: ${node.updated_at}">
+          <td style="padding-left: ${(indentation+1)*0.5}em;">
+            <a href="?node=${node.node_id}" title="${node.data_label}">
+              <i class='${node.getIconClass()}'></i>
+              % if len(node.data_label)<=15:
+                ${node.data_label}
+              % else:
+                ${node.data_label[0:15]}...
+              % endif
+            </a>
+          </td>
+          <td class="text-right">
+            <div class="pod-toolbar">
+              <a href="${tg.url('/move_node_upper?node_id=%i'%(node.node_id))}" title="${_('Move up')}"><i class="icon-g-up-arrow"></i></a>
+              <a href="${tg.url('/move_node_lower?node_id=%i'%(node.node_id))}" title="${_('Move down')}"><i class="icon-g-down-arrow"></i></a>
+              <a href="${tg.url('/create_document?parent_id=%i'%(node.node_id))}" title="${_('Add child document')}"><i class="icon-g-circle-plus"></i></a>
+            </div>
+          </td>
+        </tr>
+        ${node_treeview(node.getChildren(), indentation+1)}
+      % endfor
+    % endif
   % endif
 </%def>
 
-<%def name="node_treeview_in_select_field(node_list, indentation)">
+<%def name="node_treeview_in_select_field(node_list, indentation, selected_id=0)">
     % if len(node_list)>0:
       % if indentation==0:
         <option style="margin-left: ${0.5*indentation}em; color: #CCC;" value="0">no parent...</option>
       % endif
       % for node in node_list:
-        <option style="margin-left: ${0.5*indentation}em;" value="${node.node_id}">${node.data_label}</option>
-        ${node_treeview_in_select_field(node.getChildren(), indentation+1)}
+        % if selected_id!=node.node_id:
+          <option style="margin-left: ${0.5*indentation}em;" value="${node.node_id}">${node.data_label}</option>
+        % else:
+          <option style="margin-left: ${0.5*indentation}em;" value="${node.node_id}" selected>${node.data_label}</option>
+        % endif
+        ${node_treeview_in_select_field(node.getChildren(), indentation+1, selected_id)}
       % endfor
-      </ul>
     % endif
 </%def>
 
@@ -53,48 +72,6 @@ Learning TurboGears 2.3: Quick guide to the Quickstart pages.
         Documents
       </legend>
 
-      <!-- Button to trigger modal -->
-      <p>
-        <a href="#addFolderNode" role="button" class="btn" data-toggle="modal">
-          <i class="icon-g-circle-plus"></i> Create document</a>
-      </p>
-      <!-- Modal -->
-      <div id="addFolderNode" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-          <h3 id="myModalLabel">Create a new page</h3>
-        </div>
-        <div class="modal-body">
-          <form id="create_document_form" method="POST" action="${tg.url('/create_document')}" class="form-horizontal">
-            <div class="control-group">
-              <label class="control-label" for="data_label">Title</label>
-              <div class="controls">
-                <input type="text" id="data_label" name="data_label" placeholder="page title...">
-              </div>
-            </div>
-            <div class="control-group">
-              <label class="control-label" for="parent_id">As child of...</label>
-              <div class="controls">
-                <select id="parent_id" name="parent_id" placeholder="as child of...">
-                  ${node_treeview_in_select_field(root_node_list, 0)}
-                </select>
-              </div>
-            </div>
-            <div class="control-group">
-              <label class="control-label" for="data_content">Description</label>
-              <div class="controls">
-
-                <textarea id="data_content" name="data_content"></textarea>
-              </div>
-            </div>
-          </form>
-        </div>
-        <div class="modal-footer">
-          <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-          <button id="create_document_save_button" class="btn btn-primary">Save changes</button>
-        </div>
-      </div>
-
       <div>
         <table class="table table-striped table-hover table-condensed">
           ${node_treeview(root_node_list)}
@@ -103,49 +80,48 @@ Learning TurboGears 2.3: Quick guide to the Quickstart pages.
     </div>
     <div class="span5">
       <div class="page-header">
-        <h3>${current_node.data_label}</h3>
+        <h3 id="current-document-title">${current_node.data_label}</h3>
+        <form id="current-document-title-edit-form" method='post' action='${tg.url('/edit_label')}'>
+          <div class="input-prepend input-append">
+            <input type='hidden' name='node_id' value='${current_node.node_id}'/>
+            <button id="current-document-title-edit-cancel-button" type="button" class="btn" title="${_('Cancel editing')}"><i class="icon-g-ban"></i></button>
+            <input type='text' name='data_label' value='${current_node.data_label}' class="span2" />
+            <button id='current-document-title-save-cancel-button' type="button" class="btn" title="${_('Save')}"><i class="icon-g-edit"></i></button>
+          </div>
+        </form>
       </div>
 
-      <div class="btn-group">
-        <button class="btn"><i class="icon-g-edit"></i> Edit</button>
-
-      </div>
 
       <div class="btn-group">
         <a class="btn btn-primary" href="#"><i class="icon-g-stats icon-g-white"></i> Status</a>
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
         <ul class="dropdown-menu">
-        
-          
-  
           <li><a class="btn-success" href="#"><i class="icon-g-sun"></i> Open</a></li>
           <li><a class="btn-warning" href="#"><i class="icon-g-rotation-lock"></i> in Standby</a></li>
           <li><a class="btn-danger"  href="#"><i class="icon-g-circle-exclamation-mark"></i> Hot</a></li>
           <li><a class="btn " href="#"><i class="icon-g-ok"></i> Finished</a></li>
           <li><a class="btn btn-disabled" href="#"><i class="icon-g-ban"></i> Archived</a></li>
         </ul>
-
       </div>
-
       <div class="btn-group">
-        <a class="btn btn-primary" href="#" ><i class="icon-g-circle-plus icon-g-white"></i> Add</a>
-        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a href="#"><i class="icon-g-calendar" ></i> Event</a></li>
-          <li><a href="#"><i class="icon-g-comments"></i> Comment</a></li>
-          <li><a href="#"><i class="icon-g-user"></i> Contact</a></li>
-          <li><a href="#"><i class="icon-g-attach"></i> File</a></li>
-        </ul>
+        <button id='current-document-content-edit-button' class="btn"><i class='icon-g-edit'></i> ${_('Edit')}</button>
       </div>
-
       <div class="btn-group">
-        <button class="btn btn-danger"><i class="icon-g-white icon-g-remove"></i> Delete</button>
-      </div>
-      
-    
-      <div>
-        ${current_node.data_content|n}
+        <a href='${tg.url('/force_delete_node?node_id=%i'%(current_node.node_id))}' id='current-document-force-delete-button' class="btn btn-danger"><i class="icon-g-white icon-g-remove"></i> ${_('Delete')}</a>
       </div>
+      <p>
+        <div id='current-document-content' class="">
+          ${current_node.data_content|n}
+        </div>
+        <form id="current-document-content-edit-form" method='post' action='${tg.url('/edit_content')}'>
+          <input type='hidden' name='node_id' value='${current_node.node_id}'/>
+          <textarea id="current_node_textarea" name='data_content' spellcheck="false" wrap="off" autofocus placeholder="Enter something ...">
+            ${current_node.data_content|n}
+          </textarea>
+          <button id="current-document-content-edit-cancel-button" type="button" class="btn" title="${_('Cancel editing')}"><i class="icon-g-ban"></i> ${_('Cancel')}</button>
+          <button id='current-document-content-edit-save-button' type="button" class="btn" title="${_('Save')}"><i class="icon-g-edit"></i>  ${_('Save')}</button>
+        </form>
+      </p>
     </div>
     <div class="span4">
       <div class="tabbable">

pboard/pboard/templates/master.mak

@@ -36,6 +36,18 @@
           padding-right: 20px;
         }
       }
+      
+div.pod-toolbar {
+  visibility: hidden;
+}
+tr:Hover td div.pod-toolbar {
+  visibility: visible;
+}
+
+h3:Hover div.pod-toolbar {
+  visibility: visible;
+}
+
     </style>
 </head>
 <body class="${self.body_class()}">
@@ -57,9 +69,11 @@
 <script src="/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.js"></script>
 
 <style>
-#addFolderNode {
-  width: 800px;
-  margin-left: -400px;
+tr:Hover td div.pod-toolbar {
+  visibility: hidden;
+}
+tr:Hover td div.pod-toolbar {
+  visibility: visible;
 }
 </style>
 
@@ -76,8 +90,87 @@
 
             <script>
               $(document).ready(function() {
-                $('#data_content').wysihtml5();
+               
+                $('#data_content').wysihtml5({
+                  "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
+                  "emphasis": true, //Italics, bold, etc. Default true
+                  "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
+                  "html": true, //Button which allows you to edit the generated HTML. Default false
+                  "link": false, //Button to insert a link. Default true
+                  "image": false, //Button to insert an image. Default true,
+                  // "color": true //Button to change color of font  
+                });
+                
+                $('#data_content').css("width", "30em");
+                $('#data_content').css("height", "12em");
+
+                $('#data_content_edit').wysihtml5({
+                  "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
+                  "emphasis": true, //Italics, bold, etc. Default true
+                  "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
+                  "html": true, //Button which allows you to edit the generated HTML. Default false
+                  "link": false, //Button to insert a link. Default true
+                  "image": false, //Button to insert an image. Default true,
+                  // "color": true //Button to change color of font  
+                });
+                
+                $('#data_content_edit').css("width", "30em");
+                $('#data_content_edit').css("height", "12em");
+                
+                          $('#current_node_textarea').wysihtml5({
+            "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
+            "emphasis": true, //Italics, bold, etc. Default true
+            "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
+            "html": true, //Button which allows you to edit the generated HTML. Default false
+            "link": false, //Button to insert a link. Default true
+            "image": false, //Button to insert an image. Default true,
+            // "color": true //Button to change color of font  
+          });
+                $('#current_node_textarea').css('margin-bottom', '0');
+                $('#current_node_textarea').css("min-height", "12em");
+                $('#current_node_textarea').addClass("span5");
+
+
+                /* Edit title form */
+                $("#current-document-title-edit-form" ).css("display", "none");
+                $("#current-document-title" ).dblclick(function() {
+                  $("#current-document-title" ).css("display", "none");
+                  $("#current-document-title-edit-form" ).css("display", "block");
+                });
+                $("#current-document-title-edit-cancel-button" ).click(function() {
+                  $("#current-document-title" ).css("display", "block");
+                  $("#current-document-title-edit-form" ).css("display", "none");
+                });
+                $('#current-document-title-save-cancel-button').on('click', function(e){
+                  // We don't want this to act as a link so cancel the link action
+                  e.preventDefault();
+                  $('#current-document-title-edit-form').submit();
+                });
+
+                /* Edit content form */
+                $("#current-document-content-edit-form" ).css("display", "none");
+                $("#current-document-content-edit-button" ).click(function() {
+                  $("#current-document-content" ).css("display", "none");
+                  $("#current-document-content-edit-form" ).css("display", "block");
+                });
+                $("#current-document-content" ).dblclick(function() {
+                  $("#current-document-content" ).css("display", "none");
+                  $("#current-document-content-edit-form" ).css("display", "block");
+                });
+                $("#current-document-content-edit-cancel-button" ).click(function() {
+                  $("#current-document-content" ).css("display", "block");
+                  $("#current-document-content-edit-form" ).css("display", "none");
+                });
+                $('#current-document-content-edit-save-button').on('click', function(e){
+                  // We don't want this to act as a link so cancel the link action
+                  e.preventDefault();
+                  $('#current-document-content-edit-form').submit();
+                });
+
+                /* Force delete content form */
+
               });
+              
             </script>
 </body>
 
@@ -167,4 +260,5 @@
   </div><!-- /.navbar -->
 </%def>
 
+
 </html>