Anonymous avatar Anonymous committed d935267

Design of index page

Comments (0)

Files changed (15)

gadmin-static/css/style.css

     border: 0;
 }
 
+a {
+    text-decoration: underline;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
 .clear {
     clear: both;
 }
 }
 
 #Header {
-    padding: 5px 0;
+    padding: 8px 0;
 }
 
 #Header .logout {
 /* Content */
 #Content {
     border-top: 4px solid #000;
-    padding: 10px 30px 40px 30px;
+    padding: 10px 30px 10px 30px;
     background-color: #fff;
 }
 
+/* Actions */
+#Actions {
+    height: 16pt;
+    list-style-type: none;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    background-color: #f5f2ff;
+    margin: 10px 0;
+}
+
+#Actions li {
+    float: left;
+    border-right: 1px solid #ccc;
+    padding: 0 1.5em;
+    height: 16pt;
+    line-height: 16pt;
+    font-size: 8pt;
+    font-weight: bold;
+}
+
+#Actions li.last {
+    border-right: 0px;
+}
+
+#Actions li a {
+    color: #6b6b70;
+}
+
+#Actions li a:hover {
+    color: #000;
+}
+
 /* Tree */
 #Tree {
-    padding: 0;
-    margin: 0;
     list-style-type: none;
+    margin-bottom: 50px;
 }
 
+#Root,
 #Tree li {
-    background-color: #dfdfdf;
-    margin: 10px 0;
-    padding: 5px 10px;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    background-color: #f0f0f0;
+    margin: 5px 0;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    line-height: 22pt;
+    font-size: 14pt;
 }
 
-#Tree .controls {
-    float: right;
+#Root {
+    margin-top: 30px;
+    margin-bottom: 5px;
 }
 
-#Tree .hand {
+#Root .info,
+#Tree .info {
     float: right;
-    cursor: n-resize;
-    width: 20px;
-    height: 20px;
-    background-color: #000;
+    font-size: 10pt;
+}
+
+#Root .info a,
+#Root .info span.delete,
+#Tree .info a {
+    font-weight: bold;
+    margin: 0 0 0 1.5em;
+    color: #000;
+}
+
+#Root .info .delete,
+#Tree .info .delete {
+    color: #b02d0e;
+}
+
+#Root .info span.delete {
+    color: #f0f0f0;
+}
+
+#Tree.ordering {
+}
+
+#Tree.ordering .info a {
+    visibility: hidden;
+}
+
+#Tree.ordering li {
+    background-color: #e2e2ec;
+    background-color: #dadada;
+    border: 1px solid #888;
+    cursor: move;
+}
+
+#OrderButtons {
+    margin-top: -10px;
+    margin-bottom: 30px;
+}
+
+#OrderButtons button {
+    padding: 0.2em 0.5em;
+}
+
+#OrderButtons {
+    margin-left: 3em;
+    padding: 0.3em 0.5em;
+    font-weight: bold;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    background-color: #f5f2ff;
+}
+
+#SaveOrder {
+    font-weight: bold;
 }
 
 /* Forms */

gadmin-static/js/site-tree.js

                 checkOrder(elem, clone, pages);
             },
             onComplete: function (elem) {
-                var btn = $('SaveOrder');
-                if (btn.getStyle('display') == 'none') {
-                    btn.set('opacity', 0.0);
-                    btn.setStyle('display', '');
-                    btn.set('tween', {duration: 'normal'});
-                    btn.tween('opacity', 0.0, 1.0);
-                }
+                $('OrderButtons').setStyle('display', 'block');
                 showChilds(elem);
             }
         });
 
     window.addEvent('domready', function () {
         $$('.reorder-button').addEvent('click', function (e) {
-            $('Tree').highlight();
+            $('Tree').addClass('ordering');
+            $('Tree').highlight('#ababf8');
             var sortable = startReordering();
             e.preventDefault();
             $('SaveOrder').addEvent('click', function () {
                 $('ReorderForm').submit();
             });
         });
+
+        $$('#Tree .delete').addEvent('click', function (e) {
+            return confirm('Are You sure?');
+        });
     });
 }) ();
 

gadmin/models/gpage.py

 from django.template import TemplateDoesNotExist, RequestContext
 from django.core.urlresolvers import reverse
 # TODO: check all posible 'more than 1000' cases
