Iterate on gridbox

Author: SylvainCorlay

docs/source/examples/Widget Styling.ipynb

@@ -23,5 +23,5 @@
 from .widget_controller import Controller
 from .interaction import interact, interactive, fixed, interact_manual, interactive_output
 from .widget_link import jslink, jsdlink
-from .widget_layout import Layout, GridLayout, GridItemLayout
+from .widget_layout import Layout
 from .widget_style import Style

docs/source/examples/images/grid-area.png

@@ -6,7 +6,7 @@
 from traitlets import Unicode
 from .widget import Widget, widget_serialization
 from .trait_types import InstanceDict, TypedTuple
-from .widget_layout import Layout, GridLayout, GridItemLayout
+from .widget_layout import Layout
 from .widget_style import Style
 
 
@@ -16,8 +16,6 @@ class DOMWidget(Widget):
     _model_name = Unicode('DOMWidgetModel').tag(sync=True)
     _dom_classes = TypedTuple(trait=Unicode(), help="CSS classes applied to widget DOM element").tag(sync=True)
     layout = InstanceDict(Layout).tag(sync=True, **widget_serialization)
-    grid_layout = InstanceDict(GridLayout).tag(sync=True, **widget_serialization)
-    grid_item_layout = InstanceDict(GridItemLayout).tag(sync=True, **widget_serialization)
 
     def add_class(self, className):
         """

docs/source/examples/images/grid-cell.png

@@ -108,6 +108,7 @@ class HBox(Box):
     _model_name = Unicode('HBoxModel').tag(sync=True)
     _view_name = Unicode('HBoxView').tag(sync=True)
 
+
 @register
 class GridBox(Box):
     _model_name = Unicode('GridBoxModel').tag(sync=True)

docs/source/examples/images/grid-justify-self-center.png

@@ -61,6 +61,14 @@ class Layout(Widget):
     visibility = CaselessStrEnum(['visible', 'hidden']+CSS_PROPERTIES, allow_none=True, help="The visibility CSS attribute.").tag(sync=True)
     width = Unicode(None, allow_none=True, help="The width CSS attribute.").tag(sync=True)
 
+    grid_auto_columns = Unicode(None, allow_none=True, help="The grid-auto-columns CSS attribute.").tag(sync=True)
+    grid_auto_flow = CaselessStrEnum(['column','row','row dense','column dense']+ CSS_PROPERTIES, allow_none=True, help="The grid-auto-flow CSS attribute.").tag(sync=True)
+    grid_auto_rows = Unicode(None, allow_none=True, help="The grid-auto-rows CSS attribute.").tag(sync=True)
+    grid_gap = Unicode(None, allow_none=True, help="The grid-gap CSS attribute.").tag(sync=True)
+    grid_template = Unicode(None, allow_none=True, help="The grid-template CSS attribute.").tag(sync=True)
+    grid_row = Unicode(None, allow_none=True, help="The grid-row CSS attribute.").tag(sync=True)
+    grid_column = Unicode(None, allow_none=True, help="The grid-column CSS attribute.").tag(sync=True)
+
 
 class LayoutTraitType(Instance):
 
@@ -71,34 +79,3 @@ def validate(self, obj, value):
             return super(LayoutTraitType, self).validate(obj, self.klass(**value))
         else:
             return super(LayoutTraitType, self).validate(obj, value)
-
-@register
-class GridLayout(Widget):
-
-    _view_name = Unicode('GridLayoutView').tag(sync=True)
-    _view_module = Unicode('@jupyter-widgets/base').tag(sync=True)
-    _view_module_version = Unicode(__jupyter_widgets_base_version__).tag(sync=True)
-    _model_name = Unicode('GridLayoutModel').tag(sync=True)
-
-    # Keys
-    auto_columns = Unicode(None, allow_none=True, help="The grid-auto-columns CSS attribute.").tag(sync=True)
-    auto_flow = CaselessStrEnum(['column','row','row dense','column dense']+ CSS_PROPERTIES, allow_none=True, help="The grid-auto-flow CSS attribute.").tag(sync=True)
-    auto_rows = Unicode(None, allow_none=True, help="The grid-auto-rows CSS attribute.").tag(sync=True)
-    row_gap = Unicode(None, allow_none=True, help="The grid-row-gap CSS attribute.").tag(sync=True)
-    column_gap = Unicode(None, allow_none=True, help="The grid-column-gap CSS attribute.").tag(sync=True)
-    template_areas = Unicode(None, allow_none=True, help="The grid-template-areas CSS attribute.").tag(sync=True)
-    template_columns = Unicode(None, allow_none=True, help="The grid-template-columns CSS attribute.").tag(sync=True)
-    template_rows = Unicode(None, allow_none=True, help="The grid-template-rows CSS attribute.").tag(sync=True)
-
-
-@register
-class GridItemLayout(Widget):
-    _view_name = Unicode('GridItemLayoutView').tag(sync=True)
-    _view_module = Unicode('@jupyter-widgets/base').tag(sync=True)
-    _view_module_version = Unicode(__jupyter_widgets_base_version__).tag(sync=True)
-    _model_name = Unicode('GridItemLayoutModel').tag(sync=True)
-
-    row_start = Unicode(None, allow_none=True, help="The row-start CSS attribute.").tag(sync=True)
-    column_start = Unicode(None, allow_none=True, help="The grid-column-start CSS attribute.").tag(sync=True)
-    row_end = Unicode(None, allow_none=True, help="The grid-row-end CSS attribute.").tag(sync=True)
-    column_end = Unicode(None, allow_none=True, help="The grid-column-end CSS attribute.").tag(sync=True)

docs/source/examples/images/grid-justify-self-end.png

@@ -566,8 +566,6 @@ class DOMWidgetModel extends WidgetModel {
     static serializers: ISerializers = {
         ...WidgetModel.serializers,
         layout: {deserialize: unpack_models},
-        grid_layout: {deserialize: unpack_models},
-        grid_item_layout: {deserialize: unpack_models},
         style: {deserialize: unpack_models},
     };
 
@@ -751,17 +749,7 @@ class DOMWidgetView extends WidgetView {
 
         this.layoutPromise = Promise.resolve();
         this.listenTo(this.model, 'change:layout', (model, value) => {
-            this.setLayout('layoutPromise', value, model.previous('layout'));
-        });
-
-        this.gridLayoutPromise = Promise.resolve();
-        this.listenTo(this.model, 'change:grid_layout', (model, value) => {
-            this.setLayout('gridLayoutPromise', value, model.previous('grid_layout'));
-        });
-
-        this.gridItemLayoutPromise = Promise.resolve();
-        this.listenTo(this.model, 'change:grid_item_layout', (model, value) => {
-            this.setLayout('gridItemLayoutPromise', value, model.previous('grid_item_layout'));
+            this.setLayout(value, model.previous('layout'));
         });
 
         this.stylePromise = Promise.resolve();
@@ -771,9 +759,7 @@ class DOMWidgetView extends WidgetView {
 
         this.displayed.then(() => {
             this.update_classes([], this.model.get('_dom_classes'));
-            this.setLayout('layoutPromise', this.model.get('layout'));
-            this.setLayout('gridLayoutPromise', this.model.get('grid_layout'));
-            this.setLayout('gridItemLayoutPromise', this.model.get('grid_item_layout'));
+            this.setLayout(this.model.get('layout'));
             this.setStyle(this.model.get('style'));
         });
 
@@ -783,9 +769,9 @@ class DOMWidgetView extends WidgetView {
         });
     }
 
-    setLayout(layoutAttrName, layout, oldLayout?) {
+    setLayout(layout, oldLayout?) {
         if (layout) {
-            this[layoutAttrName] = this[layoutAttrName].then((oldLayoutView) => {
+            this.layoutPromise = this.layoutPromise.then((oldLayoutView) => {
                 if (oldLayoutView) {
                     oldLayoutView.unlayout();
                     this.stopListening(oldLayoutView.model);
@@ -932,7 +918,5 @@ class DOMWidgetView extends WidgetView {
     '$el': any;
     pWidget: Widget;
     layoutPromise: Promise<any>;
-    gridLayoutPromise: Promise<any>;
-    gridItemLayoutPromise: Promise<any>;
     stylePromise: Promise<any>;
 }

docs/source/examples/images/grid-justify-self-start.png

@@ -38,28 +38,20 @@ let css_properties = {
     right: null,
     top: null,
     visibility: null,
-    width: null
+    width: null,
+
+    // container
+    grid_auto_columns: null,
+    grid_auto_flow: null,
+    grid_auto_rows: null,
+    grid_gap: null,
+    grid_template: null,
+
+    // items
+    grid_row: null,
+    grid_column: null
 };
 
-let grid_css_properties = {
-    auto_columns: null,
-    auto_flow: null,
-    auto_rows: null,
-    row_gap: null,
-    column_gap: null,
-    template_areas: null,
-    template_columns: null,
-    template_rows: null
-};
-
-let grid_item_css_properties = {
-    row_start: null,
-    column_start: null,
-    row_end: null,
-    column_end: null
-}
-
-
 export
 class LayoutModel extends WidgetModel {
     defaults() {
@@ -72,19 +64,14 @@ class LayoutModel extends WidgetModel {
 
 export
 class LayoutView extends WidgetView {
-  constructor(options?: Backbone.ViewOptions<LayoutModel> & {options?: any}) {
-      super(options);
-  }
     /**
      * Public constructor
      */
     initialize(parameters) {
         this._traitNames = [];
         super.initialize(parameters);
-        // Allowing override of default css_properties
-        const {options: {css_props = css_properties}} = parameters;
         // Register the traits that live on the Python side
-        for (let key of Object.keys(css_props)) {
+        for (let key of Object.keys(css_properties)) {
             this.registerTrait(key);
         }
     }
@@ -111,7 +98,7 @@ class LayoutView extends WidgetView {
      * @return css property name
      */
     css_name(trait: string): string {
-        return trait.replace(new RegExp('_', 'g'), '-');
+        return trait.replace('_', '-');
     }
 
     /**
@@ -145,61 +132,5 @@ class LayoutView extends WidgetView {
         }, this);
     }
 
-    protected _traitNames: string[];
-}
-
-export
-class GridLayoutModel extends WidgetModel {
-    defaults() {
-        return assign(super.defaults(), {
-        _model_name: 'GridLayoutModel',
-        _view_name: 'GridLayoutView'
-        }, grid_css_properties);
-    }
-}
-
-export
-class GridLayoutView extends LayoutView {
-    /**
-     * Public constructor
-     */
-     initialize(parameters) {
-         const options = {...parameters.options, css_props: grid_css_properties};
-         super.initialize({...parameters, options});
-     }
-
-     /**
-      * Get the the name of the css property from the trait name
-      * @param  model attribute name
-      * @return css property name
-      */
-     css_name(trait: string): string {
-         return `grid-${trait.replace(new RegExp('_', 'g'), '-')}`;
-     }
-}
-
-
-export
-class GridItemLayoutModel extends WidgetModel {
-    defaults() {
-        return assign(super.defaults(), {
-        _model_name: 'GridItemLayoutModel',
-        _view_name: 'GridItemLayoutView'
-      }, grid_item_css_properties);
-    }
-}
-
-export
-class GridItemLayoutView extends LayoutView {
-  /**
-   * Public constructor
-   */
-   initialize(parameters) {
-     const options = {...parameters.options, css_props: grid_item_css_properties};
-     super.initialize({...parameters, options});
-   }
-
-   css_name(trait: string): string {
-       return `grid-${trait.replace(new RegExp('_', 'g'), '-')}`;
-   }
+    private _traitNames: string[];
 }