Build css from scss sources in client ui build

client/.gitignore

@@ -0,0 +1 @@
+node/

ui/css/src/Gulpfile.js → client/gulpfile.js

@@ -24,11 +24,12 @@ const sassLint = require('gulp-sass-lint');
 const sourcemaps = require('gulp-sourcemaps');
 const autoprefixer = require('gulp-autoprefixer');
 const shell = require('gulp-shell');
+const gulpif = require('gulp-if');
 
-const pathRoot = process.cwd();
-const pathCss = pathRoot + '/../';
-const pathSass = pathRoot + '/scss/';
-const filesSass = pathRoot + '/scss/*.scss';
+const pathRoot = process.cwd() + '/ui/';
+const pathCss = 'target/classes/META-INF/webapp/css';
+const pathSass = pathRoot + 'scss/';
+const filesSass = pathRoot + 'scss/*.scss';
 const browserVersions = [
   "last 1 versions",
   "last 20 firefox versions",
@@ -48,10 +49,10 @@ gulp.task('lintSassFix',
   shell.task('npm run fix')
 );
 
-const buildSass = (style) => {
+const buildSass = (style, task) => {
   const buildSass = () => { // function and name is required here for gulp-task naming-process
     return gulp.src(filesSass)
-      .pipe(sourcemaps.init())
+      .pipe(gulpif(task === 'watch',sourcemaps.init()))
       .pipe(
         sass({
           fiber: Fiber,
@@ -62,9 +63,9 @@ const buildSass = (style) => {
         browsers: browserVersions, //todo remove all current prefix rules from css
         cascade: false // prefix indentation in one line?
       }))
-      .pipe(sourcemaps.write('./src/sourcemaps'))
+      .pipe(gulpif(task === 'watch', sourcemaps.write('sourcemaps')))
       .pipe(gulp.dest(pathCss));
-  }
+  };
 
   return buildSass;
 };
@@ -76,23 +77,30 @@ const lintSass = () => {
 };
 
 const watchSass = () => {
-  gulp.watch(pathSass + '**/*.scss',
+  gulp.watch([pathSass + '**/*.scss'],
     gulp.series(
       'lintSassFix',
       lintSass,
-      buildSass('expanded')
+      buildSass('expanded', 'watch')
     )
   );
 };
 
+gulp.task('watch',
+    gulp.series(
+        'lintSassFix',
+        lintSass,
+        buildSass('expanded', 'watch'),
+        gulp.parallel(
+            watchSass
+        )
+    )
+);
 
 gulp.task('default',
   gulp.series(
     'lintSassFix',
     lintSass,
-    buildSass('expanded'),
-    gulp.parallel(
-      watchSass
-    )
+    buildSass('expanded', 'default')
   )
 );

ui/css/src/package.json → client/package.json

@@ -4,7 +4,7 @@
   "description": "Compiles scss files into css to manage comprehensive css complexity",
   "main": "app.js",
   "scripts": {
-    "start": "gulp",
+    "start": "gulp watch",
     "gulp": "gulp",
     "fix": "sass-lint-auto-fix"
   },
@@ -27,6 +27,7 @@
     "fibers": "^3.1.1",
     "gulp": "^4.0.1",
     "gulp-autoprefixer": "^6.0.0",
+    "gulp-if": "^2.0.2",
     "gulp-sass": "^4.0.2",
     "gulp-sass-lint": "^1.4.0",
     "gulp-shell": "^0.7.0",
@@ -37,5 +38,6 @@
     "sass-lint": "^1.12.1",
     "sass-lint-auto-fix": "^0.17.0",
     "tar": "^4.4.8"
-  }
+  },
+  "dependencies": {}
 }

client/pom.xml

@@ -491,6 +491,40 @@
                     </execution>
                 </executions>
             </plugin>
