From 3c0f69b2b4d62eaeb05403edc7b4c171622edc9a Mon Sep 17 00:00:00 2001 From: =?utf8?q?=C5=81ukasz=20Rekucki?= Date: Wed, 2 Sep 2009 18:13:03 +0200 Subject: [PATCH] Plugowalne akcje w toolbarach. --- apps/toolbar/admin.py | 35 +++--- apps/toolbar/models.py | 10 +- apps/toolbar/templates/toolbar/toolbar.html | 34 ++++-- apps/toolbar/templatetags/toolbar_tags.py | 4 - project/static/css/master.css | 63 ---------- project/static/css/toolbar.css | 115 ++++++++++++++++++ project/static/js/editor.js | 47 +++++++ project/templates/explorer/editor.html | 1 + .../templates/explorer/panels/xmleditor.html | 50 +++----- 9 files changed, 226 insertions(+), 133 deletions(-) create mode 100644 project/static/css/toolbar.css diff --git a/apps/toolbar/admin.py b/apps/toolbar/admin.py index 2c8cd28c..8658d344 100644 --- a/apps/toolbar/admin.py +++ b/apps/toolbar/admin.py @@ -3,23 +3,18 @@ from django.utils.translation import ugettext_lazy as _ from toolbar import models - -class ButtonGroupAdmin(admin.ModelAdmin): - list_display = ('name', 'slug', 'position',) - search_fields = ('name', 'slug',) - prepopulated_fields = {'slug': ('name',)} - list_editable = ('position',) - -admin.site.register(models.ButtonGroup, ButtonGroupAdmin) - - -class ButtonAdmin(admin.ModelAdmin): - list_display = ('label', 'slug', 'tag', 'key', 'position',) - list_filter = ('group',) - search_fields = ('label', 'slug', 'tag', 'key',) - prepopulated_fields = {'slug': ('label',)} - filter_horizontal = ('group',) - list_editable = ('position',) - -admin.site.register(models.Button, ButtonAdmin) - +#class ButtonGroupAdmin(admin.ModelAdmin): +# list_display = ('name', 'slug', 'position',) +# search_fields = ('name', 'slug',) +# prepopulated_fields = {'slug': ('name',)} +# list_editable = ('position',) +admin.site.register(models.ButtonGroup) + +#class ButtonAdmin(admin.ModelAdmin): +# list_display = ('label', 'action', 'key', 'position',) +# list_filter = ('group',) +# search_fields = ('label', 'action', 'key',) +# filter_horizontal = ('group',) +# list_editable = ('position',) + +admin.site.register(models.Button) diff --git a/apps/toolbar/models.py b/apps/toolbar/models.py index a3db70f1..f91f7390 100644 --- a/apps/toolbar/models.py +++ b/apps/toolbar/models.py @@ -17,11 +17,13 @@ class ButtonGroup(models.Model): class Button(models.Model): label = models.CharField(max_length=32) - slug = models.SlugField() - tag = models.CharField(max_length=128) - key = models.CharField(blank=True, max_length=1) - position = models.IntegerField(default=0) + slug = models.SlugField() #unused + + action = models.CharField(max_length=256) + key = models.CharField(blank=True, max_length=1) + position = models.IntegerField(default=0) + group = models.ManyToManyField(ButtonGroup) class Meta: diff --git a/apps/toolbar/templates/toolbar/toolbar.html b/apps/toolbar/templates/toolbar/toolbar.html index c6b5ebb9..3238a8c2 100644 --- a/apps/toolbar/templates/toolbar/toolbar.html +++ b/apps/toolbar/templates/toolbar/toolbar.html @@ -1,19 +1,29 @@ {% load toolbar_tags %} -
-
    +
    + +
    +

    {% for group in groups %} -

  1. {{ group.name }}
    2. + {% endfor %} -
-
 
-
- {% for group in groups %} -
    +

    +
+ +
+ {% for group in groups %} +