-# TODO: profile and cache get_*
 
 # Not sure about tree construction in
 # get_descendants, get_branch, get_all

gadmin/templatetags/gadmin.py

+from django import template
+from django.template.defaultfilters import stringfilter
+from google.appengine.api import users
+from django.core.urlresolvers import reverse
+
+register = template.Library()
+
+@register.filter
+def margin_left(value):
+    return "margin-left: %dem;" % (int(value - 1) * 3)
+
+class LoginedUserNode(template.Node):
+    def render(self, context):
+        html = '<a class="logout" href="%s">Logout</a>%s&nbsp;'
+        username = users.get_current_user().nickname()
+        url = users.create_logout_url(reverse("gadmin:index"))
+        return html % (url, username)
+
+def logout(parser, token):
+    return LoginedUserNode()
+register.tag('logout', logout)
+

gadmin/templatetags/site_tree.py

-from django import template
-from django.template.defaultfilters import stringfilter
-
-register = template.Library()
-
-@register.filter
-def margin_left(value):
-    return "margin-left: %dem;" % (int(value - 1) * 3)
-
 
 from django.http import Http404, HttpResponse
 from django.shortcuts import render_to_response, redirect
-from django.core.urlresolvers import reverse
 from gadmin.models import gpage
 from gadmin.forms import GPageForm, form_formclass, GTypeForm
 from gadmin.account import admin_required

templates/gadmin/base.html

 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Gadmin » {% block gd_title %}{% endblock %}</title>
-  <link rel="stylesheet" href="/gadmin-static/css/style.css" type="text/css" media="screen" charset="utf-8"></link>
-  {% block gd_head_js %}
-    <script type="text/javascript" charset="utf-8"
-      src="/gadmin-static/js/mootools-1.2.4-core.js"></script>
-    <script type="text/javascript" charset="utf-8"
-      src="/gadmin-static/js/mootools-1.2.4.2-more.js"></script>
+  {% block gd_head %}
+    {% block gd_head_css %}
+      <link rel="stylesheet" href="/gadmin-static/css/style.css" type="text/css" media="screen" charset="utf-8"></link>
+    {% endblock %}
+    {% block gd_head_js %}
+      <script type="text/javascript" charset="utf-8"
+        src="/gadmin-static/js/mootools-1.2.4-core.js"></script>
+      <script type="text/javascript" charset="utf-8"
+        src="/gadmin-static/js/mootools-1.2.4.2-more.js"></script>
+    {% endblock %}
+    {% block gd_head_end %}{% endblock %}
   {% endblock %}
-  {% block gd_head %}{% endblock %}
 </head>
 <body>
   <div id="Everything">
     <div id="Header">
       <div class="logout right">
-        <a class="logout" href="#">Logout</a>
-        TODO: Nickname&nbsp;
+        {% load gadmin %}{% logout %}
       </div>
       {% block gd_header %}
       {% endblock %}
     </div>
     {% block gd_menu %}
       <ul id="TopMenu">
-        <li class="{% block gd_menu_site_tree %}{% endblock %}">
+        <li class="{% block gd_menu_sitetree %}{% endblock %}">
           <a href="{% url gadmin:index %}">Site Tree</a>
         </li>
-        <li class="active">
-          <a href="#">Foo</a>
-        </li>
-        <li class="">
-          <a href="#">Bar</a>
-        </li>
         {% block gd_menu_items %}{% endblock %}
       </ul>
       <div class="clear"></div>
     <div id="Content">{% block gd_content %}{% endblock %}</div>
     <div id="Footer">{% block gd_footer %}{% endblock %}</div>
   </div>
+  {% block gd_body_end %}{% endblock %}
 </body>
 </html>
-

templates/gadmin/edit.html

-{% extends "gadmin/base.html" %}
+{% extends "gadmin/sitetree-base.html" %}
 {% block gd_title %}Edit Page » {{ page.title }} {% endblock %}
 {% block gd_content %}
   <h3>Edit Page » {{ page.title }}</h1>
   </form>
 {% endblock %}
 
