chore(sass): reorganise sass a bit

* Realign generic layout with fabric8-ui
* Move shared custom styles to mixins
* Reference mixins on components
* Add the shared scss loader from fabric8-ui

README.adoc

@@ -160,6 +160,29 @@ have access to both JS and SASS sourcemaps if your webapp is properly setup.
 NOTE: `fabric8-ui` is setup to do reloading and sourcemaps automatically when you
 run `npm start`.
 
+== CSS and SASS
+
+fabric8-planner uses SASS for it's stylesheets. It also uses the Angular emulation
+of the shadow dom, so you will normally want to place your styles in the
+`.component.scss` file next to the html and the typescript.
+
+If you find yourself wanting to create a shared style that multiple components will
+use, then we recommend adding it as a mixin to
+`src/assets/stylesheets/_planner-mixins.scss`. The mixins are imported in to every
+`.component.scss` file. You can then create a real class by doing something like
+
+    .my-class {
+      @include my-class;
+    }
+
+We use mixins to avoid polluting components with uncessary style classes, and to avoid
+an explosion of shared files.
+
+The `src/assets/stylesheets/` directory includes a `shared` directory. These are
+shared global styles that we will refactor out in to a shared library at some point.
+Only update these styles if you are making a truly global style, and are going to
+synchronise your changes across all the various UI projects.
+
 == Contributing to the app
 
 The development guide is part of the link:./CONTRIBUTING.adoc[contributors'

config/webpack.common.js

@@ -85,38 +85,58 @@ module.exports = {
         test: /\.json$/,
         use: ['json-loader']
       },
-
       {
         test: /\.css$/,
         loader: extractCSS.extract({
           fallback: "style-loader",
           use: "css-loader?sourceMap&context=/"
         })
       },
-
       {
-        test: /\.scss$/,
-        loaders: [
+        test: /^(?!.*component).*\.scss$/,
+        use: extractCSS.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                minimize: helpers.isProd,
+                sourceMap: true,
+                context: '/'
+              }
+            }, {
+              loader: 'sass-loader',
+              options: {
+                includePaths: sass.modules.map(function (val) {
+                  return val.sassPath;
+                }),
+                sourceMap: true
+              }
+            }
+          ],
+        })
+      }, {
+        test: /\.component\.scss$/,
+        use: [
           {
-            loader: 'css-to-string-loader'
+            loader: 'to-string-loader'
           }, {
             loader: 'css-loader',
             options: {
               minimize: helpers.isProd,
               sourceMap: true,
               context: '/'
             }
-          },
-          {
+          }, {
             loader: 'sass-loader',
             options: {
-              includePaths: sass.modules.map(val => {
+              includePaths: sass.modules.map(function (val) {
                 return val.sassPath;
               }),
               sourceMap: true
             }
           }
-        ]
+        ],
       },
 
       /* File loader for supporting fonts, for example, in CSS files.

src/app/app.component.scss

@@ -1,5 +1,3 @@
-@import '../assets/stylesheets/custom';
-
 .app {
 
 }

src/app/work-item/work-item-board/work-item-board.component.scss

@@ -203,3 +203,11 @@
     }
   }
 }
+
+.not-assigned-user-icon {
+  @include not-assigned-user-icon;
+}
+
+.user-avatar {
+  @include user-avatar;
+}

src/app/work-item/work-item-detail/work-item-comment/work-item-comment.component.scss

@@ -123,3 +123,11 @@
     }
   }
 }
+
+.user-avatar {
+  @include user-avatar;
+}
+
+.detail-action-btn {
+  @include detail-action-btn;
+}

src/app/work-item/work-item-detail/work-item-detail.component.scss

@@ -378,3 +378,11 @@
     }
   }
 }
+
+.user-avatar {
+  @include user-avatar;
+}
+
+.detail-action-btn {
+  @include detail-action-btn;
+}

src/app/work-item/work-item-list/work-item-list-entry/work-item-list-entry.component.scss

@@ -71,3 +71,11 @@ span{
     padding: 0 !important;
   }
 }
+
+.not-assigned-user-icon {
+  @include not-assigned-user-icon;
+}
+
+.user-avatar {
+  @include user-avatar;
+}

src/assets/stylesheets/_base.scss

@@ -1,3 +1,5 @@
-@import 'variables';
-@import 'custom-variables';
-@import 'custom-mixins';
+@import 'shared/variables';
+@import 'shared/custom-variables';
+@import 'shared/custom-mixins';
+@import 'planner-variables';
+@import 'planner-mixins';

src/assets/stylesheets/_planner-mixins.scss

@@ -0,0 +1,24 @@
+@mixin user-avatar {
+    height: em(25);
+    width: em(25);
+    img {
+        width: $width100;
+        height: 100%;
+    }
+}
+
+@mixin not-assigned-user-icon {
+    font-size: em(20);
+    border: 1px solid $color-pf-black-600;
+    padding: em(1) em(3);
+}
+
+// action buttons for editing title, description, comment
+@mixin detail-action-btn {
+  font-size: em(14);
+  cursor: pointer;
+  width: em(42);
+  text-align: $textCenter;
+  padding: 0 !important;
+  margin-left: em(5);
+}

src/assets/stylesheets/planner-overrides.scss

@@ -0,0 +1,7 @@
+// _layout.scss overrides
+
+.btn {
+  min-width: 0 !important; // temporary fix for btn class , once the style are loaded properly will remove it
+}
+
+// main overrides

src/assets/stylesheets/_custom-mixins.scss → src/assets/stylesheets/shared/_custom-mixins.scss

@@ -5,41 +5,41 @@
 // functions
 //convert px to em/rem
 @function em($px) {
-    @return ($px / $em-base-font-size) * 1em;
+  @return ($px / $em-base-font-size) * 1em;
 }
 
 @function rem($px) {
-    @return ($px / $rem-base-font-size) * 1rem;
+  @return ($px / $rem-base-font-size) * 1rem;
 }
 
 //custom mixins
-@mixin truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+@mixin truncate() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 @mixin transform($transform) {
-    -webkit-transform: $transform;
-    -moz-transform: $transform;
-    -ms-transform: $transform;
-    -o-transform: $transform;
-    transform: $transform;
+  -webkit-transform: $transform;
+  -moz-transform: $transform;
+  -ms-transform: $transform;
+  -o-transform: $transform;
+  transform: $transform;
 }
 
 @mixin transition($transition) {
-    -webkit-transition: $transition;
-    -moz-transition: $transition;
-    -ms-transition: $transition;
-    -o-transition: $transition;
-    transition: $transition;
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -ms-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
 }
 
 @mixin borderRadius($radius) {
-    border-radius: $radius;
-    -o-border-radius: $radius;
-    -moz-border-radius: $radius;
-    -webkit-border-radius: $radius;
+  border-radius: $radius;
+  -o-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
 }
 
 @mixin Border($borderwidth, $borderStyle, $borderColor) {

src/assets/stylesheets/_layout-debug.scss → src/assets/stylesheets/shared/_layout-debug.scss

@@ -1,7 +1,7 @@
 
-$debug-border:0px;
-$debug-component-border:0px;
-$debug-component-spacing:0px;
+$debug-border: 0;
+$debug-component-border: 0;
+$debug-component-spacing: 0;
 
 $debug-root-component-border-color: navy;
 $debug-component-border-color: lighten( navy,20%);

src/assets/stylesheets/_layout.scss → src/assets/stylesheets/shared/_layout.scss

@@ -1,8 +1,3 @@
-///////////////////////////
-// icon styles
-///////////////////////////
-@import 'icons';
-
 ///////////////////////////
 // Utility styles
 ///////////////////////////
@@ -239,9 +234,11 @@ footer
   }
 
 }
-.btn {
-  min-width: 0 !important; // temporary fix for btn class , once the style are loaded properly will remove it
+
+.btn{
+  min-width: 90px;
 }
+
 // chromeless dialog suppresses all chrome in the ng2-bootstrap modal component
 .chromeless-modal
 {
@@ -325,8 +322,3 @@ $wizard-padding:$grid-gutter-width/2;
     }
   }
 }
-
-
-
-
-