[tryton-dev] SAO: PoC CSS styling" (issue 909002)

[guillembarba]

Reviewers: ,

Description:
SAO: PoC CSS styling"
Please review this at http://codereview.tryton.org/909002/

Affected files:
  A css/sao.css
  M index.html
  M src/view.js


Index: css/sao.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/css/sao.css
@@ -0,0 +1,76 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-size: 12pt;
+}
+
+textarea {
+    width: 99%;
+}
+
+.ui-tabs .ui-tabs-panel {
+    padding: .5em .1em;
+}
+
+/* user-menu */
+#user-menu {
+    background-color: #ccc;
+}
+#user-menu > ul {
+    /*float: right;*/
+    margin: 0;
+    padding: 0;
+}
+#user-menu li > a {
+    padding: 5px;
+    background: #c2c2c2;
+}
+
+/* Main menu */
+#menu {
+    vertical-align: top;
+    padding-right: .5em;
+}
+#menu .treefooter {
+    display: none;
+}
+
+#tabs {
+    font-size: 0.8em;
+}
+
+/* Tree views */
+.treeview table.tree {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.treeview table th,
+.treeview table td {
+    padding: 8px;
+    line-height: 20px;
+    text-align: left;
+}
+.treeview table th {
+    vertical-align: bottom;
+}
+.treeview table td {
+    border-top: 1px solid #dddddd;
+    vertical-align: top;
+}
+.treeview table > tbody > tr:nth-child(odd) > td {
+    background-color: #f9f9f9;
+}
+.treeview .expander {
+    cursor: pointer;
+}
+.treeview td.column-boolean { /* TODO: add 'column-boolean' class to TD */
+    text-align: center;
+}
+.treeview .treefooter {
+    font-size: .8em;
+    text-align: center;
+    padding-top: 1em;
+}
+
+/* one2many widget */
Index: index.html
===================================================================
--- a/index.html
+++ b/index.html
@@ -20,7 +20,9 @@
                 document.write(unescape('%3CLINK rel="stylesheet"  
type="text/css"  
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css";  
media="screen"/%3E'));
             }
         </SCRIPT>
-        <SCRIPT type="text/javascript" src="dist/sao.min.js"></SCRIPT>
+        <SCRIPT type="text/javascript" src="dist/sao.js"></SCRIPT>
+        <LINK rel="stylesheet" type="text/css" href="css/sao.css"
+        media="screen"/>
         <SCRIPT type="text/javascript">
             if (typeof Sao == 'undefined') {
                 document.write(unescape('%3CSCRIPT type="text/javascript"  
src="dist/sao.js"%3E%3C/SCRIPT%3E'));
@@ -37,6 +39,17 @@
         </DIV>
         <SCRIPT type="text/javascript">
             jQuery(function() {
+                Sao.Session.get_credentials = function(parent_dfd) {
+                    var login = 'admin';
+                    var database = window.location.hash.replace(
+                            /^(#(!|))/, '') || null;
+                    var session = new Sao.Session('tryton_farm2',
+                            'admin');
+                    var prm = session.do_login('admin', 'admin');
+                    prm.done(function() {
+                        parent_dfd.resolve(session);
+                        });
+                    };
                 Sao.login();
             });
         </SCRIPT>
Index: src/view.js
===================================================================
--- a/src/view.js
+++ b/src/view.js
@@ -261,6 +261,9 @@
                             update_expander.bind(this));
                 }
                 var column = this.tree.columns[i];
+                if (column.attributes.widget == 'boolean') {
+                    td.addClass('column-boolean');
+                }
                 td.append(column.render(this.record));
                 this.el.append(td);
             }
@@ -1551,7 +1554,7 @@
                 'class': this.class_
             });
             this.menu = jQuery('<div/>', {
-                'class': this.class_ + '-menu'
+                'class': this.class_ + '-menu' + ', ui-widget-header'
             });
             this.el.append(this.menu);

@@ -1650,7 +1653,7 @@
             this.menu.append(this.but_switch);

             this.content = jQuery('<div/>', {
-                'class': this.class_ + '-content'
+                'class': this.class_ + '-content' + ', ui-widget-content'
             });
             this.el.append(this.content);