-{% block gd_head %}
+{% block gd_head_end %}
   <link rel="stylesheet" href="/gadmin-static/css/MooEditable/MooEditable.css" type="text/css" ></link>
   <link rel="stylesheet" href="/gadmin-static/css/MooEditable/MooEditable.Table.css" type="text/css" ></link>
   <link rel="stylesheet" href="/gadmin-static/css/MooEditable/MooEditable.Forecolor.css" type="text/css" ></link>
   <link rel="stylesheet" href="/gadmin-static/css/MooEditable/MooEditable.Extras.css" type="text/css" ></link>
 {% endblock %}
 
-{% block gd_footer %}
+{% block gd_body_end %}
   <script type="text/javascript" charset="utf-8"
     src="/gadmin-static/js/picasa.js"></script>
   <script type="text/javascript" charset="utf-8">

templates/gadmin/index-page.html

+<div class="info">
+  <span>{{ page.class_name }}</span>
+  <a class="change-type" href="{% url gadmin:type page.key %}">Change type</a>
+  <a class="edit" href="{% url gadmin:edit page.key %}">edit</a>
+  {% if not page.is_root %}
+  <a class="delete" href="{% url gadmin:delete page.key %}">delete</a>
+  {% else %}
+  <span class="delete">delete</span>{# Just for layout #}
+  {% endif %}
+</div>
+{{ page.title }}

templates/gadmin/index.html

-{% extends "gadmin/base.html" %}
-{% load site_tree %}
-
+{% extends "gadmin/sitetree-base.html" %}
+{% load gadmin %}
 {% block gd_title %}Site Tree{% endblock %}
 
 {% block gd_content %}
-  {% include "gadmin/tree_actions.html" %}
-  <p>
-    {{ tree.0 }}
-  </p>
-  <ul id="Tree">
+  {% include "gadmin/tree-actions.html" %}
+  <div id="Root">
+    {% with tree.0 as page %}
+      {% include "gadmin/index-page.html" %}
+    {% endwith %}
+  </div>
+  <ul id="Tree" style="{{ 2|margin_left }}">
   {% for p in tree|slice:"1:" %}
     <li id="{{ p.key }}" class="{{ p.level }}" style="{{ p.level|margin_left }}">
-      <div class="controls">
-        <a href="{% url gadmin:edit p.key %}">edit</a>
-        <a href="{% url gadmin:delete p.key %}">delete</a>
-      </div>
-      {{ p.title }} ({{ p.level }} - {{ p.order }}), {{ p.class_name }}
-      (<a href="{% url gadmin:type p.key %}">Change type</a>)
+      {% with p as page %}
+        {% include "gadmin/index-page.html" %}
+      {% endwith %}
     </li>
   {% endfor %}
   </ul>
-  <p><button id="SaveOrder" style="display: none;">Save Order</button></p>
-  {% include "gadmin/tree_actions.html" %}
+  <div id="OrderButtons" style="display: none;">
+    <button id="Cancel" onclick="location.href='{% url gadmin:index %}';">Cancel</button>
+    <button id="SaveOrder">Save Order</button>
+  </div>
+
+  {% include "gadmin/tree-actions.html" %}
 
   <ul id="Holder" style="display: none;"></ul>
   <form id="ReorderForm" action={% url gadmin:reorder %} method="post">

templates/gadmin/new.html

-{% extends "gadmin/base.html" %}
+{% extends "gadmin/sitetree-base.html" %}
 {% block gd_title %}New Page{% endblock %}
 {% block gd_content %}
   <h1>New Page</h1>

templates/gadmin/sitetree-base.html

+{% extends "gadmin/base.html" %}
+{% block gd_menu_sitetree %}active{% endblock %}

templates/gadmin/tree-actions.html

+<ul id="Actions">
+  <li><a href="{% url gadmin:new %}">Add New Page</a></li>
+  <li class="last"><a class="reorder-button" href="#reorder">Reorder</a></li>
+</ul>

templates/gadmin/tree_actions.html

-<p>
-  <a href="{% url gadmin:new %}">Add New Page</a>
-  |
-  <a class="reorder-button" href="#reorder">Reorder</a>
-</p>

templates/gadmin/type.html

-{% extends "gadmin/base.html" %}
+{% extends "gadmin/sitetree-base.html" %}
 {% block gd_title %} TODO {% endblock %}
 {% block gd_content %}
   <h3>Change Type Of » {{ page.title }}</h1>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.