Merge pull request #419 from atmire/selectable-themes

Selectable themes

.gitignore

@@ -5,6 +5,8 @@
 /tsd_typings/
 npm-debug.log
 
+/build/
+
 /config/environment.dev.js
 /config/environment.prod.js
 

config/environment.default.js

@@ -180,5 +180,8 @@ module.exports = {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
+  },
+  theme: {
+    name: 'default',
   }
 };

package.json

@@ -17,15 +17,16 @@
     "clean:doc": "rimraf doc",
     "clean:log": "rimraf *.log*",
     "clean:json": "rimraf *.records.json",
+    "clean:bld": "rimraf build",
     "clean:node": "rimraf node_modules",
-    "clean:prod": "yarn run clean:coverage && yarn run clean:doc && yarn run clean:dist && yarn run clean:log && yarn run clean:json",
+    "clean:prod": "yarn run clean:coverage && yarn run clean:doc && yarn run clean:dist && yarn run clean:log && yarn run clean:json && yarn run clean:bld",
     "clean": "yarn run clean:prod && yarn run clean:node",
-    "prebuild": "yarn run clean:dist",
+    "prebuild": "yarn run clean:bld && yarn run clean:dist",
     "prebuild:aot": "yarn run prebuild",
     "prebuild:prod": "yarn run prebuild",
-    "build": "node ./webpack/run-webpack.js --progress --mode development",
-    "build:aot": "node ./webpack/run-webpack.js --env.aot --env.server --mode development && node ./webpack/run-webpack.js --env.aot --env.client --mode development",
-    "build:prod": "node ./webpack/run-webpack.js --env.aot --env.server --mode production && node ./webpack/run-webpack.js --env.aot --env.client --mode production",
+    "build": "node ./scripts/webpack.js --progress --mode development",
+    "build:aot": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
+    "build:prod": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
     "postbuild:prod": "yarn run rollup",
     "rollup": "rollup -c rollup.config.js",
     "prestart": "yarn run build:prod",
@@ -40,7 +41,8 @@
     "server": "node dist/server.js",
     "server:watch": "nodemon dist/server.js",
     "server:watch:debug": "nodemon --debug dist/server.js",
-    "webpack:watch": "node ./webpack/run-webpack.js -w --mode development",
+    "syncbuilddir": "node ./scripts/sync-build-dir.js",
+    "webpack:watch": "node ./scripts/webpack.js -w --mode development",
     "watch": "yarn run build && npm-run-all -p webpack:watch server:watch",
     "watch:debug": "yarn run build && npm-run-all -p webpack:watch server:watch:debug",
     "predebug": "yarn run build",
@@ -94,6 +96,7 @@
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
     "core-js": "^2.5.7",
+    "debug-loader": "^0.0.1",
     "express": "4.16.2",
     "express-session": "1.15.6",
     "fast-json-patch": "^2.0.7",
@@ -121,6 +124,7 @@
     "reflect-metadata": "0.1.12",
     "rxjs": "6.2.2",
     "rxjs-spy": "^7.5.1",
+    "sass-resources-loader": "^2.0.0",
     "sortablejs": "1.7.0",
     "text-mask-core": "5.0.1",
     "ts-loader": "^5.2.1",
@@ -163,6 +167,7 @@
     "codelyzer": "^4.4.4",
     "compression-webpack-plugin": "^1.1.6",
     "copy-webpack-plugin": "^4.4.1",
+    "copyfiles": "^2.1.0",
     "coveralls": "3.0.0",
     "css-loader": "1.0.0",
     "cssnano": "^4.1.10",
@@ -213,7 +218,7 @@
     "script-ext-html-webpack-plugin": "2.0.1",
     "source-map": "0.7.3",
     "source-map-loader": "0.2.4",
-    "string-replace-loader": "2.1.1",
+    "string-replace-loader": "^2.1.1",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
     "ts-node": "4.1.0",
@@ -224,6 +229,7 @@
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "3.2.0",
     "webpack-dev-server": "^3.1.5",
+    "webpack-import-glob-loader": "^1.6.3",
     "webpack-merge": "4.1.4",
     "webpack-node-externals": "1.7.2"
   }

resources/i18n/en.json

@@ -109,6 +109,16 @@
       "link": {
         "simple": "Simple item page",
         "full": "Full item page"
+      },
+      "journal": {
+        "search": {
+          "title": "Articles in this journal"
+        }
+      },
+      "person": {
+        "search": {
+          "title": "Articles by this author"
+        }
       }
     },
     "select": {

scripts/sync-build-dir.js

@@ -0,0 +1,22 @@
+const syncBuildDir = require('copyfiles');
+const path = require('path');
+const {
+  projectRoot,
+  theme,
+  themePath,
+} = require('../webpack/helpers');
+
+const projectDepth = projectRoot('./').split(path.sep).length;
+
+let callback;
+
+if (theme !== null && theme !== undefined) {
+  callback = () => {
+    syncBuildDir([path.join(themePath, '**/*'), 'build'], { up: projectDepth + 2 }, () => {})
+  }
+}
+else {
+  callback = () => {};
+}
+
+syncBuildDir([projectRoot('src/**/*'), 'build'], { up: projectDepth + 1 }, callback);

src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }

