Changeset 344 for Dev/branches/rest-dojo-ui/client/mSessions.html

Timestamp:

06/20/12 19:07:01 (13 years ago)

Author:

tjcschipper

Message:

• mSessions.html is more or less done
• mMenu.html is nearly done, still needs non-hover overlays on the menu boxes/buttons
• Fixed theme dependency, style overrides now work on a stock copy of Dojo claro theme!
• Improved iconset alignment somewhat, still needs pixel tweaks to rftIcons24.png and rftIcons16.png (Icons are sometimes 1px too wide!)
• Fixed MainMenu? template and applied styling classes. Replaced markup version with rft.ui.MainMenu? version in all mockups.
• Fixed colour settings/context on LineWithButtons?

File:

• Dev/branches/rest-dojo-ui/client/mSessions.html (modified) (5 diffs)

Dev/branches/rest-dojo-ui/client/mSessions.html

@@ -4 +4 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Research Facilitator Tool</title>
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
+        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
         <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
         <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
@@ -43 +43 @@
                 'rft/ui/SelectorThijs',
                 'rft/ui/LineWithActionsWidgetThijs',
+                'rft/ui/ObjectBox',
                 'rft/ui/TitleGroup',
                 'dojo/domReady!'
@@ -51 +52 @@
         <script>
             function createNew(){
-                /* There is no way this should be handled as such. Create an rftSessionBar templated widget for this! */
-                
-                require([
-                    'dojo/_base/array',
-                    'dojo/query',
-                    'dojo/dom-construct'
-                ], function(array, query, domConstruct){
-                    var props1 = {
-                        title: 'Session name',
-                        modifiers: 'purple',
-                        actions: {
-                            "Inspect": {
-                                callback: function(){alert("Info display!");},
-                                properties: {
-                                    modifiers: 'trans',
-                                    blockButton: false
-                                }
-                            }
-                        }
-                    };
-                    var props2 = {
-                        modifiers: 'purple',
-                        title: 'Creator and creation date'
-                    };
-                    var props3 = {
-                        modifiers: 'purple',
-                        actions: {
-                            "FullArrowUp": {
-                                callback: function(){alert("Moving up...");},
-                                properties: {
-                                    modifiers: 'trans',
-                                    blockButton: true}
-                            },
-                            "FullArrowDown": {
-                                callback: function(){alert("Moving down...");},
-                                properties: {
-                                    blockButton: true,
-                                    modifiers: 'trans'
-                                }
-                            }
-                        }
-                    };
-                    // Tab container div
-                    var container = array.filter(query(".dijitContentPane"), function(item){
-                        return item.id.toLowerCase() == "mainOne".toLowerCase();
-                    })[0];
-                    // rftSessionBar root node
-                    var root = domConstruct.create("div", {
-                        className: "rftSessionBar"
-                    }, container);
-                    // Icon
-                    domConstruct.create("div", {
-                        className: "rftIcon typeIcon rftIconSession"
-                    }, root);
-                    var line1 = new rft.ui.LineWithActionsWidgetThijs(props1).placeAt(root);
-                    var line2 = new rft.ui.LineWithActionsWidgetThijs(props2).placeAt(root);
-                    var line3 = new rft.ui.LineWithActionsWidgetThijs(props3).placeAt(root);
-                    line1.startup();
-                    line2.startup();
-                    line3.startup();
-                    
+                debugger;
+                var newBox = new rft.ui.ObjectBox({
+                    title: 'TeamUp Basic Template',
+                    subTitle: '',
+                    lowerTitle: '',
+                    objectType: 'SessionTemplate',
+                    actions: {
+                        "edit": function() {},
+                        "delete": function() {}
+                    }
                 });
+                newBox.startup();
+                newBox.placeAt("containerTemplates", "last");
+            }
+            
+            function createInstance(args) {
+            // Create a template instance in the "Sessions" tab
+            debugger;
+            var args;
+            args.objectType = "Session";
+            var d = new Date();
+            var dateString = d.getDate()+"-"+d.getMonth()+"-"+d.getFullYear();
+            var creator = "Igor Mayer"; // Use currently logged in profile instead!
+            args.subTitle = "Created on "+dateString+" by "+creator;
+            
+            args.actions = {
+                        "edit": function() {},
+                        "delete": function() {}
+                    }
+            var newBox = new rft.ui.ObjectBox(args);
+            newBox.startup();
+            newBox.placeAt("containerSessions", "last");
+            // TODO: Then switch tabs to the Sessions tab!
             }
             
@@ -125 +97 @@
             <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                 <h1>ResearchTool</h1>
-                <div data-dojo-type="dijit.MenuBar">
-                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
-                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
-                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
-                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
-                </div>
+                <div data-dojo-type="rft.ui.MainMenu"></div>
                 <div class="breadcrumbs">
                     <span class="breadcrumb">User > </span>
@@ -147 +114 @@
                     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
                         <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Templates" id="mainOne">
-
-                                <div class="rftSessionBar">
-                                    <div class="rftIcon typeIcon rftIconSession"></div>
-                                    <div style="font-weight: bold;" data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Teamup 25-5-2012" data-dojo-props="modifiers: 'green', actions: {'Inspect':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', showLabel: false}}}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="Created by Arne Bezuijen on 25-01-2012 15:19" data-dojo-props="modifiers: 'green', actions: {}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" title="" data-dojo-props="modifiers: 'green', actions: {'FullArrowUp':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Publish'}}, 'Cancel':{callback: function(){}, properties: {blockButton: true, modifiers: 'trans', label: 'Delete'}},'Accept':{callback: function(){this.set('title','NEW TITLE YO');}, properties: {blockButton: true, modifiers: 'trans', label:'Edit/View'}}}"></div>
+                            <div data-dojo-type="dijit.layout.BorderContainer" title="Templates">
+                                <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
+                                    <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'New Command': function(){alert('newCommand');}, 'publish': createInstance}"></div>
                                 </div>
-
-                                <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
-
+                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
+                                    <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSession', onClick: createNew">Create new session</div>
+                                </div>
                             </div>
                             <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
-
+                                <div id="containerSessions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
+                                    
+                                </div>
+                                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
+                                    <!-- Buttons? -->
+                                </div>
                             </div>
                         </div>