@coolon/angular-ui-powerups 12.4.0-alpha.5 → 12.4.0-alpha.51

package/assets/activities/activities.scss

@@ -0,0 +1,77 @@
+@use "~@angular/material" as mat;
+@use "sass:map";
+@use "input-activities";
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  :root {
+    --aup-activity-padding: var(--default-padding);
+    --aup-activity-dialog-padding: 18px;
+  }
+
+  // Extract the palettes you need from the theme definition.
+  $primary-palette: map-get($color-config, primary);
+  $accent-palette: map-get($color-config, accent);
+  $warn-palette: map-get($color-config, warn);
+
+  .dialog-interaction-context {
+    --aup-activity-padding: var(--aup-activity-dialog-padding);
+  }
+
+  aup-activity-title {
+    display: block;
+    font-family: mat.font-family($typography-config);
+    font-size: mat.font-size($typography-config, title);
+    line-height: mat.line-height($typography-config, title);
+    letter-spacing: mat.letter-spacing($typography-config, title);
+    padding: var(--aup-activity-padding);
+
+    &:not(.transparent-background) {
+      padding: calc(var(--aup-activity-padding) / 2) var(--aup-activity-padding);
+    }
+
+    &[color=primary] {
+      $palette: $primary-palette;
+      color: mat.get-color-from-palette($palette, default-contrast);
+      background-color: mat.get-color-from-palette($palette, default);
+    }
+
+    &[color=accent] {
+      $palette: $accent-palette;
+      color: mat.get-color-from-palette($palette, default-contrast);
+      background-color: mat.get-color-from-palette($palette, default);
+    }
+
+    &[color=warn] {
+      $palette: $warn-palette;
+      color: mat.get-color-from-palette($palette, default-contrast);
+      background-color: mat.get-color-from-palette($palette, default);
+    }
+  }
+
+  aup-activity-body {
+    display: block;
+
+    &:not(.full-width) {
+      padding-left: var(--aup-activity-padding-left, var(--aup-activity-padding));
+      padding-right: var(--aup-activity-padding-right, var(--aup-activity-padding));
+    }
+  }
+
+  aup-activity-title:not(.transparent-background) + aup-activity-body {
+    padding-top: var(--aup-activity-padding-top, var(--aup-activity-padding));
+  }
+
+  aup-activity-actions {
+    display: block;
+    padding-top: var(--aup-activity-padding-top, var(--aup-activity-padding));
+    padding-left: var(--aup-activity-padding-left, var(--aup-activity-padding));
+    padding-bottom: var(--aup-activity-padding-bottom, var(--aup-activity-padding));
+    padding-right: var(--aup-activity-padding-right, var(--aup-activity-padding));
+  }
+
+  @include input-activities.apply-theme($color-config, $typography-config)
+
+}
+
+

package/assets/activities/input-activities.scss

@@ -0,0 +1,36 @@
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  .aup-input-activity {
+
+    padding-left: var(--aup-activity-padding-left, 0);
+    padding-right: var(--aup-activity-padding-right, 0);
+    padding-top: var(--aup-activity-padding-top, 0);
+    padding-bottom: var(--aup-activity-padding-bottom, 0);
+
+    //&[layout=block] {
+    //}
+
+    // used for inline editors
+    &[layout=inline] {
+      display: flex;
+      flex-direction: row;
+    }
+
+    aup-activity-actions {
+      padding: 0 0 0 0.5em;
+    }
+
+  }
+
+  .aup-popup-interaction-panel .aup-input-activity {
+    padding-left: var(--aup-activity-padding-left, var(--aup-activity-padding));
+    padding-right: var(--aup-activity-padding-right, var(--aup-activity-padding));
+
+    &[layout=block] {
+      padding-bottom: var(--aup-activity-padding-bottom, var(--aup-activity-padding));
+    }
+  }
+
+
+}

package/assets/cards.scss

