active_administration 0.0.2 → 0.0.3

data/app/assets/javascripts/active_administration/metro-treeview.js

@@ -0,0 +1,64 @@
+(function( $ ) {
+    $.widget("metro.treeview", {
+
+        version: "1.0.0",
+
+        options: {
+            onNodeClick: function(node){},
+            onNodeCollapsed: function(node){},
+            onNodeExpanded: function(node){}
+        },
+
+        _create: function(){
+            var that = this, element = this.element;
+
+            element.find('.node.collapsed').find('ul').hide();
+
+            element.find('.node-toggle').on('click', function(e){
+                var $this = $(this), node = $this.parent().parent("li");
+
+                if (node.hasClass("keep-open")) return;
+
+                node.toggleClass('collapsed');
+
+                if (node.hasClass('collapsed')) {
+                    node.children('ul').fadeOut('fast');
+                    that.options.onNodeCollapsed(node);
+                } else {
+                    node.children('ul').fadeIn('fast');
+                    that.options.onNodeExpanded(node);
+                }
+
+                that.options.onNodeClick(node);
+                e.preventDefault();
+                e.stopPropagation();
+            });
+
+            element.find("a").each(function(){
+                var $this = $(this);
+                $this.css({
+                    paddingLeft: ($this.parents("ul").length-1) * 10
+                });
+            });
+
+            element.find('a').on('click', function(e){
+                var $this = $(this), node = $this.parent('li');
+                element.find('a').removeClass('active');
+                $this.toggleClass('active');
+                that.options.onNodeClick(node);
+                e.preventDefault();
+            });
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+
+

data/app/assets/javascripts/active_administration/metro-wizard.js

@@ -0,0 +1,148 @@
+(function( $ ) {
+    $.widget("metro.wizard", {
+
+        version: "1.0.0",
+
+        options: {
+            stepper: true,
+            stepperType: 'default',
+            locale: $.Metro.currentLocale,
+            finishStep: 'default',
+            buttons: {
+                cancel: true,
+                help: false,
+                prior: true,
+                next: true,
+                finish: true
+            },
+            onCancel: function(page, wiz){},
+            onHelp: function(page, wiz){},
+            onPrior: function(page, wiz){return true;},
+            onNext: function(page, wiz){return true;},
+            onFinish: function(page, wiz){},
+            onPage: function(page, wiz){}
+        },
+
+        _stepper: undefined,
+        _currentStep: 0,
+        _steps: undefined,
+
+        _create: function(){
+            var that = this,
+                element = this.element,
+                o = this.options,
+                steps = element.find(".step");
+
+            this._steps = steps;
+
+            if (o.stepper) {
+                this._stepper = this._createStepper(steps.length).insertBefore(element.find('.steps'));
+            }
+
+            if (element.data('locale') != undefined) o.locale = element.data('locale');
+
+            this._createEvents();
+            this.options.onPage(this._currentStep + 1, element);
+        },
+
+        _createStepper: function(steps){
+            var stepper, o = this.options;
+
+            stepper = $("<div/>").addClass("stepper")
+                .attr("data-role", "stepper")
+                .attr("data-steps", steps);
+
+            if (o.stepperType != 'default') {
+                stepper.addClass(o.stepperType);
+            }
+
+            return stepper;
+        },
+
+        _createEvents: function(){
+            var that = this, element = this.element, o = this.options;
+
+            if (o.buttons) {
+                var actions = $("<div/>").addClass("actions").appendTo(element);
+                var group_left = $("<div/>").addClass("group-left").appendTo(actions);
+                var group_right = $("<div/>").addClass("group-right").appendTo(actions);
+
+                if (o.buttons.cancel) {
+                    $("<button type='button'/>").addClass("btn-cancel").html($.Metro.Locale[o.locale].buttons[2]).appendTo(group_left).on('click', function(){
+                        o.onCancel(that._currentStep+1, element);
+                    });
+                }
+                if (o.buttons.help) {
+                    $("<button type='button'/>").addClass("btn-help").html($.Metro.Locale[o.locale].buttons[3]).appendTo(group_right).on('click', function(){
+                        o.onHelp(that._currentStep+1, element);
+                    });
+                }
+                if (o.buttons.prior) {
+                    $("<button type='button'/>").addClass("btn-prior").html($.Metro.Locale[o.locale].buttons[4]).appendTo(group_right).on('click', function(){
+                        if (o.onPrior(that._currentStep+1, element)) that.prior();
+                    });
+                }
+                if (o.buttons.next) {
+                    $("<button type='button'/>").addClass("btn-next").html($.Metro.Locale[o.locale].buttons[5]).appendTo(group_right).on('click', function(){
+                        if (o.onNext(that._currentStep+1, element)) that.next();
+                    });
+                }
+                if (o.buttons.finish) {
+                    $("<button type='button' disabled/>").addClass("btn-finish").html($.Metro.Locale[o.locale].buttons[6]).appendTo(group_right).on('click', function(){
+                        o.onFinish(that._currentStep+1, element);
+                    });
+                }
+            }
+        },
+
+        next: function(){
+            var new_step = this._currentStep + 1;
+
+            if (new_step == this._steps.length) return false;
+            this._currentStep = new_step;
+            this._steps.hide();
+            $(this._steps[new_step]).show();
+
+            this.options.onPage(this._currentStep + 1, this.element);
+            this._stepper.stepper('next');
+
+            var finish = parseInt(this.options.finishStep == 'default' ? this._steps.length - 1 : this.options.finishStep);
+            if (new_step == finish) {
+                this.element.find('.btn-finish').attr('disabled', false);
+            } else {
+                this.element.find('.btn-finish').attr('disabled', true);
+            }
+
+            return true;
+        },
+
+        prior: function(){
+            var new_step = this._currentStep - 1;
+
+            if (new_step < 0) return false;
+            this._currentStep = new_step;
+            this._steps.hide();
+            $(this._steps[new_step]).show();
+
+            this.options.onPage(this._currentStep + 1, this.element);
+            this._stepper.stepper('prior');
+
+            var finish = parseInt(this.options.finishStep == 'default' ? this._steps.length - 1 : this.options.finishStep);
+            if (new_step == finish) {
+                this.element.find('.btn-finish').attr('disabled', false);
+            } else {
+                this.element.find('.btn-finish').attr('disabled', true);
+            }
+
+            return true;
+        },
+
+        _destroy: function(){
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+

data/app/assets/stylesheets/active_administration/accordion.less

@@ -0,0 +1,64 @@
+.accordion {
+    & > .accordion-frame {
+        .border;
+        margin-bottom: 2px;
+
+        & > .heading {
+            display: block;
+            text-decoration: none;
+            background-color: @grayLighter;
+            padding: 10px 20px;
+            width: 100%;
+            position: relative;
+            color: @dark;
+
+            [class*="icon-"] {
+                margin-right: 10px;
+            }
+
+        }
+
+        & > .content {
+            padding: 10px;
+        }
+    }
+
+    & > .accordion-frame {
+        & > .content {
+            display: none;
+        }
+
+        &:first-child {
+            & > .content {
+                //display: block;
+            }
+        }
+    }
+}
+
+.accordion {
+    &.with-marker {
+        .heading {
+            &:before {
+                position: absolute;
+                display: block;
+                left: 5px;
+                top: 12px;
+                content: '';
+
+                width: 0;
+                height: 0;
+                border-left: 7px solid transparent;
+                border-top: 7px solid transparent;
+                border-bottom: 7px solid black;
+            }
+
+            &.collapsed {
+                &:before {
+                    .rotate(-45deg);
+                    margin-left: -4px;
+                }
+            }
+        }
+    }
+}

data/app/assets/stylesheets/active_administration/balloon.less

@@ -0,0 +1,88 @@
+.balloon {
+    display: block;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 1px @gray solid;
+    background-color: @white;
+    position: relative;
+    margin-bottom: 30px;
+
+    &:before, &:after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+    }
+    &:before {
+        z-index: 2;
+    }
+    &:after {
+        z-index: 1;
+    }
+
+    &.bottom {
+        &:before, &:after {
+            top: 1px;
+            left: 20px;
+            margin: -20px 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-bottom: 20px solid @white;
+        }
+
+        &:after {
+            top: 0;
+            border-bottom: 20px solid @gray;
+        }
+    }
+
+    &.top {
+        &:before, &:after {
+            top: 100%;
+            margin-top: -1px;
+            left: 20px;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 20px solid @white;
+        }
+
+        &:after {
+            margin-top: 1px;
+            border-top: 20px solid @gray;
+        }
+    }
+
+    &.left {
+        &:before, &:after {
+            top: 10px;
+            left: 100%;
+            margin-left: -1px;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-left: 20px solid @white;
+        }
+
+        &:after {
+            margin-left: 0;
+            border-left: 21px solid @gray;
+        }
+    }
+
+    &.right {
+        &:before, &:after {
+            top: 10px;
+            left: -19px;
+            margin: 0;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-right: 20px solid @white;
+        }
+
+        &:after {
+            left: -20px;
+            border-right: 20px solid @gray;
+        }
+    }
+}

data/app/assets/stylesheets/active_administration/breadcrumbs.less

@@ -0,0 +1,118 @@
+
+.breadcrumbs {
+    margin: 0.2em;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        overflow: hidden;
+        width: 100%;
+
+        li {
+            float: left;
+            margin: 0 .2em 0 1em;
+        }
+
+        li:first-child {
+            margin-left: 0 !important;
+            a:before {
+                content: normal;
+            }
+        }
+
+        li:last-child {
+            background: none;
+            a {
+                color: @dark;
+            }
+            &:after, &:before {
+                content: normal;
+            }
+        }
+
+        a {
+            background: @inputRestState;
+            padding: .3em 1em;
+            float: left;
+            text-decoration: none;
+            color: @linkColor;
+            position: relative;
+
+            &:hover {
+                background: @cyan;
+                color: @white;
+
+                &:before {
+                    border-color: @cyan @cyan @cyan transparent;
+                }
+
+                &:after {
+                    border-left-color: @cyan;
+                }
+            }
+
+            &:before {
+                content: "";
+                position: absolute;
+                top: 50%;
+                margin-top: -1.5em;
+                border-width: 1.5em 0 1.5em 1em;
+                border-style: solid;
+                border-color: #ddd #ddd #ddd transparent;
+                left: -1em;
+                margin-left: 1px;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 50%;
+                margin-top: -1.5em;
+                border-top: 1.5em solid transparent;
+                border-bottom: 1.5em solid transparent;
+                border-left: 1em solid #ddd;
+                right: -1em;
+                margin-right: 1px;
+            }
+        }
+
+        .active, .active:hover {
+            background: none;
+            a {
+                color: @dark;
+            }
+        }
+
+        .active:hover {
+            a {
+                color: @white;
+            }
+        }
+
+        .active {
+            &:after, &:before {
+                content: normal;
+            }
+        }
+    }
+
+    &.small {
+        li {
+            margin: 0 .2em 0 .8em;
+        }
+        a {
+            padding: .2em 1em;
+            font-size: 11.9px;
+        }
+    }
+    &.mini {
+        li {
+            margin: 0 .2em 0 .6em;
+        }
+        a {
+            padding: .1em 1em;
+            font-size: 10.5px;
+        }
+    }
+}