Permalink
Browse files

menu builder in progress

  • Loading branch information...
1 parent f14410a commit 4599e2f55a1696a5b645d6999e075d2c56aa824d @macadames macadames committed Mar 16, 2011
@@ -64,7 +64,7 @@ class Meta:
model = Comment
fields = ('description', )
widgets = {
- 'description': widgets.Textarea(attrs = {'class': 'comment-description-field'}),
+ 'description': widgets.Textarea(attrs = {'class': 'comment-description-field', 'cols': '', 'rows': ''}),
}
class DocumentForm(BaseRegularForm):
@@ -67,16 +67,17 @@
margin: 0 0 7px;
}
.menu-item-handle {
- background: #E00023; /* old browsers */
- background: -moz-linear-gradient(left, #E00023 0%, #964350 51%, #513D40 100%);
- background: -webkit-gradient(linear, left top, right top, color-stop(0%,#E00023), color-stop(51%,#964350), color-stop(100%,#513D40));
- color: white;
+ background: #EEE; /* old browsers */
+ background: -moz-linear-gradient(center top , #FFF 0%, #DDD 51%, #BBB 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(51%,#DDD), color-stop(100%,#BBB));
+ color: #444;
position: relative;
padding-left: 10px;
height: auto;
width: 350px;
font-weight:bold;
overflow: hidden;
+ border: 1px solid #DDD;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
@@ -123,7 +124,7 @@ li.menu-item.ui-sortable-helper .menu-item-transport dl {
margin-top: 13px;
}
-
+/* menus level */
/* WARNING: The factor of 30px is hardcoded into the nav-menus javascript. */
.menu-item-depth-0 { margin-left: 0px; }
@@ -166,6 +167,62 @@ body.menu-max-depth-10 { min-width: 1250px !important; }
body.menu-max-depth-11 { min-width: 1280px !important; }
+/* Menu item controls */
+.item-type { text-transform: uppercase; font-size: 11px; color: #999999; padding-right: 10px; }
+.item-controls { font-size: 11px; position: absolute; right: 20px; top: -1px; }
+.item-controls a { text-decoration: none; }
+.item-controls a:hover { cursor: pointer; text-decoration: none !important; }
+.item-controls .item-order { padding-right: 10px;}
+.item-controls .item-order a {
+ font-weight:bold;
+}
+
+.item-controls .menu-item-delete:hover { color: #ff0000; }
+
+.item-edit {
+ background: url("../images/menu-bits.png") no-repeat scroll 0 -105px;
+ position: absolute;
+ right: -20px;
+ top: 0;
+ display: block;
+ width: 23px;
+ height: 36px;
+ overflow: hidden;
+ text-indent:-999em;
+ border-bottom: 1px solid #eee;
+ -moz-border-radius-bottomleft: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+
+/* Menu editing */
+.menu-instructions-inactive {
+ display: none;
+}
+.menu-item-settings {
+ background: #F9F9F9;
+ display:block;
+ width: 400px;
+ padding: 10px 0 10px 10px;
+ border: solid #E6E6E6;
+ border-width: 0 1px 1px 1px;
+ -moz-border-radius: 0 0 6px 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ -webkit-border-bottom-left-radius: 6px;
+ border-radius: 0 0 6px 6px;
+}
+.menu-item-edit-active .menu-item-settings {
+ display:block;
+}
+
+.menu-item-edit-inactive .menu-item-settings {
+ display:none;
+}
+
+
+
+/* postboxes on left column */
+
.postbox {
border: 1px solid #E6E6E6;
background: #E6E6E6;/* old browsers */
@@ -174,6 +231,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
+ margin-bottom: 10px;
}
.postbox h3 {
@@ -189,13 +247,24 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
-webkit-border-radius: 0 0 6px 6px;
}
-.postbox .inside p {
- margin: 0 0 5px;
+.postbox .inside .fieldWrapper {
+ margin: 0 0 10px !important;
+ padding: 0 !important;
+ border-bottom: none !important;
+}
+
+.postbox .inside label {
+ float: none !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ text-align: left !important;
+ width: auto !important;
+ font-size: 12px !important;
}
.postbox .inside input[type=text],
.postbox .inside textarea {
- width: 170px;
+ width: 170px !important;
}
.postbox .inside input[type=submit] {
@@ -205,5 +274,10 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
.postbox .postboxcontrol {
text-align: right;
- margin-top: 8px !important;
+ margin-top: 15px !important;
+}
+
+.postbox .hint {
+ top: 35px;
+ right: -230px !important;
}
@@ -24,6 +24,8 @@ var tnmb = tnMenuBuilder = {
tnmb.targetList = tnmb.menuList;
this.jQueryExtensions();
+
+ this.attachMenuEditListeners();
if( tnmb.menuList.length )
this.initSortables();
@@ -448,9 +450,29 @@ var tnmb = tnMenuBuilder = {
tnmb.menusChanged = true;
},
+ attachMenuEditListeners : function() {
+ var that = this;
+ $('#menu-edit-form').bind('click', function(e) {
+ if ( e.target && e.target.className ) {
+ if ( -1 != e.target.className.indexOf('item-edit') ) {
+ return that.eventOnClickEditLink(e.target);
+ } else if ( -1 != e.target.className.indexOf('menu-save') ) {
+ return that.eventOnClickMenuSave(e.target);
+ } else if ( -1 != e.target.className.indexOf('menu-delete') ) {
+ return that.eventOnClickMenuDelete(e.target);
+ } else if ( -1 != e.target.className.indexOf('item-delete') ) {
+ return that.eventOnClickMenuItemDelete(e.target);
+ } else if ( -1 != e.target.className.indexOf('item-cancel') ) {
+ return that.eventOnClickCancelLink(e.target);
+ }
+ }
+ });
+ },
+
eventOnClickEditLink : function(clickedEl) {
var settings, item,
matchedSection = /#(.*)jq/.exec(clickedEl.href);
+ return false;
if ( matchedSection && matchedSection[1] ) {
settings = jq('#'+matchedSection[1]);
item = settings.parent();
@@ -491,7 +513,7 @@ var tnmb = tnMenuBuilder = {
jq('#nav-menu-theme-locations select').each(function() {
locs += '<input type="hidden" name="' + this.name + '" value="' + jq(this).val() + '" />';
});
- jq('#update-nav-menu').append( locs );
+ jq('#menu-edit-form').append( locs );
// Update menu item position data
tnmb.menuList.find('.menu-item-data-position').val( function(index) { return index + 1; } );
window.onbeforeunload = null;
@@ -1,16 +1,42 @@
+from django.utils.translation import ugettext as _
from django import forms
+from django.forms import widgets
+from django.forms import fields
from twistranet.twistapp.forms.base_forms import BaseForm
from twistranet.twistapp.models import Menu, MenuItem
class MenuBuilderForm(forms.Form):
"""just a basic form to build menus
"""
-class MenuForm(BaseForm):
+class MenuForm(forms.ModelForm):
class Meta:
model = Menu
fields = ('title', 'description', )
-class MenuItemForm(BaseForm):
+class MenuItemForm(forms.ModelForm):
+
+ title = fields.CharField(
+ label = _("Title"),
+ help_text = _("Enter the item's title as you want it to be displayed in menu."),
+ )
+
+ description = fields.CharField(
+ label = _("Description"),
+ help_text = _("Enter the item's description as you want it to be displayed on mouse over menu item's."),
+ widget = widgets.Textarea(attrs = {'class': 'menu-description-field', 'rows':'2', 'cols': ''}),
+ )
+
+ class Meta:
+ model = MenuItem
+
+class MenuItemLinkForm(MenuItemForm):
+
+ link_url = forms.URLField(
+ label = "URL",
+ help_text = _("Enter the custom link's url."),
+ required = True,
+ )
class Meta:
- model = MenuItem
+ model = MenuItem
+ fields = ('title', 'description', 'link_url')
@@ -26,31 +26,43 @@
{% endcomment%}
<div id="menu_edit_left">
<div id="add-custom-links" class="postbox ">
- <h3>{% trans 'Add custom links' %}</h3>
+ <h3>{% trans 'Add custom link in menu' %}</h3>
<div class="inside">
- <form>
- <p>
- <label>{% trans 'Label' %}</label>
- <input type="text" name="label" />
- </p>
- <p>
- <label>{% trans 'URL' %}</label>
- <input type="text" name="URL" />
- </p>
- <p>
- <label>{% trans 'Description' %}</label>
- <textarea name="Description"></textarea>
- </p>
- <p class="postboxcontrol">
+ <form action="{{ path }}"
+ method="post">
+ {% for field in links_form %}
+ {% if not field.is_hidden %}
+ <div class="fieldWrapper">
+ {{ field.errors }}
+ {{ field.label_tag }} {{ field }}
+ {% if field.help_text %}
+ <span class="hint">{{ field.help_text }}
+ <span class="hint-pointer">&nbsp;</span>
+ </span>
+ {% endif %}
+ <div class="clear"><!-- --></div>
+ </div>
+ {% else %}
+ {{ field }}
+ {% endif %}
+ {% endfor %}
+ <div class="postboxcontrol">
<input type="submit" name="submit" value="{% trans 'Add to menu' %}" />
- </p>
+ </div>
</form>
</div>
</div>
+ <div id="add-community" class="postbox ">
+ <h3>{% trans 'Add community' %}</h3>
+ <div class="inside">
+
+ </div>
+ </div>
</div>
<div id="menu_edit_main">
<form action="{{ path }}"
method="post"
+ id="menu-edit-form"
class="edit-form enableAutoFocus enableUnloadProtect">
<fieldset>
{% autoescape off %}
@@ -1,6 +1,6 @@
from django.utils.translation import ugettext as _
from twistranet.core.views import BaseView
-from twistranet.twistapp.forms.admin_forms import MenuBuilderForm, MenuForm, MenuItemForm
+from twistranet.twistapp.forms.admin_forms import *
from twistranet.twistapp.models import Menu, MenuItem
# used for menu_builder json calls
@@ -24,15 +24,29 @@ def get_html_menu_tree(menu, level=-1):
level += 1
for menuitem in menu.children:
html += '''
-<li id="menu-item-%s" class="menu-item menu-item-edit-inactive menu-item-depth-%i">
+<li id="menu-item-%(iid)s"
+ class="menu-item menu-item-edit-inactive menu-item-depth-%(level)i">
<dl class="menu-item-bar">
<dt class="menu-item-handle">
- <span class="item-title">%s</span>
+ <span class="item-title">%(ilabel)s</span>
+ <span class="item-controls">
+ <span class="item-type"></span>
+ <a href="#"
+ id="edit-%(iid)s"
+ title="%(label_edit)s"
+ class="item-edit">&nbsp;</a>
+ </span>
</dt>
</dl>
+ <div id="menu-item-settings-%(iid)s"
+ class="menu-item-settings">
+ </div>
<ul class="menu-item-transport"></ul>
-</li>
- ''' %(menuitem.id, level, menuitem.label)
+</li>''' %{'iid': menuitem.id,
+ 'level': level,
+ 'ilabel': menuitem.label,
+ 'label_edit': _('Edit menu entry'),
+ }
html += get_html_menu_tree(menuitem, level)
return html
@@ -44,7 +58,9 @@ class MenuBuilder(BaseView):
template_variables = BaseView.template_variables + [
"form",
"topmenus",
- "mainmenu"
+ "mainmenu",
+ "links_form"
+ ""
]
template = 'admin/menu_builder_form.html'
title = _("Menu Builder")
@@ -59,6 +75,7 @@ def prepare_view(self, *args, **kw):
else:
self.mainmenu = ''
self.form = MenuBuilderForm()
+ self.links_form = MenuItemLinkForm()
class MenuEdit(BaseView):
"""

0 comments on commit 4599e2f

Please sign in to comment.