inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-23 18:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean style creations ADF (#7385)

Browse Source
This commit is contained in:
Eugenio Romano 2021-11-29 16:14:26 +00:00 committed by GitHub
parent 684b1e7d65
commit ce43d0a766
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 161 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
angular.json
View File

@ -11,6 +11,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"extractCss": true,
"aot": true,
"allowedCommonJsDependencies": [
"minimatch",
@ -61,7 +62,7 @@
{
"glob": "**/*",
"input": "lib/dist/core/prebuilt-themes",
"output": "/assets/prebuilt-themes"
"output": ""
},
{
"glob": "**/*",
@ -120,6 +121,51 @@
}
],
"styles": [
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-blue-orange.scss",
"bundleName" : "adf-blue-orange"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-blue-purple.scss",
"bundleName" : "adf-blue-purple"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-cyan-orange.scss",
"bundleName" : "adf-cyan-orange"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-cyan-purple.scss",
"bundleName" : "adf-cyan-purple"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-green-orange.scss",
"bundleName" : "adf-green-orange"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-green-purple.scss",
"bundleName" : "adf-green-purple"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-indigo-pink.scss",
"bundleName" : "adf-indigo-pink"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-pink-bluegrey.scss",
"bundleName" : "adf-pink-bluegrey"
},
{
"inject": false,
"input": "lib/core/styles/prebuilt/adf-purple-green.scss",
"bundleName" : "adf-purple-green"
},
"demo-shell/src/assets/fonts/material-icons/material-icons.css",
"demo-shell/src/assets/fonts/muli/muli.css",
"demo-shell/src/styles.scss",

2
demo-shell/proxy.conf.js
View File

@ -1,7 +1,7 @@
require('dotenv').config();
var PROXY_HOST_ADF = process.env.PROXY_HOST_ADF;
console.log('PROXY_HOST_ADF' + PROXY_HOST_ADF);
module.exports = {
"/alfresco": {
"target": (PROXY_HOST_ADF || "http://localhost:8080"),

2
demo-shell/src/app/components/theme-picker/theme-picker.ts
View File

@ -122,7 +122,7 @@ export class ThemePickerComponent {
} else {
this.currentTheme = this._getCurrentThemeFromHref(theme.href);
this.styleManager.setStyle('theme', `assets/prebuilt-themes/${theme.href}`);
this.styleManager.setStyle('theme', theme.href);
if (this.currentTheme) {
this._themeStorage.storeTheme(this.currentTheme);

10
demo-shell/src/custom-style-dev.scss
View File

@ -1,5 +1,4 @@
@import '~@angular/material/theming';
@import '../../lib/core/styles/index';
@include mat-core($alfresco-typography);
@ -7,10 +6,15 @@
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include adf-core-theme($theme);
@include alfresco-material-theme($theme);
body, html {
margin: 0;

10
demo-shell/src/custom-style.scss
View File

@ -1,5 +1,4 @@
@import '~@angular/material/theming';
@import '~@alfresco/adf-core/theming';
@include mat-core($alfresco-typography);
@ -7,10 +6,15 @@
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include adf-core-theme($theme);
@include alfresco-material-theme($theme);
body, html {
margin: 0;

39
docs/user-guide/theming.md
View File

@ -70,20 +70,23 @@ When you want more customization than a pre-built theme offers, you can create y
/*
* Include only packages that you are using (and core by default)
*/
@import '~@alfresco/adf-core/theming';
@import '~@angular/material/theming';
@import '~@alfresco/adf-core/theming';
@include mat-core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include adf-core-theme($theme);
@include alfresco-material-theme($theme);
```
Notes: if you are using the Generator or the demo shell you need only to change the`/src/custom-style.scss` with your set of colors
@ -95,27 +98,33 @@ You can create multiple themes for your application:
#### Example of defining multiple themes
```scss
@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@import '~@alfresco/adf-insights/theming';
@import '~@alfresco/adf-core/theming';
@import '~@angular/material/theming';
...
@import '~@alfresco/adf-core/theming';
@include mat-core();
@include mat-core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
$theme: mat-light-theme($primary, $accent, $warn);
$dark-theme: mat-dark-theme($primary, $accent, $warn);
$dark-theme: mat-dark-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include adf-core-theme($theme);
@include alfresco-material-theme($theme);
...like above
.adf-dark-theme {
@include adf-core-theme($dark-theme);
@include alfresco-material-theme($dark-theme);
...like above
}
```

6
lib/config/app.config.json
View File

@ -1,6 +0,0 @@
{
"ecmHost": "http://{hostname}:{port}/ecm",
"bpmHost": "http://{hostname}:{port}/bpm",
"baseShareUrl": null,
"logLevel" : "silent"
}

18
lib/config/create-coverage-index.sh
View File

@ -1,18 +0,0 @@
#!/bin/bash
ROOT=./lib/coverage
HTTP="/"
OUTPUT="./lib/coverage/index.html"
RULE=".*\.\(html\)"
echo "<h1>Coverage ADF Reports</h1>" > $OUTPUT
echo "<ul>" >> $OUTPUT
i=0
for filepath in `find "$ROOT" -maxdepth 1 -mindepth 1 -type d| sort`; do
path=`basename "$filepath"`
for i in `find "$filepath" -regex "$RULE" -maxdepth 1 -mindepth 1 -type f| sort`; do
file=`basename "$i"`
echo " <li><a href=\"/$path/$file\">$path</a></li>" >> $OUTPUT
done
done
echo "</ul>" >> $OUTPUT

6
lib/config/proxy-coverage.json
View File

@ -1,6 +0,0 @@
{
"port": 4344,
"server": {
"baseDir": "./lib/coverage/"
}
}

38
lib/config/webpack.style.js
View File

@ -1,38 +0,0 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})],
},
entry: {
'adf-blue-orange': './lib/core/styles/prebuilt/adf-blue-orange.scss',
'adf-blue-purple': './lib/core/styles/prebuilt/adf-blue-purple.scss',
'adf-cyan-orange': './lib/core/styles/prebuilt/adf-cyan-orange.scss',
'adf-cyan-purple': './lib/core/styles/prebuilt/adf-cyan-purple.scss',
'adf-green-purple': './lib/core/styles/prebuilt/adf-green-purple.scss',
'adf-green-orange': './lib/core/styles/prebuilt/adf-green-orange.scss',
'adf-pink-bluegrey': './lib/core/styles/prebuilt/adf-pink-bluegrey.scss',
'adf-indigo-pink': './lib/core/styles/prebuilt/adf-indigo-pink.scss',
'adf-purple-green': './lib/core/styles/prebuilt/adf-purple-green.scss'
},
output: {
path: path.resolve(__dirname, '../dist/core/prebuilt-themes/'),
filename: '[name].js',
publicPath: '/dist'
},
module: {
rules: [{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}]
},
plugins: [new MiniCssExtractPlugin()]
};

10
lib/content-services/scss-bundle.config.json
View File

@ -1,10 +0,0 @@
{
"bundlerOptions": {
"entryFile": "./lib/content-services/src/lib/styles/_index.scss",
"rootDir": ".",
"project": "../../",
"outFile": "./lib/dist/content-services/_theming.scss",
"ignoreImports": ["~@angular/.*"],
"logLevel": "info"
}
}

4
lib/core/styles/_index.scss
View File

@ -6,6 +6,10 @@
@import './material.theme';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
@mixin alfresco-material-theme($theme) {
@include adf-core-theme($theme);
}
@mixin adf-core-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

4
lib/core/styles/prebuilt/_all-theme.scss
View File

@ -1,5 +1 @@
@import '../../../core/styles/index';
@mixin alfresco-material-theme($theme) {
@include adf-core-theme($theme);
}

7
lib/core/styles/prebuilt/adf-blue-orange.scss
View File

@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-ecm-blue);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

9
lib/core/styles/prebuilt/adf-blue-purple.scss
View File

@ -3,10 +3,15 @@
@include mat-core($alfresco-typography);
$primary: mat-palette($alfresco-ecm-blue);
$primary: mat-palette($mat-pink, 700, 500, 900);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

7
lib/core/styles/prebuilt/adf-cyan-orange.scss
View File

@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

7
lib/core/styles/prebuilt/adf-cyan-purple.scss
View File

@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

7
lib/core/styles/prebuilt/adf-green-orange.scss
View File

@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

7
lib/core/styles/prebuilt/adf-green-purple.scss
View File

@ -6,7 +6,12 @@
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

8
lib/core/styles/prebuilt/adf-indigo-pink.scss
View File

@ -5,7 +5,13 @@
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

8
lib/core/styles/prebuilt/adf-pink-bluegrey.scss
View File

@ -5,7 +5,13 @@
$primary: mat-palette($mat-pink, 700, 500, 900);
$accent: mat-palette($mat-blue-grey, A200, A100, A400);
$theme: mat-dark-theme($primary, $accent);
$warn: mat-palette($alfresco-warn);
$theme: mat-dark-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

8
lib/core/styles/prebuilt/adf-purple-green.scss
View File

@ -5,7 +5,13 @@
$primary: mat-palette($mat-purple, 700, 500, 800);
$accent: mat-palette($mat-green, A200, A100, A400);
$theme: mat-dark-theme($primary, $accent);
$warn: mat-palette($alfresco-warn);
$theme: mat-dark-theme((
color: (
primary: $primary,
accent: $accent,
)
));
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

10
lib/insights/scss-bundle.config.json
View File

@ -1,10 +0,0 @@
{
"bundlerOptions": {
"entryFile": "./lib/insights/src/lib/styles/_index.scss",
"rootDir": ".",
"project": "../../",
"outFile": "./lib/dist/insights/_theming.scss",
"ignoreImports": ["~@angular/.*"],
"logLevel": "info"
}
}

10
lib/process-services-cloud/scss-bundle.config.json
View File

@ -1,10 +0,0 @@
{
"bundlerOptions": {
"entryFile": "./lib/process-services-cloud/src/lib/styles/_index.scss",
"rootDir": ".",
"project": "../../",
"outFile": "./lib/dist/process-services-cloud/_theming.scss",
"ignoreImports": ["~@angular/.*"],
"logLevel": "info"
}
}

10
lib/process-services/scss-bundle.config.json
View File

@ -1,10 +0,0 @@
{
"bundlerOptions": {
"entryFile": "./lib/process-services/src/lib/styles/_index.scss",
"rootDir": ".",
"project": "../../",
"outFile": "./lib/dist/process-services/_theming.scss",
"ignoreImports": ["~@angular/.*"],
"logLevel": "info"
}
}

13
package.json
View File

@ -26,10 +26,6 @@
"inspect.bundle": "ng build demoshell --configuration production --stats-json && npx webpack-bundle-analyzer dist/demo-shell/stats.json",
"coverage": "./lib/config/create-coverage-index.sh && lite-server -c ./lib/config/proxy-coverage.json",
"scss-bundle:core": "npx scss-bundle -c ./lib/core/scss-bundle.config.json",
"scss-bundle:content-services": "npx scss-bundle -c ./lib/content-services/scss-bundle.config.json",
"scss-bundle:insights": "npx scss-bundle -c ./lib/insights/scss-bundle.config.json",
"scss-bundle:process-services": "npx scss-bundle -c ./lib/process-services/scss-bundle.config.json",
"scss-bundle:process-services-cloud": "npx scss-bundle -c ./lib/process-services-cloud/scss-bundle.config.json",
"03": "echo -------------------------------------------- Lint -----------------------------------------------",
"03s": "",
"lint-demo": "tslint -p tsconfig.json -c tslint.json",
@ -40,11 +36,10 @@
"stylelint": "stylelint ./**/*.scss --config stylelint-config.json",
"04": "echo -------------------------------------------- Demo Shell -----------------------------------------------",
"04s": "",
"start": "concurrently \"ng serve demoshell --open\" \"npm run style:dev -- --watch >&-\" ",
"start": "ng serve demoshell --open",
"start:prod": "ng serve demoshell --configuration production --open",
"build": "npm run style:dev && ng build demoshell",
"build": "ng build demoshell",
"build:prod": "node --max-old-space-size=12000 node_modules/@angular/cli/bin/ng build demoshell --configuration production",
"style:dev": "npm run webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail",
"test": "ng test demoshell --watch=false",
"05": "echo -------------------------------------------- E2e -----------------------------------------------",
"05s": "",
@ -160,7 +155,6 @@
"nconf": "^0.11.1",
"ng-packagr": "^10.1.2",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"protractor": "^7.0.0",
"protractor-retry-angular-cli": "^2.0.2",
"protractor-screenshoter-plugin": "0.10.3",
@ -174,8 +168,7 @@
"tsconfig-paths": "^3.12.0",
"tslint": "6.1.3",
"typescript": "3.9.8",
"webdriver-manager": "12.1.8",
"webpack-cli": "^3.3.12"
"webdriver-manager": "12.1.8"
},
"license": "Apache-2.0",
"bundlesize": [

11
scripts/build/build-core.sh
View File

@ -28,5 +28,12 @@ cp -R ./lib/core/app-config/schema.json lib/dist/core/app.config.schema.json
echo "====== Copy assets ======"
cp -R ./lib/core/assets/* ./lib/dist/core/bundles/assets
npm run webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail
rm ./lib/dist/core/prebuilt-themes/*.js
echo "====== Bundle prebuilt styles ======"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-blue-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-blue-purple.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-cyan-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-cyan-purple.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-green-purple.scss" -o "./lib/dist/core/prebuilt-themes/adf-green-purple.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-pink-bluegrey.scss" -o "./lib/dist/core/prebuilt-themes/adf-pink-bluegrey.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-cyan-orange.scss" -o "./lib/dist/core/prebuilt-themes/adf-cyan-orange.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-green-orange.scss" -o ".lib/dist/core/prebuilt-themes/adf-green-orange.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-indigo-pink.scss" -o "./lib/dist/core/prebuilt-themes/adf-indigo-pink.scss" -p "./"
npx scss-bundle -e "./lib/core/styles/prebuilt/adf-purple-green.scss" -o "./lib/dist/core/prebuilt-themes/adf-purple-green.scss" -p "./"