Layout config test

by hhcofcmds

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.5/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.5/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<div ng-app="MyApp" ng-controller="DefController as ctrl">
  <div class="definition-panel">
    <div>
      <select ng-model="ctrl.columns">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      Columns in the layout
      <input type="checkbox" id="fullwidthscreen" ng-model="ctrl.fullwidthscreen">
      <label for="fullwidthscreen">Full width screen</label>
    </div>
    <div class="definition-item" ng-repeat="def in ctrl.definitions">
      <input type="text" ng-model="def.name">
      <select ng-model="def.size">
        <option ng-repeat="size in ctrl.sizeOptions" value="{{size}}">
          {{size}}
        </option>
      </select>
      <input type="checkbox" id="fullwidth" ng-model="def.fullwidth">
      <label for="fullwidth">full width</label>
    </div>
    <md-button class="md-raised" ng-click="ctrl.add()">Add</md-button>
  </div>
  <div class="properties-wrapper" ng-class="{fullwidth: ctrl.fullwidthscreen}">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>
          Properties panel example
        </h2>
      </div>
    </md-toolbar>
    <div class="properties-panel" layout="row">
      <md-input-container ng-repeat="def in ctrl.definitions" flex="{{ctrl.getFlexValueFor(def)}}" style="flex-grow: 0; flex-shrink: 0">
        <label>{{def.name}}</label>
  ...

CSS

* {
  box-sizing: border-box;
}
textarea {
  width: 100%;
  min-height: 200px;
}
.properties-wrapper {
  padding: 10pt;
  max-width: 850px;
  margin: auto;
}
.properties-wrapper.fullwidth {
  max-width: 100%;
}
.properties-panel {
  border: 1px solid #eee;
  width: 100%;
  flex-wrap: wrap;
  box-shadow: #888 2px 2px 2px;
}

JavaScript

angular.module('MyApp', ['ngMaterial'])
.controller("DefController", function($scope) {
  this.definitions = [{name: 'field1', size: "1"}, {name: 'field2', size: "1"}, {name: 'field3', size: "1"}];
  this.sizeOptions = ["1", "2", "0.5", "0.33"];
  this.columns = "2";
  this.add = function() {
    this.definitions.push({ size: "1"});
  }
  this.getFlexValueFor = function(def) {
    if (def.fullwidth) { return "100"; }
    var val = Math.floor(100 / parseInt(this.columns) * parseFloat(def.size));
    if (val != 33 && val != 66) val = Math.round(val/5)*5;	 // multiple of 5
    return val;
  }
});