source: Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js @ 396

Last change on this file since 396 was 396, checked in by tjcschipper, 13 years ago
  • Modifiers property on LineWithActions? and selectors is gone! Yay! Colour handling now happens through a combination of up to four CSS classes.

    "red/blue/orange/green/purple/etc": These do not do anything in themselves, they just mark a certain element as being of that colour.
    "inheritBgColor": Any element that has this class assigned will adjust its color to the color class of their parents. A 'div.blue' has no colour itself, but a 'div.inheritBgColor' within that div will turn blue. It also adjusts text colour to white.
    "bg": Any element with this property will also take on any colour class assigned to itself. This overrides 'inheritBgColor' if the element has both classes, so you could still make an orange button in a 'blue' container if you wanted. If the element itself does not have a colour class, it will stay transparent. This also adjusts text colour to white.
    "light": This class modifies the inherited/set colour to its lighter version (see RFT Design Sheet). For example, it can be used when placing a blue BlockButton? on an already blue LineWithActions?: adding the light class will differentiate the button from the background.

For examples of how to implement/derive more specific style rules using these classes, see rftButtons.css.

  • Changed all widgets still using the 'modifiers' to assign proper colour classes where necessary. (For instance, changed Selector.js to always set its main buttons to "light".)
File size: 3.2 KB
Line 
1define(['dojo/_base/declare',
2        'dojo/_base/lang',
3        'dojo/on',
4        'dojo/dom',
5        'dojo/_base/event',
6        'dojo/dom-class',
7        'dijit/form/Button',
8        'dijit/_WidgetBase',
9        'dijit/_TemplatedMixin',
10        'dijit/_WidgetsInTemplateMixin',
11        'dojo/text!./templates/LineWithActionsWidget.html'
12        ],
13        function(declare,lang,on,dom,event,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
14                return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
15                        templateString: templateString,
16                        baseClass: 'rftLineWithButtons',
17                        title: '',
18                        selectable: false,
19                        userObject: null,
20
21                        actions: {},
22                        postCreate: function() {
23                                dom.setSelectable(this.domNode, false); // Text selection, has nothing to do with object selection!
24                                on(this.domNode,'click',lang.hitch(this,'_onClick'));
25                        },
26                        startup: function() {
27                                this.inherited(arguments);
28                                this._setupActions();
29                                domClass.add(this.domNode, "inheritBgColor bg");
30                                this.refresh();
31                        },
32                        _setupActions: function() {
33                                for (var action in this.actions) {
34                                        var properties;
35                                        if (this.actions[action].properties.blockButton == true) {
36                                                properties = lang.mixin({
37                                                        baseClass: 'rftBlockButton',
38                            "class": "inheritBgColor light",
39                                                        label: "Default",
40                                                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
41                                                        title: this.actions[action].properties.tooltip,
42                            onClick: lang.hitch(this, function(action, e){
43                                action.callback && action.callback(e);
44                                event.stop(e);
45                                return false;
46                            }, this.actions[action])
47                                                }, this.actions[action].properties);
48                        new Button(properties).placeAt(this.buttonsNode);
49                    } else {
50                        properties = lang.mixin({
51                            baseClass: 'rftInlineButton',
52                            label: "Default",
53                            showLabel: false,
54                            iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
55                            title: this.actions[action].properties.tooltip,
56                            onClick: lang.hitch(this, function(action, e){
57                                action.callback && action.callback(e);
58                                event.stop(e);
59                                return false;
60                            }, this.actions[action])
61                        }, this.actions[action].properties);
62                        new Button(properties).placeAt(this.buttonsNode);
63                    }
64                }
65            },
66            refresh: function() {
67                this.titleNode.innerHTML = this.title;
68            },
69            _onClick: function(e){
70                var preventDefault = this.onClick(e) === false;
71                if (preventDefault) {
72                    event.stop(e);
73                }
74                return !preventDefault;
75            },
76            onClick: function(e) {
77            },
78            _setTitleAttr: function(value){
79                this.title = value;
80                this.refresh();
81            }
82        });
83    });
Note: See TracBrowser for help on using the repository browser.