MODULE-TYPO

- Sass set-up
- md-list
- md-theming (install)

UI/WebServerResources/scss/vendors/angular-material/components/button/button-theme.scss

@@ -0,0 +1,84 @@
+$button-border-radius: 3px !default;
+$button-fab-border-radius: 50% !default;
+
+.md-button.md-THEME_NAME-theme {
+  border-radius: $button-border-radius;
+
+  &:not([disabled]) {
+    &:hover, 
+    &:focus {
+      background-color: '{{background-500-0.2}}';
+    }
+  }
+
+  &.md-primary {
+    color: '{{primary-color}}';
+    &.md-raised,
+    &.md-fab {
+      color: '{{primary-contrast}}';
+      background-color: '{{primary-color}}';
+      &:not([disabled]) {
+        &:hover, 
+        &:focus {
+          background-color: '{{primary-600}}';
+        }
+      }
+    }
+  }
+
+  &.md-fab {
+    border-radius: $button-fab-border-radius;
+  }
+
+  &.md-raised,
+  &.md-fab {
+    color: '{{background-contrast}}';
+    background-color: '{{background-500-0.185}}';
+    &:not([disabled]) {
+      &:hover, 
+      &:focus {
+        background-color: '{{background-500-0.3}}';
+      }
+    }
+  }
+
+  &.md-warn {
+    color: '{{warn-color}}';
+
+    &.md-raised,
+    &.md-fab {
+      color: '{{warn-contrast}}';
+      background-color: '{{warn-color}}';
+      &:not([disabled]) {
+        &:hover, 
+        &:focus {
+          background-color: '{{warn-700}}';
+        }
+      }
+    }
+  }
+
+  &.md-accent {
+    color: '{{accent-color}}';
+
+    &.md-raised,
+    &.md-fab {
+      color: '{{accent-contrast}}';
+      background-color: '{{accent-color}}';
+      &:not([disabled]) {
+        &:hover, 
+        &:focus {
+          background-color: '{{accent-700}}';
+        }
+      }
+    }
+  }
+
+  &[disabled],
+  &.md-raised[disabled],
+  &.md-fab[disabled] {
+    color: '{{foreground-3}}';
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+}

UI/WebServerResources/scss/vendors/angular-material/components/button/button.js

@@ -0,0 +1,87 @@
+(function() {
+'use strict';
+
+/**
+ * @ngdoc module
+ * @name material.components.button
+ * @description
+ *
+ * Button
+ */
+angular.module('material.components.button', [
+  'material.core'
+])
+  .directive('mdButton', MdButtonDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdButton
+ * @module material.components.button
+ *
+ * @restrict E
+ *
+ * @description
+ * `<md-button>` is a button directive with optional ink ripples (default enabled).
+ *
+ * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
+ * become a `<button>` element.
+ *
+ * @param {boolean=} md-no-ink If present, disable ripple ink effects.
+ * @param {expression=} ng-disabled En/Disable based on the expression
+ * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
+ * If no default text is found, a warning will be logged.
+ *
+ * @usage
+ * <hljs lang="html">
+ *  <md-button>
+ *    Button
+ *  </md-button>
+ *  <md-button href="http://google.com" class="md-button-colored">
+ *    I'm a link
+ *  </md-button>
+ *  <md-button ng-disabled="true" class="md-colored">
+ *    I'm a disabled button
+ *  </md-button>
+ * </hljs>
+ */
+function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria) {
+
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: getTemplate,
+    link: postLink
+  };
+
+  function isAnchor(attr) {
+    return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref);
+  }
+  
+  function getTemplate(element, attr) {
+    return isAnchor(attr) ?
+           '<a class="md-button" ng-transclude></a>' :
+           '<button class="md-button" ng-transclude></button>';
+  }
+
+  function postLink(scope, element, attr) {
+    var node = element[0];
+    $mdTheming(element);
+    $mdInkRipple.attachButtonBehavior(scope, element);
+
+    var elementHasText = node.textContent.trim();
+    if (!elementHasText) {
+      $mdAria.expect(element, 'aria-label');
+    }
+
+    // For anchor elements, we have to set tabindex manually when the 
+    // element is disabled
+    if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
+      scope.$watch(attr.ngDisabled, function(isDisabled) {
+        element.attr('tabindex', isDisabled ? -1 : 0);
+      });
+    }
+  }
+
+}
+})();

UI/WebServerResources/scss/vendors/angular-material/components/button/button.scss

