0251 / 590 837 15
info@a-coding-project.de
;

Seitentyp Dashboard Teil 2 (CMS)

In unserem CMS wird heute mal wieder am Dashboard rumgeschraubt. Die Menüicons werden erst mal verschoben (da ich doch lieber erst alle Seiten ins neue Design einbauen möchte und somit später nicht wieder alles umstellen muss).

Was wir heute machen ist ein startker Umbau des Dashboard-Designs. Bisher war das ganze ja relativ bunt. Man konnte sogar die Farben und den Titel ändern -> Übertrieben finde ich. Ich hab das ganze mal an unser neues Design angepasst und schlanker gemacht.

Um zu testen müsst ihr euch im alten „Admin-Bereich“ einen Ordner admin anlegen. Darin kommt dann das Dashboard mit dem alias dashbaord. Reche soll selbstvertändlich nur der Admin bekommen. Die ganzen Einstellungen bzgl. „Admin-Bereich“ in den ContentLion Core werden wir erst am Ende im Installer einbauen. Dann kommen auch noch Beispieldaten dazu.

Los geht’s heute mit der Datei /system/classes/dashboard.php. Diese bekommt ein „</div>“ dazu:

        <script type="text/javascript" src="/admin/inettuts.js"></script>
      <?PHP
      echo "</div>";
    }

Weiter geht’s mit der /system/classes/widgetbase.php. Wie oben bereits erwähnt wird es keine Möglichkeit mehr geben die Farben zu ändern (außer später über den Skin). Aus diesem Grund wird auch die Color-Eigenschaft entfernt und auch nicht mehr ans Template übergeben:

<?PHP
  abstract class WidgetBase{
    public $headline           = "";
    public $content            = "";
    public $minwidth           = -1;
    public $maxwidth           = -1;
    public $minheight          = -1;
    public $maxheight          = -1;
    public $displayType        = "default";
    public $allowDisplayRandom = true;
    public function display(){
      $template = new Template();
      $template->load("widget_".$this->displayType);
      $template->assign_var("HEADLINE",$this->headline);
      $template->assign_var("CONTENT",$this->content);
      $template->assign_var("MINWIDTH",$this->minwidth);
      $template->show_if("HASMINWIDTH",$this->minwidth != -1);
      $template->assign_var("MAXWIDTH",$this->maxwidth);
      $template->show_if("HASMAXWIDTH",$this->maxwidth != -1);
      $template->assign_var("MINHEIGHT",$this->miheight);
      $template->show_if("HASMINHEIGHT",$this->minheight != -1);
      $template->assign_var("MAXHEIGHT",$this->maxheight);
      $template->show_if("HASMAXHEIGHT",$this->maxheight != -1);
      $template->output();
    }

     public abstract function load();
  }
?>

Im Template /system/templates/widgets/dashboard.html können wir diese Eingenschaft nun auch herausnehmen:

<li class="widget">
  <div class="widget-head">
    <h3>{VAR:HEADLINE}</h3>
  </div>
  <div class="widget-content">
    {VAR:CONTENT}
  </div>
</li>

Jetzt kommt noch eine kleine Änderung im Stylesheet /system/skins/backenddefault/style.php. Die Breite des Contents soll nun immer 100% sein:

#content{
  padding:10px;
  position:absolute;
  bottom:26px;
  overflow:auto;
  top:155px;
  width:100%;
}

Für den Header der einzelnen Widgets brauchen wir das Bild /system/skins/backenddefault/images/bg_miniheader.png:

bg_miniheader

bg_miniheader

Das Bild wird nun in die Datei /admin/inettuts.css integriert. Dort habe ich außerdem noch ein paar margin und paddings angepasst und überflüssigen CSS-Code entfernt:

#columns a {color:white;}
#columns ul{list-style:none; border:none;}
#columns h3{margin:0; padding:0;}

/* Head section */
#head {
    background: #000 url(/admin/img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    background: url(/admin/img/inettuts.png) no-repeat center;
    text-indent: -9999em
}
/* End Head Section */

/* Columns section */
#columns .column {
    float: left;
    width: 32%;
    min-height: 400px;
    height: auto !important;
    height: 400px;
    padding:5px;
}

/* Column dividers (background-images) : */
#columns .widget {
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-bottom:5px;
    border: 1px solid #9f9f9f;
}
#columns .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #9f9f9f;
    background-image: url('/system/skins/backenddefault/images/bg_miniheader.png');
}
#columns .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columns .widget .widget-content {
    /*background: #333 url(/admin/img/widget-content-bg.png) repeat-x;*/
    background-color:#d4d4d4;
    padding: 0 5px;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
#columns .widget .widget-content p {
    padding: 0.8em 0;
}
#columns .widget .widget-content img {
    float: right;
    margin: 10px;
    border: 1px solid #FFF;
}
#columns .widget .widget-content pre {
    padding: 0.5em 5px;
    color: #EEE;
    font-size: 12px;
}
#columns .widget .widget-content ul {
    padding: 5px 0 5px 20px;
    list-style: disc;
}
#columns .widget .widget-content ul li {padding: 3px 0;}
#columns .widget .widget-content ul.images {
    padding: 7px 0 0 0;
    list-style: none;
    height: 1%;
}
#columns .widget .widget-content ul.images li {
    display: inline;
    float: left;
}
#columns .widget .widget-content ul.images img {
    display: inline;
    float: left;
    margin: 0 0 7px 7px;
}
/* End Columns section */

