Webawy frontpage has a dashboard widgets. These dashboard widgets consists of
a css code js/dashboard.css, jquery code js/dashboard.js, and
html code inside the Frontpage template, and finally jquery js code for
initialization and settings in the Frontpage template.
Each widget has a header which contains a title and three icons, these icons
for, collapsing the widget, hidding the widget, and ediing the widget
color.
Each widget has the following html code:
<li class="widget color-blue" id="widget_id" style="z-index: 2000;">
<div class="widget-head"><h3>widget_title</h3></div>
<div class="widget-content " style="z-index: 9999;">
widget_contents
</div>
</li>
Each widget must have uniqe id in the li element, in the above example the
unique id="widget_id", replace widget_id with a unique name
for each widget.
You set the widget_title and widget_contents to anything you want.
You can control each widget color by the preset color classes in the
dashboard.css files, in the above html code you will find:
class="widget color-blue"
you can replace the preset css class color-blue by any other class from these
preset classes:
color-red, color-blue, color-green, color-purpple, color-white, color-orange,
color-yellow, color-gray, color-pink, color-black
You can edit the file dashboard.css and add your own color classes and use them
to change the widgets colors.
The Collapse icon in the widget header allows the users to collapse/expand the
widget.
The Close icon allows the users to hide specific widget.
The edit/setting icon allows the users to change each specific widgets colors
individually.
You can control each individual widget icons and editing colors by passing these
settings in the dashboard init function in the Frontpage tempate:
widgetIndividual : {
search : {
'movable': false,
'removable': true,
'collapsible': true,
'editable': true,
colorClasses : ['color-red', 'color-blue', 'color-green',
'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray',
'color-pink', 'color-black' ]
}
}
In the above js code, you control the "search" widget by setting the options
'movable', 'removable', 'collapsible', 'editable' to either false or true.
the option "colorClasses" is array of color classes if the editable enabled
that will be shown for the user to select from.
To set the options for two or more widgets, do not forget the comma after each
widget setting, example:
widgetIndividual : {
search : {
'movable': false,
'removable': true,
'collapsible': true,
editable: true,
colorClasses : ['color-red', 'color-blue', 'color-green',
'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray',
'color-pink', 'color-black' ]
},
weather : {
'movable': false,
'removable': true,
'collapsible': true,
editable: true,
colorClasses : ['color-red', 'color-blue', 'color-green',
'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray',
'color-pink', 'color-black' ]
},
langauge : {
'movable': false,
'removable': true,
'collapsible': true,
editable: true,
colorClasses : ['color-red', 'color-blue', 'color-green',
'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray',
'color-pink', 'color-black' ]
}
}
In the above code the settings for three widgets search, weather, and
language, you can change the settings for each widget individually as you like.
|