src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }

src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+admin/admin-sidebar/admin-sidebar.component.html

@@ -1,4 +1,4 @@
-<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
+<nav @slideHorizontal class="navbar navbar-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
      value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),

src/app/+admin/admin-sidebar/admin-sidebar.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 $icon-z-index: 10;
 
 :host {
@@ -8,6 +6,7 @@ $icon-z-index: 10;
     height: 100vh;
     flex: 1 1 auto;
     nav {
+        background-color: $admin-sidebar-bg;
         height: 100%;
         flex-direction: column;
         > div {
@@ -44,7 +43,7 @@ $icon-z-index: 10;
                 .sidebar-section {
                     display: flex;
                     align-content: stretch;
-                    background-color: $dark;
+                    background-color: $admin-sidebar-bg;
                     .nav-item {
                         padding-top: $spacer;
                         padding-bottom: $spacer;

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 ::ng-deep {
     .fa-chevron-right {
         padding-left: $spacer/2;

src/app/+collection-page/collection-page.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/+community-page/community-page.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/+home-page/home-news/home-news.component.scss

@@ -1,16 +1,14 @@
-@import '../../../styles/variables.scss';
-
 :host {
-  display: block;
-  margin-top: -$content-spacing;
-  margin-bottom: -$content-spacing;
+    display: block;
+    margin-top: -$content-spacing;
+    margin-bottom: -$content-spacing;
 }
 
 .display-3 {
-  word-break: break-word;
+    word-break: break-word;
 }
 
 .dspace-logo {
-  height: 110px;
-  width: 110px;
-}
+    height: 110px;
+    width: 110px;
+}

src/app/+home-page/home-page.component.scss

@@ -1 +1,2 @@
-@import '../../styles/variables.scss';
+:host {
+}

src/app/+item-page/edit-item-page/edit-item-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .btn {
     min-width: $edit-item-button-min-width;
 }

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss

@@ -1,4 +1,3 @@
-@import '../../../../../styles/variables.scss';
 .btn[disabled] {
     color: $gray-600;
     border-color: $gray-600;

src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .button-row {
     .btn {
         margin-right: 0.5 * $spacer;

src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 :host {
   .simple-view-element {
     margin-bottom: 15px;

src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/field-components/metadata-values/metadata-values.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/full/field-components/file-section/full-file-section.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-@import '../../../../../styles/mixins';
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;

src/app/+item-page/full/full-item-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 :host {
     div.simple-view-link {
         text-align: center;

src/app/+login-page/login-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 .login-logo {
   height: $login-logo-height;
   width: $login-logo-width;

src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
 
 .filters {
     .toggle-more-filters a {

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -1,9 +1,9 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
-                                                           [routerLink]="[getSearchLink()]"
-                                                           [queryParams]="addQueryParams" queryParamsHandling="merge">
-    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
-    <span class="filter-value px-1">{{filterValue.value}}</span>
-    <span class="float-right filter-value-count ml-auto">
+   [routerLink]="[getSearchLink()]"
+   [queryParams]="addQueryParams" queryParamsHandling="merge">
+  <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+  <span class="filter-value px-1">{{filterValue.value}}</span>
+  <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                     </span>
-</a>
+</a>

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $body-color;
     &:hover, &focus {

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html

@@ -1,8 +1,8 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
    [routerLink]="[getSearchLink()]"
    [queryParams]="changeQueryParams" queryParamsHandling="merge">
-    <span class="filter-value px-1">{{filterValue.label}}</span>
-    <span class="float-right filter-value-count ml-auto">
+  <span class="filter-value px-1">{{filterValue.label}}</span>
+  <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                     </span>
 </a>

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $link-color;
     &:hover {

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts

@@ -18,6 +18,7 @@ const rangeDelimiter = '-';
 @Component({
   selector: 'ds-search-facet-range-option',
   styleUrls: ['./search-facet-range-option.component.scss'],
+  // templateUrl: './search-facet-range-option.component.html',
   templateUrl: './search-facet-range-option.component.html',
 })
 

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $body-color;
     &:hover, &focus {

src/app/+search-page/search-filters/search-filter/search-filter.component.scss

@@ -1,13 +1,10 @@
-@import '../../../../styles/variables.scss';
-@import '../../../../styles/mixins.scss';
-
 :host .facet-filter {
-  border: 1px solid map-get($theme-colors, light);
-  cursor: pointer;
-  .search-filter-wrapper.closed {
-    overflow: hidden;
-  }
-  .filter-toggle {
-    line-height: $line-height-base;
-  }
+    border: 1px solid map-get($theme-colors, light);
+    cursor: pointer;
+    .search-filter-wrapper.closed {
+        overflow: hidden;
+    }
+    .filter-toggle {
+        line-height: $line-height-base;
+    }
 }

src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss

@@ -1,6 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
-
 .filters {
     .toggle-more-filters a {
         color: $link-color;