In der Datei /admin/inettuts.js.css habe ich die ganze Editbox entfernt:

/* JS-Enabled CSS */

.widget-head a.remove  {
    float: right;
    display: inline;
    background: url(/admin/img/buttons.gif) no-repeat -24px 0;
    width: 14px;
    height: 14px;
    margin: 8px 4px 8px 0;
    text-indent: -9999em;
    outline: none;
}

.widget-head a.edit  {
    float: right;
    display: inline;
    background: url(/admin/img/buttons.gif) no-repeat;
    width: 24px;
    height: 14px;
    text-indent: -9999em;
    margin: 8px 4px 8px 4px;
    outline: none;
}

.widget-head a.collapse  {
    float: left;
    display: inline;
    background: url(/admin/img/buttons.gif) no-repeat -52px 0;
    width: 14px;
    height: 14px;
    text-indent: -9999em;
    margin: 8px 0 8px 4px;
    outline: none;
}

.widget-placeholder { border: 2px dashed #999;}

Das gleiche habe ich auch in der Dazugehörigen /admin/inettuts.js gemacht:

/*
 * Script from NETTUTS.com [by James Padolsey]
 * @requires  jQuery($), jQuery UI & sortable/draggable UI modules
 */

var iNettuts = {

    jQuery : $,

    settings : {
        columns : '.column',
        widgetSelector: '.widget',
        handleSelector: '.widget-head',
        contentSelector: '.widget-content',
        widgetDefault : {
            movable: true,
            removable: true,
            collapsible: true
        },
        widgetIndividual : {
            intro : {
                movable: false,
                removable: false,
                collapsible: false
            }
        }
    },

    init : function () {
        this.attachStylesheet('/admin/inettuts.js.css');
        this.addWidgetControls();
        this.makeSortable();
    },

    getWidgetSettings : function (id) {
        var $ = this.jQuery,
            settings = this.settings;
        return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
    },

    addWidgetControls : function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings;

        $(settings.widgetSelector, $(settings.columns)).each(function () {
            var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
            if (thisWidgetSettings.removable) {
                $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                    e.stopPropagation();
                }).click(function () {
                    if(confirm('Dieses Widget wird entfernt, ok?')) {
                        $(this).parents(settings.widgetSelector).animate({
                            opacity: 0
                        },function () {
                            $(this).wrap('<div/>').parent().slideUp(function () {
                                $(this).remove();
                            });
                        });
                    }
                    return false;
                }).appendTo($(settings.handleSelector, this));
            }

            if (thisWidgetSettings.collapsible) {
                $('<a href="#" class="collapse">COLLAPSE</a>').mousedown(function (e) {
                    e.stopPropagation();
                }).toggle(function () {
                    $(this).css({backgroundPosition: '-38px 0'})
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).hide();
                    return false;
                },function () {
                    $(this).css({backgroundPosition: ''})
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).show();
                    return false;
                }).prependTo($(settings.handleSelector,this));
            }
        });

    },

    attachStylesheet : function (href) {
        var $ = this.jQuery;
        return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
    },

    makeSortable : function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings,
            $sortableItems = (function () {
                var notSortable = '';
                $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                    if (!iNettuts.getWidgetSettings(this.id).movable) {
                        if(!this.id) {
                            this.id = 'widget-no-id-' + i;
                        }
                        notSortable += '#' + this.id + ',';
                    }
                });
                return $('> li:not(' + notSortable + ')', settings.columns);
            })();

        $sortableItems.find(settings.handleSelector).css({
            cursor: 'move'
        }).mousedown(function (e) {
            $sortableItems.css({width:''});
            $(this).parent().css({
                width: $(this).parent().width() + 'px'
            });
        }).mouseup(function () {
            if(!$(this).parent().hasClass('dragging')) {
                $(this).parent().css({width:''});
            } else {
                $(settings.columns).sortable('disable');
            }
        });

        $(settings.columns).sortable({
            items: $sortableItems,
            connectWith: $(settings.columns),
            handle: settings.handleSelector,
            placeholder: 'widget-placeholder',
            forcePlaceholderSize: true,
            revert: 300,
            delay: 100,
            opacity: 0.8,
            containment: 'document',
            start: function (e,ui) {
                $(ui.helper).addClass('dragging');
            },
            stop: function (e,ui) {
                $(ui.item).css({width:''}).removeClass('dragging');
                $(settings.columns).sortable('enable');
            }
        });
    }

};

iNettuts.init();

In den nächsten Schritten werden wir die einzelnen Widgets im „Admin-Bereich“ einschalten lassen. Außerdem sollen alle verfügbaren Widgets(die im „Admin-Bereich“ eingestellt sind) angezeigt werden. Man soll diese so anordnen können wie man möchte (ohne das die Änderungen verloren gehen).

Kommentare

Tobias schrieb am 27.05.2010:

gibts die tage wieder nen einstiegspunkt -_- nach dem letzten hatte ich massig fehler tobi

Stefan Wienströer schrieb am 27.05.2010:

Kann ich machen. Du kannst dir den Quellcode als Zip aber auch jederzeit bei Codeplex runterladen. Dazu klickst Du einfach rechts auf Download: http://contentlion.codeplex.com/SourceControl/list/changesets Allerdings kann es sein, dass die Icons nicht richtig drin sind, weil ich grade ein Problem mit Subversion habe. Das wird aber in den nächsten Tagen wieder.