@@ -0,0 +1,173 @@
+$button-line-height: 25px !default;
+$button-padding: 2px 6px 3px !default;
+
+// Fab buttons
+$button-fab-width: 56px !default;
+$button-fab-height: 56px !default;
+$button-fab-padding: 16px !default;
+
+$button-fab-toast-offset: $button-fab-height * 0.75;
+
+/**
+ * Position a FAB button.
+ */
+@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
+  &.md-fab-#{$spot} {
+    top: $top;
+    right: $right;
+    bottom: $bottom;
+    left: $left;
+    position: absolute;
+  }
+}
+
+.md-button {
+
+  user-select: none;
+  position: relative; //for child absolute-positioned <canvas>
+
+  outline: none;
+  border: 0;
+  padding: 6px;
+  margin: 0;
+  background: transparent;
+  white-space: nowrap;
+
+  text-align: center;
+
+  // Always uppercase buttons
+  text-transform: uppercase;
+  font-weight: 500;
+  font-style: inherit;
+  font-variant: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  text-decoration: none;
+
+  cursor: pointer;
+  overflow: hidden;   // for ink containment
+
+  transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
+              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
+              transform $swift-ease-out-duration $swift-ease-out-timing-function;
+
+  &.ng-hide {
+    transition: none;
+  }
+;
+
+  &.md-cornered {
+    border-radius: 0;
+  }
+
+  &.md-icon {
+    padding: 0;
+    background: none;
+  }
+
+  &.md-raised {
+    transform: translate3d(0, 0, 0);
+
+    &:not([disabled]) {
+      @extend .md-shadow-bottom-z-1;
+    }
+  }
+
+  &.md-fab {
+
+    @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
+    @include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
+    @include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
+    @include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);
+
+    z-index: $z-index-fab;
+
+    width: $button-fab-width;
+    height: $button-fab-height;
+
+    border-radius: 50%;
+
+    @extend .md-shadow-bottom-z-1;
+    border-radius: 50%;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    transition: 0.2s linear;
+    transition-property: transform, box-shadow;
+
+    md-icon {
+      line-height: $button-fab-height;
+      margin-top: 0;
+    }
+
+  }
+
+  &:not([disabled]) {
+    &.md-raised,
+    &.md-fab {
+      &:focus,
+      &:hover {
+        transform: translate3d(0, -1px, 0);
+        @extend .md-shadow-bottom-z-2;
+      }
+    }
+  }
+}
+
+.md-toast-open-top {
+  .md-button.md-fab-top-left,
+  .md-button.md-fab-top-right {
+    transform: translate3d(0, $button-fab-toast-offset, 0);
+    &:not([disabled]) {
+      &:focus,
+      &:hover {
+        transform: translate3d(0, $button-fab-toast-offset - 1, 0);
+      }
+    }
+  }
+}
+.md-toast-open-bottom {
+  .md-button.md-fab-bottom-left,
+  .md-button.md-fab-bottom-right {
+    transform: translate3d(0, -$button-fab-toast-offset, 0);
+    &:not([disabled]) {
+      &:focus,
+      &:hover {
+        transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
+      }
+    }
+  }
+}
+
+
+.md-button-group {
+  display: flex;
+  flex: 1;
+  width: 100%;
+}
+.md-button-group > .md-button {
+  flex: 1;
+
+  display: block;
+
+  overflow: hidden;
+
+  width: 0;
+
+  border-width: 1px 0px 1px 1px;
+  border-radius: 0;
+
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:first-child {
+    border-radius: 2px 0px 0px 2px;
+  }
+  &:last-child {
+    border-right-width: 1px;
+    border-radius: 0px 2px 2px 0px;
+  }
+}

UI/WebServerResources/scss/vendors/angular-material/components/button/button.spec.js

