inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-theming-fix] Fix theming related issues (#2276)

Browse Source 
* First steps

* Every package have separate entry points for styling mixins

* Moving to config dir, and using it in demo shell

* Remove webpack config include path magic from activiti-form package

* Fixing all the webpack common configs and using relative paths in the prebuilt themes

* Datatable header fix

* Update documentation
This commit is contained in:
Popovics András
2017-09-01 14:53:05 +01:00
committed by Mario Romano
parent 738290ce37
commit 407e11664a
72 changed files with 8936 additions and 7538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ng2-components/config/prebuilt/_all-theme.scss Normal file
View File

@@ -0,0 +1,25 @@
@import 'ng2-alfresco-core/styles/index';
@import 'ng2-activiti-analytics/styles/index';
@import 'ng2-activiti-diagrams/styles/index';
@import 'ng2-activiti-form/styles/index';
@import 'ng2-activiti-processlist/styles/index';
@import 'ng2-activiti-tasklist/styles/index';
@import 'ng2-alfresco-datatable/styles/index';
@import 'ng2-alfresco-documentlist/styles/index';
@import 'ng2-alfresco-login/styles/index';
@import 'ng2-alfresco-upload/styles/index';
@import 'ng2-alfresco-userinfo/styles/index';
@mixin alfresco-material-theme($theme) {
@include alfresco-core-theme($theme);
@include alfresco-activity-analytics-theme($theme);
@include alfresco-activity-diagrams-theme($theme);
@include alfresco-activity-form-theme($theme);
@include alfresco-activity-processlist-theme($theme);
@include alfresco-activity-tasklist-theme($theme);
@include alfresco-datatable-theme($theme);
@include alfresco-documentlist-theme($theme);
@include alfresco-login-theme($theme);
@include alfresco-upload-theme($theme);
@include alfresco-userinfo-theme($theme);
}

12
ng2-components/config/prebuilt/adf-blue-orange.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($alfresco-ecm-blue);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

12
ng2-components/config/prebuilt/adf-blue-purple.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($alfresco-ecm-blue);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

12
ng2-components/config/prebuilt/adf-cyan-orange.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

12
ng2-components/config/prebuilt/adf-cyan-purple.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($alfresco-ecm-cyan);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

12
ng2-components/config/prebuilt/adf-green-orange.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-orange);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

12
ng2-components/config/prebuilt/adf-green-purple.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($alfresco-bpm-green);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

11
ng2-components/config/prebuilt/adf-indigo-pink.scss Normal file
View File

@@ -0,0 +1,11 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

11
ng2-components/config/prebuilt/adf-pink-bluegrey.scss Normal file
View File

@@ -0,0 +1,11 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($mat-pink, 700, 500, 900);
$accent: mat-palette($mat-blue-grey, A200, A100, A400);
$theme: mat-dark-theme($primary, $accent);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

11
ng2-components/config/prebuilt/adf-purple-green.scss Normal file
View File

@@ -0,0 +1,11 @@
@import '~ng2-alfresco-core/styles/theming';
@import './all-theme';
@include mat-core();
$primary: mat-palette($mat-purple, 700, 500, 800);
$accent: mat-palette($mat-green, A200, A100, A400);
$theme: mat-dark-theme($primary, $accent);
@include angular-material-theme($theme);
@include alfresco-material-theme($theme);

10
ng2-components/config/webpack.common.js
View File

@@ -40,7 +40,8 @@ module.exports = {
resolve: {
alias: {
"ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
"ng2-alfresco-core$": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
"ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core'),
"ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable/index.ts'),
"ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams/index.ts'),
"ng2-activiti-analytics": path.resolve(__dirname, '../ng2-activiti-analytics/index.ts'),
@@ -57,7 +58,7 @@ module.exports = {
"ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript/index.ts'),
"ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo/index.ts')
},
extensions: ['.ts', '.js'],
extensions: ['.ts', '.js', '.scss'],
modules: [helpers.root('node_modules')]
},
@@ -109,10 +110,7 @@ module.exports = {
}, {
loader: "raw-loader"
}, {
loader: "sass-loader",
options: {
includePaths: [ path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
}
loader: "sass-loader"
}]
},
{

44
ng2-components/config/webpack.style.js
View File

@@ -6,31 +6,49 @@ const extractScss = new ExtractTextPlugin('./ng2-alfresco-core/prebuilt-themes/[
module.exports = {
entry: {
'adf-blue-orange': './ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss',
'adf-blue-purple': './ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss',
'adf-cyan-orange': './ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss',
'adf-cyan-purple': './ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss',
'adf-green-purple': './ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss',
'adf-green-orange': './ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss',
'adf-pink-bluegrey': './ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss',
'adf-indigo-pink': './ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss',
'adf-purple-green': './ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss'
'adf-blue-orange': './config/prebuilt/adf-blue-orange.scss',
'adf-blue-purple': './config/prebuilt/adf-blue-purple.scss',
'adf-cyan-orange': './config/prebuilt/adf-cyan-orange.scss',
'adf-cyan-purple': './config/prebuilt/adf-cyan-purple.scss',
'adf-green-purple': './config/prebuilt/adf-green-purple.scss',
'adf-green-orange': './config/prebuilt/adf-green-orange.scss',
'adf-pink-bluegrey': './config/prebuilt/adf-pink-bluegrey.scss',
'adf-indigo-pink': './config/prebuilt/adf-indigo-pink.scss',
'adf-purple-green': './config/prebuilt/adf-purple-green.scss'
},
output: {
filename: './dist/[name].js'
},
resolve: {
alias: {
"ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core'),
"ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable'),
"ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams'),
"ng2-activiti-analytics": path.resolve(__dirname, '../ng2-activiti-analytics'),
"ng2-activiti-form": path.resolve(__dirname, '../ng2-activiti-form'),
"ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist'),
"ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist'),
"ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist'),
"ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login'),
"ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search'),
"ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social'),
"ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag'),
"ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload'),
"ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer'),
"ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript'),
"ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo'),
}
},
module: {
rules: [{
test: /\.scss$/,
use: extractScss.extract([{
loader: "raw-loader"
}, {
loader: "sass-loader",
options: {
includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
}
loader: "sass-loader"
}])
}]
},