+ {# buttons for this group #} {% for button in group.button_set.all %} -

  • {{ button.label }}
    • + {% endfor %} - +

    {% endfor %} -
     
    -
    \ No newline at end of file + + diff --git a/apps/toolbar/templatetags/toolbar_tags.py b/apps/toolbar/templatetags/toolbar_tags.py index eab54556..e29c8a0d 100644 --- a/apps/toolbar/templatetags/toolbar_tags.py +++ b/apps/toolbar/templatetags/toolbar_tags.py @@ -1,17 +1,13 @@ from django import template - from toolbar import models - register = template.Library() - @register.inclusion_tag('toolbar/toolbar.html') def toolbar(): groups = models.ButtonGroup.objects.all() return {'groups': groups} - @register.filter def keycode(value): return ord(str(value).upper()) diff --git a/project/static/css/master.css b/project/static/css/master.css index 7e399428..561ef50a 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -220,69 +220,6 @@ label { /* = XML Editor panel = */ /* ==================== */ -.toolbar { - overflow: hidden; - z-index: 70; -} - -.toolbar, .toolbar ol { -/* overflow: hidden;*/ - display: block; - margin: 0; - padding: 0; - background-color: #CCC; - border-top: 1px solid #AAA; -} - -.toolbar-tabs li { - font-size: 14px; - display: block; - float: left; - margin: 4px 0 -1px 4px; - padding: 2px 10px 0 10px; - background-color: #CCC; - border: 1px solid #AAA; - border-radius-topleft: 8px; - border-radius-topright: 8px; - -moz-border-radius-topleft: 8px; - -moz-border-radius-topright: 8px; - -webkit-border-top-left-radius: 8px; - -webkit-border-top-right-radius: 8px; -} - -.toolbar-tabs { - height: 21px; -} - -.toolbar-tabs li:hover, .toolbar-tabs li.active { - cursor: default; - background-color: #EEE; - border-bottom: 1px solid #EEE; -} - -.toolbar-buttons { - background-color: #EEE; - border-bottom: 1px solid #AAA; - z-index: 71; -} - -.toolbar-buttons li { - display: block; - font-size: 12px; - padding: 1px 8px; - margin: 4px; - border-radius: 10px; - -moz-border-radius: 10px; - -webkit-border-radius: 8px; - float: left; -} - -.toolbar-buttons li:hover { - background-color: #777; - color: #FFF; - cursor: default; -} - .change-font-size { width: 45px; height: 18px; diff --git a/project/static/css/toolbar.css b/project/static/css/toolbar.css new file mode 100644 index 00000000..aba534fe --- /dev/null +++ b/project/static/css/toolbar.css @@ -0,0 +1,115 @@ +.toolbar { + overflow: hidden; + z-index: 100; + background: #AAA; + position: absolute; + top: 0px; left:0px; right: 0px; + height: 40pt; + padding: 1pt; + margin: 0pt; +} + +.toolbar p { + margin: 0pt; + + padding: 0pt; + padding-left: 0.5em; + + border: none; + background: #AAA; + font-size: 10pt; + line-height: 12pt; +} + +.toolbar button { + border: none; + padding: 2pt 0.5em; + background: #AAA; +} + +.toolbar div { + background: green; + margin: 0pt; + padding: 0pt; +} + +.toolbar-tabs-container button.active { + background: #DDD; +} + +.toolbar-button-groups-container p { + background: #DDD; + padding-top: 2pt; + padding-bottom: 2pt; +} + +.toolbar-button-groups-container button { + background: #DDD; +} + +.toolbar-button-groups-container button:hover { + background: #EEE; +} + +.toolbar-button-groups-container button:active { + background: yellow; +} + +/* +.toolbar, .toolbar ol { + display: block; + margin: 0; + padding: 0; + background-color: #CCC; + border-top: 1px solid #AAA; +} + +.toolbar-tabs li { + font-size: 14px; + display: block; + float: left; + margin: 4px 0 -1px 4px; + padding: 2px 10px 0 10px; + background-color: #CCC; + border: 1px solid #AAA; + border-radius-topleft: 8px; + border-radius-topright: 8px; + -moz-border-radius-topleft: 8px; + -moz-border-radius-topright: 8px; + -webkit-border-top-left-radius: 8px; + -webkit-border-top-right-radius: 8px; +} + +.toolbar-tabs { + height: 21px; +} + +.toolbar-tabs li:hover, .toolbar-tabs li.active { + cursor: default; + background-color: #EEE; + border-bottom: 1px solid #EEE; +} + +.toolbar-buttons { + background-color: #EEE; + border-bottom: 1px solid #AAA; + z-index: 71; +} + +.toolbar-buttons li { + display: block; + font-size: 12px; + padding: 1px 8px; + margin: 4px; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 8px; + float: left; +} + +.toolbar-buttons li:hover { + background-color: #777; + color: #FFF; + cursor: default; +} */ + diff --git a/project/static/js/editor.js b/project/static/js/editor.js index 585f3ce2..5366c587 100644 --- a/project/static/js/editor.js +++ b/project/static/js/editor.js @@ -47,6 +47,7 @@ Panel.prototype.load = function (url) { $(self.contentDiv).html(data); self.hooks = panel_hooks; panel_hooks = null; + self.connectToolbar(); self.callHook('load'); }, error: function(request, textStatus, errorThrown) { @@ -104,6 +105,52 @@ Panel.prototype.saveInfo = function() { return saveInfo; } +Panel.prototype.connectToolbar = function() { + // check if there is a one + var toolbar = $("div.toolbar", this.contentDiv); + $.log('Connecting toolbar', toolbar); + if(toolbar.length == 0) return; + + // connect group-switch buttons + var group_buttons = $('*.toolbar-tabs-container button', toolbar); + + $.log('Found groups:', group_buttons); + + group_buttons.each(function() { + var group = $(this); + var group_name = group.attr('ui:group'); + $.log('Connecting group: ' + group_name); + + group.click(function() { + // change the active group + var active = $("*.toolbar-tabs-container button.active"); + if (active != group) { + active.removeClass('active'); + group.addClass('active'); + $(".toolbar-button-groups-container p").each(function() { + if ( $(this).attr('ui:group') != group_name) + $(this).hide(); + else + $(this).show(); + }); + } + }); + }); + + // connect action buttons + var action_buttons = $('*.toolbar-button-groups-container button'); + action_buttons.each(function() { + var button = $(this); + var action = button.attr('ui:action').split(':'); + var action_name = action[0]; + var action_data = action[1]; + + button.click(function() { + $.log('emiting action ', action_name, ' with data: ', action_data); + $(document).trigger('ui:action:' + action_name, action_data); + }); + }); +} function Editor() { this.rootDiv = $('#panels'); diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index 68c8c7fc..c7eadbf2 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -1,6 +1,7 @@ {% extends "base.html" %} {% block extrahead %} + diff --git a/project/templates/explorer/panels/xmleditor.html b/project/templates/explorer/panels/xmleditor.html index 2253609c..0f26ccf3 100644 --- a/project/templates/explorer/panels/xmleditor.html +++ b/project/templates/explorer/panels/xmleditor.html @@ -1,14 +1,18 @@ {% load toolbar_tags %} -{% toolbar %} +
    A-
    A+
    -
    + +
    + +{% toolbar %} +