+          <plugin>
+            <groupId>com.github.eirslett</groupId>
+            <artifactId>frontend-maven-plugin</artifactId>
+            <version>1.7.6</version>
+            <configuration>
+              <nodeVersion>v11.10.0</nodeVersion>
+              <npmVersion>6.7.0</npmVersion>
+            </configuration>
+            <executions>
+              <execution>
+                <id>install node and npm</id>
+                <goals>
+                  <goal>install-node-and-npm</goal>
+                </goals>
+                <phase>generate-resources</phase>
+              </execution>
+              <execution>
+                <id>npm install</id>
+                <goals>
+                  <goal>npm</goal>
+                </goals>
+                <configuration>
+                  <arguments>install</arguments>
+                </configuration>
+              </execution>
+              <execution>
+                <id>gulp build</id>
+                <goals>
+                  <goal>gulp</goal>
+                </goals>
+                <phase>generate-resources</phase>
+              </execution>
+            </executions>
+          </plugin>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-jar-plugin</artifactId>
@@ -578,7 +612,9 @@
                                     </fileset>
                                 </copy>
                                 <copy todir="${project.build.directory}/classes/META-INF/webapp">
-                                    <fileset dir="${basedir}/../ui" />
+                                    <fileset dir="${basedir}/ui">
+                                      <exclude name="scss/"/>
+                                    </fileset>
                                 </copy>
                                 <copy overwrite="true" todir="${basedir}/target/utilities/bin">
                                     <fileset dir="${basedir}/../setup/bindir">

ui/css/src/readme.md → client/readme.md

@@ -1,9 +1,10 @@
-# How to compile SASS with NPM and GULP?
+# The scss files will automatically be compiled in the build for the client ui module.
+## How to compile SASS with NPM and GULP for development purposes without building the whole module?
 
   1. install Node (v11.10.0 will work) on your machine or "N" or "nvm"
-  2. run $(npm install) inside package.json folder
-  3. run $(npm start) inside package.json folder
+  2. run $(npm install)
+  3. run $(npm start)
   4. gulp automaticaly watches for .scss changes and compiles children scss-files of scss-folder to css now
   5. Find a plugin for your code-editor to get use of .jsbeautifyrc as second instance for more rules that sass-lint-auto-fix doesn't support. (for vscode: "Beautify")
 
-## Keep package versions up to date if possible. check with $(npm outdated) inside package.json folder
+### Keep package versions up to date if possible. check with $(npm outdated) inside package.json folder

ui/css/src/scss/components/create-form.scss → client/ui/scss/components/create-form.scss

@@ -84,7 +84,7 @@ textarea {
   font-size: 14px;
 }
 
-.ui-dialog div.form-container div.value label {
+#label_delete_volumes label {
   display: block;
   width: 119px;
   margin-top: 2px;

ui/css/src/scss/components/jquery-ui.scss → client/ui/scss/components/jquery-ui.scss

@@ -85,4 +85,18 @@ ul.ui-autocomplete.ui-menu {
   font-size: 13px;
   overflow-x: hidden;
   overflow-y: auto;
+  text-align: left;
+  z-index: 100;
+}
+
+.ui-menu .ui-menu-item {
+  cursor: pointer;
+}
+
+.ui-menu .ui-menu-item .ui-state-active {
+  background: #CBDDF3;
+}
+
+.ui-helper-hidden-accessible {
+  display: none;
 }

ui/css/src/scss/components/recurring-snapshots.scss → client/ui/scss/components/recurring-snapshots.scss

@@ -19,6 +19,10 @@
   display: inline-block;
 }
 
+.recurring-snapshots .schedule .forms .formContainer {
+  min-height: 250px;
+}
+
 .recurring-snapshots .schedule .add-snapshot-actions {
   float: left;
   clear: both;
@@ -82,6 +86,11 @@
   left: 5px;
 }
 
+.recurring-snapshots .schedule .forms .tagger form div.value label {
+  width: 25px;
+  top: 10px;
+}
+
 .recurring-snapshots .schedule .forms form label.error {
   float: left;
   width: 100%;
@@ -94,6 +103,10 @@
   margin: 8px 0 0;
 }
 