@@ -0,0 +1,17 @@
+@use "~@angular/material" as mat;
+@use "sass:map";
+
+:root {
+  --aup-card-container-default-background-color: #fcfcfb;
+}
+
+@mixin apply-theme($color-config, $typography-config) {
+  aup-add-card-activity {
+    aup-command-face {
+      // this isn't working... need to dig deeper
+      //@include mat.button-typography($typography-config);
+      //@include mat.button-theme($color-config);
+      //color: black;
+    }
+  }
+}

package/assets/empty-state.scss

@@ -0,0 +1,11 @@
+aup-empty-state {
+  // Convenience to keep the padding nice when using p tags.
+  .container {
+    > p:first-child {
+      margin-top: 0;
+    }
+    > p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/assets/form.scss

@@ -1,4 +1,4 @@
-@import "~@angular/material/theming";
+@use "~@angular/material/theming";
 
 .aup-input-component {
 
@@ -8,7 +8,8 @@
     width: 100%;
 
     mat-hint.faux-error {
-      color: mat-color(mat-palette($mat-red));
+      // TODO: move this out into theming...
+      color: theming.mat-color(theming.mat-palette(theming.$mat-red));
     }
   }
 
@@ -90,3 +91,5 @@ aup-table-cell-renderer > .aup-input-component {
 
 
 
+
+

package/assets/forms/mixins.scss

@@ -0,0 +1,6 @@
+@mixin floating-label-style() {
+  font-weight: 400;
+  font-size: calc(1em * .75);
+  color: rgba(0, 0, 0, 0.57);
+  white-space: nowrap;
+}

package/assets/interaction/editor/inline-string-editor.scss

@@ -0,0 +1,100 @@
+@use "../../forms/mixins";
+@use "~@angular/material/theming";
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  aup-inline-string-editor {
+    display: block;
+
+    --aup-activity-padding-top: var(--aup-inline-editor-padding-top, 0);
+    --aup-activity-padding-left: var(--aup-inline-editor-padding-left, 0);
+    --aup-activity-padding-bottom: var(--aup-inline-editor-padding-bottom, 0);
+    --aup-activity-padding-right: var(--aup-inline-editor-padding-right, 0);
+
+    .container {
+      padding-top: var(--aup-activity-padding-top);
+      padding-left:  var(--aup-activity-padding-left);
+      padding-bottom:  var(--aup-activity-padding-bottom);
+      padding-right:  var(--aup-activity-padding-right);
+
+      mat-form-field {
+        &:not(.empty) {
+          input {
+            color: currentColor;
+            //color: theming.mat-color($color-config, text);
+          }
+        }
+        &.editable {
+          .mat-form-field-flex, input {
+            cursor: pointer;
+          }
+        }
+        .mat-form-field-infix {
+          width: auto;
+        }
+        .mat-form-field-underline {
+          //opacity: 0; // hide the underline...
+        }
+      }
+
+    }
+
+    //.content {
+    //  position: relative;
+    //  display: grid;
+    //  grid-template-areas: "label edit-control" "content edit-control";
+    //  grid-template-columns: 1fr auto;
+    //  grid-template-rows: auto;
+    //
+    //  font-size: typography-utils.font-size($typography-config, input);
+    //
+    //  //box-sizing: border-box;
+    //  // copied from mat input...
+    //  border-top: 0.84375em solid transparent;
+    //  padding-bottom: 1.34375em;
+    //
+    //  $top-padding-tweak: 1px;
+    //  padding-top: $top-padding-tweak;
+    //
+    //  > label {
+    //    position: absolute;
+    //    transform: translateY(-100%);
+    //    @include mixins.floating-label-style();
+    //  }
+    //
+    //  > p {
+    //    grid-area: content;
+    //    @include typography-utils.typography-level($typography-config, input);
+    //
+    //    // copied from mat input...
+    //    padding: 0.5em 0;
+    //    margin: -0.0625em 0 0 0;
+    //
+    //    box-sizing: border-box;
+    //    flex: 1;
+    //
+    //    &.editing-enabled {
+    //      cursor: pointer;
+    //    }
+    //
+    //    &.place-holder {
+    //      color: rgba(0,0,0,0.5); // TODO: get the angular theme value for disabled form elements...
+    //    }
+    //
+    //  }
+    //
+    //  &:hover {
+    //    //background-color: rgba(0, 0, 0, 0.03);
+    //  }
+    //
+    //  > aup-command {
+    //    grid-area: edit-control;
+    //    align-self: end;
+    //    transform: translateY(3px); // hack to line up with activity actions...!
+    //  }
+    //}
+  }
+}
+
+
+

package/assets/interaction.scss

@@ -1,4 +1,11 @@
-@import "~@angular/material/theming";
+@use "~@angular/material" as mat;
+
+@use "./interaction/editor/inline-string-editor";
+
+@mixin apply-theme($color-config, $typography-config) {
+  @include inline-string-editor.apply-theme($color-config, $typography-config)
+}
+
 
 .dialog-interaction-context {
   max-width: 95vw !important;
@@ -19,11 +26,7 @@
 
 .aup-popup-interaction-panel {
   background: var(--aup-default-background, white);
-  @include mat-elevation(1);
-  @include mat-elevation-transition;
-}
-
-.aup-input-activity {
-  padding: calc(var(--aup-default-padding)/2);
+  @include mat.elevation(1);
+  @include mat.elevation-transition;
 }
 

package/assets/mixins.scss

@@ -1,26 +1,24 @@
-@use "~@angular/material/theming" as ng;
+@use "~@angular/material" as mat;
+@use "~@angular/material/theming" as theme;
 
 @mixin elevate-on-hover($height:2) {
-  @include ng.mat-elevation-transition();
+  @include mat.elevation-transition();
   &:hover {
-    @include ng.mat-elevation($height);
+    @include mat.elevation($height);
   }
 }
 
 @mixin aup-card-container-new-card-style($color: rgba(0,0,0,0.54), $background-color: rgba(255,255,255,0.8), $hover-color: $color, $background-hover-color: white) {
+  @include elevate-on-hover();
   box-sizing: border-box;
   border: 2px dashed rgba(0, 0, 0, 0.1);
   border-radius: 6px;
-
   font-weight: 300;
   cursor: pointer;
   color: $color;
   background-color: $background-color;
-  transition: all ng.$mat-elevation-transition-duration ng.$mat-elevation-transition-timing-function;
 
   &:hover {
-    @include elevate-on-hover(4);
-    transition: all ng.$mat-elevation-transition-duration ng.$mat-elevation-transition-timing-function;
     border-color: transparent;
     background-color: $background-hover-color;
     color: $hover-color;

package/assets/styles.scss

@@ -1,7 +1,8 @@
-@use "~@angular/material/theming" as ng;
+@use "~@angular/material" as mat;
 
 @use "./mixins";
-@use "./activities";
+@use "./activities/activities";
+@use "./cards";
 @use "./router";
 @use "./tabs";
 @use "./interaction";
@@ -9,22 +10,14 @@
 @use "./table";
 @use "./commands";
 @use "./icons";
+@use "./empty-state";
 
-@mixin apply-light-theme($primary, $accent, $warn:ng.mat-palette(ng.$mat-red), $typography: ng.mat-typography-config()) {
+@mixin apply-light-theme($theme, $typography) {
 
-  $theme: ng.mat-light-theme((
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn,
-    )
-  ));
-
-  @include ng.mat-core($typography);
-  @include ng.angular-material-theme($theme);
-
-  $color-config: ng.mat-get-color-config($theme);
+  $color-config: mat.get-color-config($theme);
 
+  @include interaction.apply-theme($color-config, $typography);
+  @include cards.apply-theme($color-config, $typography);
   @include activities.apply-theme($color-config, $typography);
 
   :root {