@@ -0,0 +1,91 @@
+describe('md-button', function() {
+
+  beforeEach(TestUtil.mockRaf);
+  beforeEach(module('material.components.button'));
+
+  it('should convert attributes on an md-button to attributes on the generated button', inject(function($compile, $rootScope) {
+    var button = $compile('<md-button hide hide-sm></md-button>')($rootScope);
+    $rootScope.$apply();
+    expect(button[0].hasAttribute('hide')).toBe(true);
+    expect(button[0].hasAttribute('hide-sm')).toBe(true);
+  }));
+
+  it('should only have one ripple container when a custom ripple color is set', inject(function ($compile, $rootScope, $timeout) {
+    var button = $compile('<md-button md-ink-ripple="#f00">button</md-button>')($rootScope);
+    var scope = button.eq(0).scope();
+    scope._onInput({ isFirst: true, eventType: Hammer.INPUT_START, center: { x: 0, y: 0 } });
+    expect(button[0].getElementsByClassName('md-ripple-container').length).toBe(1);
+  }));
+
+
+  it('should expect an aria-label if element has no text', inject(function($compile, $rootScope, $log) {
+    spyOn($log, 'warn');
+    var button = $compile('<md-button><md-icon></md-icon></md-button>')($rootScope);
+    $rootScope.$apply();
+    expect($log.warn).toHaveBeenCalled();
+
+    $log.warn.reset();
+    button = $compile('<md-button aria-label="something"><md-icon></md-icon></md-button>')($rootScope);
+    $rootScope.$apply();
+    expect($log.warn).not.toHaveBeenCalled();
+  }));
+
+
+  describe('with href or ng-href', function() {
+
+    it('should be anchor if href attr', inject(function($compile, $rootScope) {
+      var button = $compile('<md-button href="/link">')($rootScope.$new());
+      $rootScope.$apply();
+      expect(button[0].tagName.toLowerCase()).toEqual('a');
+    }));
+
+    it('should be anchor if ng-href attr', inject(function($compile, $rootScope) {
+      var button = $compile('<md-button ng-href="/link">')($rootScope.$new());
+      $rootScope.$apply();
+      expect(button[0].tagName.toLowerCase()).toEqual('a');
+    }));
+
+    it('should be button otherwise', inject(function($compile, $rootScope) {
+      var button = $compile('<md-button>')($rootScope.$new());
+      $rootScope.$apply();
+      expect(button[0].tagName.toLowerCase()).toEqual('button');
+    }));
+
+  });
+
+
+  describe('with ng-disabled', function() {
+
+    it('should not set `tabindex` when used without anchor attributes', inject(function ($compile, $rootScope, $timeout) {
+      var scope = angular.extend( $rootScope.$new(), { isDisabled : true } );
+      var button = $compile('<md-button ng-disabled="isDisabled">button</md-button>')(scope);
+      $rootScope.$apply();
+
+      expect(button[0].hasAttribute('tabindex')).toBe(false);
+    }));
+
+    it('should set `tabindex == -1` when used with href', inject(function ($compile, $rootScope, $timeout) {
+      var scope = angular.extend( $rootScope.$new(), { isDisabled : true } );
+      var button = $compile('<md-button ng-disabled="isDisabled" href="#nowhere">button</md-button>')(scope);
+
+      $rootScope.$apply();
+      expect(button.attr('tabindex')).toBe("-1");
+
+      $rootScope.$apply(function(){
+        scope.isDisabled = false;
+      });
+      expect(button.attr('tabindex')).toBe("0");
+
+    }));
+
+    it('should set `tabindex == -1` when used with ng-href', inject(function ($compile, $rootScope, $timeout) {
+      var scope = angular.extend( $rootScope.$new(), { isDisabled : true, url : "http://material.angularjs.org" });
+      var button = $compile('<md-button ng-disabled="isDisabled" ng-href="url">button</md-button>')(scope);
+      $rootScope.$apply();
+
+      expect(button.attr('tabindex')).toBe("-1");
+    }));
+
+  })
+
+});

UI/WebServerResources/scss/vendors/angular-material/components/button/demoBasicUsage/index.html

@@ -0,0 +1,53 @@
+
+<div ng-controller="AppCtrl">
+  <md-content >
+
+    <section layout="row" layout-sm="column" layout-align="center center">
+      <md-button>{{title1}}</md-button>
+      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
+      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
+      <md-button class="md-warn">{{title4}}</md-button>
+    </section>
+
+    <section layout="row" layout-sm="column" layout-align="center center">
+      <md-button class="md-raised">Button</md-button>
+      <md-button class="md-raised md-primary">Primary</md-button>
+      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
+      <md-button class="md-raised md-warn">Warn</md-button>
+      <div class="label">raised</div>
+    </section>
+
+    <section layout="row" layout-sm="column" layout-align="center center">
+        <md-button class="md-fab" aria-label="Time">
+            <md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
+        </md-button>
+
+      <md-button class="md-fab" aria-label="New document">
+        <md-icon icon="/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
+      </md-button>
+
+        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
+            <md-icon icon="/img/icons/ic_comment_24px.svg" style="width: 24px; height: 24px;"></md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
+            <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
+        </md-button>
+      <div class="label">FAB</div>
+    </section>
+
+    <section layout="row" layout-sm="column" layout-align="center center">
+        <md-button ng-href="{{googleUrl}}" target="_blank">Go to Google</md-button>
+        <md-button>RSVP</md-button>
+    </section>
+
+    <section layout="row" layout-sm="column" layout-align="center center">
+      <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
+      <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
+      <md-button class="md-accent">Accent</md-button>
+      <md-button class="md-accent md-raised md-hue-3">Accent Hue 3</md-button>
+      <div class="label">Themed</div>
+    </section>
+
+  </md-content>
+</div>

UI/WebServerResources/scss/vendors/angular-material/components/button/demoBasicUsage/script.js

@@ -0,0 +1,11 @@
+
+angular.module('buttonsDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+  $scope.title1 = 'Button';
+  $scope.title4 = 'Warn';
+  $scope.isDisabled = true;
+
+  $scope.googleUrl = 'http://google.com';
+
+});

UI/WebServerResources/scss/vendors/angular-material/components/button/demoBasicUsage/style.css

@@ -0,0 +1,30 @@
+
+/** From vulcanized demo **/
+
+section {
+  background: #f7f7f7;
+  border-radius: 3px;
+  text-align: center;
+  margin: 1em;
+  position: relative !important;
+  padding-bottom: 10px;
+}
+md-content {
+  margin-right: 7px;
+}
+section .md-button:not(.md-fab) {
+  min-width: 10em;
+}
+section .md-button {
+  display: block;
+  margin: 1em;
+  line-height: 25px;
+}
+.label {
+  position: absolute;
+  bottom: 5px;
+  left: 7px;
+  color: #ccc;
+  font-size: 14px;
+}
+