+.recurring-snapshots .schedule .forms .tagger form .field {
+  margin: 0;
+}
+
 .recurring-snapshots .schedule .forms form .name {
   float: left;
   width: 72px;
@@ -232,6 +245,11 @@
   padding: 0;
 }
 
+.recurring-snapshots .ui-tabs .tagger ul {
+  margin: 16px auto auto;
+  padding-bottom: 10px;
+}
+
 .recurring-snapshots .ui-tabs ul li a {
   width: 76px;
   background: url('../images/sprites.png') no-repeat -521px -533px;

ui/css/src/scss/components/tagger.scss → client/ui/scss/components/tagger.scss

@@ -234,6 +234,11 @@
   display: none;
 }
 
+.ui-dialog .tagger .tag-info.inside-form {
+  display: block;
+  text-align: left;
+}
+
 .ui-dialog.editTags .ui-button {
   float: right;
 }

pom.xml

@@ -968,33 +968,33 @@
                             <exclude>tools/ngui/static/bootstrap/*</exclude>
                             <exclude>tools/ngui/static/js/lib/*</exclude>
                             <exclude>tools/transifex/.tx/config</exclude>
-                            <exclude>ui/css/src/scss/components/token-input-facebook.scss</exclude>
-                            <exclude>ui/l10n/*</exclude>
-                            <exclude>ui/lib/flot/jquery.colorhelpers.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.crosshair.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.fillbetween.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.image.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.navigate.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.pie.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.resize.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.selection.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.stack.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.symbol.js</exclude>
-                            <exclude>ui/lib/flot/jquery.flot.threshold.js</exclude>
-                            <exclude>ui/lib/jquery-ui/css/jquery-ui.css</exclude>
-                            <exclude>ui/lib/jquery-ui/index.html</exclude>
-                            <exclude>ui/lib/jquery-ui/js/jquery-ui.js</exclude>
-                            <exclude>ui/lib/jquery.cookies.js</exclude>
-                            <exclude>ui/lib/jquery.easing.js</exclude>
-                            <exclude>ui/lib/jquery.js</exclude>
-                            <exclude>ui/lib/jquery.md5.js</exclude>
-                            <exclude>ui/lib/jquery.validate.js</exclude>
-                            <exclude>ui/lib/jquery.tokeninput.js</exclude>
-                            <exclude>ui/lib/qunit/qunit.css</exclude>
-                            <exclude>ui/lib/qunit/qunit.js</exclude>
-                            <exclude>ui/lib/reset.css</exclude>
-                            <exclude>ui/lib/require.js</exclude>
+                            <exclude>client/ui/css/src/scss/components/token-input-facebook.scss</exclude>
+                            <exclude>client/ui/l10n/*</exclude>
+                            <exclude>client/ui/lib/flot/jquery.colorhelpers.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.crosshair.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.fillbetween.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.image.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.navigate.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.pie.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.resize.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.selection.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.stack.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.symbol.js</exclude>
+                            <exclude>client/ui/lib/flot/jquery.flot.threshold.js</exclude>
+                            <exclude>client/ui/lib/jquery-ui/css/jquery-ui.css</exclude>
+                            <exclude>client/ui/lib/jquery-ui/index.html</exclude>
+                            <exclude>client/ui/lib/jquery-ui/js/jquery-ui.js</exclude>
+                            <exclude>client/ui/lib/jquery.cookies.js</exclude>
+                            <exclude>client/ui/lib/jquery.easing.js</exclude>
+                            <exclude>client/ui/lib/jquery.js</exclude>
+                            <exclude>client/ui/lib/jquery.md5.js</exclude>
+                            <exclude>client/ui/lib/jquery.validate.js</exclude>
+                            <exclude>client/ui/lib/jquery.tokeninput.js</exclude>
+                            <exclude>client/ui/lib/qunit/qunit.css</exclude>
+                            <exclude>client/ui/lib/qunit/qunit.js</exclude>
+                            <exclude>client/ui/lib/reset.css</exclude>
+                            <exclude>client/ui/lib/require.js</exclude>
                             <exclude>utils/testsmallfileinactive</exclude>
                         </excludes>
                     </configuration>