create single scss pack and script

remove unnecessary file from pack
fix problem dev change style
fix theme picker
This commit is contained in:
Eugenio Romano 2017-11-18 11:49:23 +00:00
parent 4b76e6b4a9
commit bbe423759c
26 changed files with 567 additions and 211 deletions

View File

@ -20,8 +20,8 @@
},
{
"glob": "**/*",
"input": "../node_modules/core/prebuilt-themes",
"output": "./prebuilt-themes"
"input": "../node_modules/@alfresco/adf-core/prebuilt-themes",
"output": "./assets/prebuilt-themes"
},
{
"glob": "**/*",
@ -86,6 +86,11 @@
"input": "../resources",
"output": "./resources"
},
{
"glob": "**/*",
"input": "../../lib/core/prebuilt-themes",
"output": "./assets/prebuilt-themes"
},
{
"glob": "**/*",
"input": "../../lib/core/bundles/assets",
@ -117,7 +122,7 @@
"prefix": "app-dev",
"styles": [
"styles.scss",
"custom-style.scss"
"custom-style-dev.scss"
],
"stylePreprocessorOptions": {
"includePaths": [

View File

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

View File

@ -0,0 +1,23 @@
@import './app/components/app-layout/app-layout.component.scss';
@import 'content-services/styles/index';
@import 'process-services/styles/index';
@import 'insights/styles/index';
@import 'core/styles/index';
@import '~@angular/material/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);
@include angular-material-theme($theme);
@include adf-app-layout-theme($theme);
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);
@include adf-insights-theme($theme);
@include adf-core-theme($theme);

View File

@ -1,9 +1,9 @@
@import './app/components/app-layout/app-layout.component.scss';
@import '~@alfresco/adf-content-services/styles/index';
@import '~@alfresco/adf-process-services/styles/index';
@import '~@alfresco/adf-insights/styles/index';
@import '~@alfresco/adf-core/styles/index';
@import '~@alfresco/adf-content-services';
@import '~@alfresco/adf-process-services';
@import '~@alfresco/adf-insights';
@import '~@alfresco/adf-core';
@import '~@angular/material/theming';
@ -15,7 +15,6 @@ $warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include adf-app-layout-theme($theme);
@include adf-content-services-theme($theme);

View File

@ -1,5 +1,5 @@
@import '~@angular/material/theming';
@import './custom-style.scss';
@import '~@alfresco/adf-core/theming';
body, html {
margin: 0;

13
lib/.gitignore vendored
View File

@ -21,10 +21,10 @@ core/**/*.js
core/**/*.js.map
core/**/*.d.ts
analytics/**/*.js
!analytics/karma-test-shim.js
analytics/**/*.js.map
analytics/**/*.d.ts
insights/**/*.js
!insights/karma-test-shim.js
insights/**/*.js.map
insights/**/*.d.ts
!config/karma-test-shim.js!
@ -34,3 +34,8 @@ core/prebuilt-themes/
/bundles/
index.d.ts
/.happypack
process-services/_theming.scs
content-services/_theming.scss
core/_theming.scss
insights/_theming.scss

25
lib/config/bundle-scss.js Normal file
View File

@ -0,0 +1,25 @@
var Bundler = require('scss-bundle').Bundler;
var writeFileSync = require('fs-extra').writeFileSync;
var mkdirpSync = require('fs-extra').mkdirpSync;
new Bundler().Bundle('./core/styles/_index.scss', '**/*.scss').then(result => {
mkdirpSync('core');
writeFileSync('core/_theming.scss', result.bundledContent);
});
new Bundler().Bundle('./insights/styles/_index.scss', '**/*.scss').then(result => {
mkdirpSync('insights');
writeFileSync('insights/_theming.scss', result.bundledContent);
});
new Bundler().Bundle('./process-services/styles/_index.scss', '**/*.scss').then(result => {
mkdirpSync('process-services');
writeFileSync('process-services/_theming.scss', result.bundledContent);
});
new Bundler().Bundle('./content-services/styles/_index.scss', '**/*.scss').then(result => {
mkdirpSync('content-services');
writeFileSync('content-services/_theming.scss', result.bundledContent);
});

View File

@ -130,6 +130,8 @@ module.exports = {
query: {
happyPackMode: true,
"compilerOptions": {
"outDir": "./",
"declaration": true,
"paths": {
}
}

View File

@ -17,6 +17,10 @@ npm-debug.log
!**/*.d.ts
!**/adf-content-services.js
**/*.scss
**/*.css
!**/_theming.scss
coverage/
demo/
dist/

View File

@ -16,7 +16,7 @@
"noFallthroughCasesInSwitch": true,
"removeComments": true,
"declaration": true,
"outDir": "./dist",
"outDir": "./",
"baseUrl" : "./",
"paths": {
"@alfresco/adf-process-services": ["../process-services"],

View File

@ -16,6 +16,10 @@ npm-debug.log
!**/*.d.ts
!**/adf-core.js
**/*.scss
**/*.css
!**/_theming.scss
coverage/
demo/
dist/
@ -24,3 +28,13 @@ typings/
fonts/
i18n/
assets/
!/prebuilt-themes/
!/prebuilt-themes/adf-indigo-pink.css
!/prebuilt-themes/adf-cyan-purple.css
!/prebuilt-themes/adf-green-purple.css
!/prebuilt-themes/adf-cyan-orange.css
!/prebuilt-themes/adf-green-orange.css
!/prebuilt-themes/adf-blue-purple.css
!/prebuilt-themes/adf-blue-orange.css
!/prebuilt-themes/adf-pink-bluegrey.css
!/prebuilt-themes/adf-purple-green.css

View File

@ -81,14 +81,17 @@
[class.isChecking]="actualLoginStep === LoginSteps.Checking"
[class.isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button" [disabled]="!form.valid">
<span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
<div *ngIf="actualLoginStep === LoginSteps.Checking" class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.CHECKING' | translate }}</span>
<mat-spinner id="checking-spinner" class="adf-login-checking-spinner" diameter="30"></mat-spinner>
<div class="adf-login-spinner-container">
<mat-spinner id="checking-spinner" class="adf-login-checking-spinner" [diameter]="25" color="accent"></mat-spinner>
</div>
</div>
<div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
<mat-icon class="welcome-icon">done</mat-icon>

View File

@ -159,10 +159,14 @@
justify-content: center;
}
mat-spinner {
height: 30px !important;
width: 20px !important;
margin-left: 10px;
.adf-login-spinner-container{
margin-left: 15px;
margin-top: 5px;
}
#checking-spinner > svg > circle{
stroke-width: 16% !important;
}
.adf-login-controls {

View File

@ -16,7 +16,7 @@
"noFallthroughCasesInSwitch": true,
"removeComments": true,
"declaration": true,
"outDir": "./dist",
"outDir": "./",
"baseUrl" : "./",
"paths": {
"@alfresco/adf-process-services": ["../process-services"],

View File

@ -16,6 +16,10 @@ npm-debug.log
!**/*.d.ts
!**/adf-insights.js
**/*.scss
**/*.css
!**/_theming.scss
coverage/
demo/
dist/

View File

@ -1,66 +0,0 @@
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
var appContext = require.context(".", true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
const TestBed = require('@angular/core/testing').TestBed;
const browser = require('@angular/platform-browser-dynamic/testing');
const CoreModule = require('@alfresco/adf-core').CoreModule;
const AppConfigService = require('@alfresco/adf-core').AppConfigService;
const AppConfigServiceMock = require('@alfresco/adf-core').AppConfigServiceMock;
const TranslationService = require('@alfresco/adf-core').TranslationService;
const TranslationMock = require('@alfresco/adf-core').TranslationMock;
TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
patchTestBedToDestroyFixturesAfterEveryTest(TestBed);
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreModule],
providers: [
{provide: AppConfigService, useClass: AppConfigServiceMock},
{provide: TranslationService, useClass: TranslationMock}
]
});
});
afterEach(() => {
TestBed.resetTestingModule();
});
function patchTestBedToDestroyFixturesAfterEveryTest(testBed) {
// Original resetTestingModule function of the TestBed.
var _resetTestingModule = testBed.resetTestingModule;
// Monkey-patch the resetTestingModule to destroy fixtures outside of a try/catch block.
// With https://github.com/angular/angular/commit/2c5a67134198a090a24f6671dcdb7b102fea6eba
// errors when destroying components are no longer causing Jasmine to fail.
testBed.resetTestingModule = function() {
try {
if(this._activeFixtures) {
this._activeFixtures.forEach(function (fixture) {
fixture.destroy();
});
}
} finally {
this._activeFixtures = [];
// Regardless of errors or not, run the original reset testing module function.
_resetTestingModule.call(this);
}
};
};

View File

@ -1,41 +0,0 @@
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
var appContext = require.context(".", true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
const TestBed = require('@angular/core/testing').TestBed;
const browser = require('@angular/platform-browser-dynamic/testing');
const CoreModule = require('@alfresco/adf-core').CoreModule;
const AppConfigService = require('@alfresco/adf-core').AppConfigService;
const AppConfigServiceMock = require('@alfresco/adf-core').AppConfigServiceMock;
const TranslationService = require('@alfresco/adf-core').TranslationService;
const TranslationMock = require('@alfresco/adf-core').TranslationMock;
TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreModule],
providers: [
{provide: AppConfigService, useClass: AppConfigServiceMock},
{provide: TranslationService, useClass: TranslationMock}
]
});
});
afterEach(() => {
TestBed.resetTestingModule();
});

View File

@ -1,79 +0,0 @@
"use strict";
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
var task_list_1 = require("../task-list");
exports.nonDeployedApps = [new task_list_1.AppDefinitionRepresentationModel({
id: '1',
name: '1',
icon: 'icon1'
}), new task_list_1.AppDefinitionRepresentationModel({
id: '1',
name: '2',
icon: 'icon2'
}), new task_list_1.AppDefinitionRepresentationModel({
id: '1',
name: '3',
icon: 'icon3'
})];
exports.deployedApps = [new task_list_1.AppDefinitionRepresentationModel({
id: 1,
name: 'App1',
icon: 'icon1',
deploymentId: '1',
defaultAppId: 'fake-app-1',
modelId: null,
tenantId: null
}), new task_list_1.AppDefinitionRepresentationModel({
id: 2,
name: 'App2',
icon: 'icon2',
deploymentId: '2',
modelId: null,
tenantId: null
}), new task_list_1.AppDefinitionRepresentationModel({
id: 3,
name: 'App3',
icon: 'icon3',
deploymentId: '3',
modelId: null,
tenantId: null
}), new task_list_1.AppDefinitionRepresentationModel({
id: 4,
name: 'App4',
icon: 'icon4',
deploymentId: '4',
modelId: 65,
tenantId: null
}), new task_list_1.AppDefinitionRepresentationModel({
id: 5,
name: 'App5',
icon: 'icon5',
deploymentId: '5',
modelId: 66,
tenantId: 9
}), new task_list_1.AppDefinitionRepresentationModel({
id: 6,
name: 'App6',
icon: 'icon6',
deploymentId: '6',
tenantId: 9,
modelId: 66
})];
exports.defaultApp = [new task_list_1.AppDefinitionRepresentationModel({
defaultAppId: 'tasks'
})];

View File

@ -16,7 +16,7 @@
"noFallthroughCasesInSwitch": true,
"removeComments": true,
"declaration": true,
"outDir": "./dist",
"outDir": "./",
"baseUrl" : "./",
"paths": {
"@alfresco/adf-process-services": ["../process-services"],

View File

@ -9,7 +9,8 @@
"rimraf": "rimraf",
"build": "npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style && npm run bundlesize-check",
"test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
"build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
"build-style": "npm run bundle-scss && npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
"bundle-scss": "node ./config/bundle-scss.js",
"test-browser": "node node_modules/karma/bin/karma start karma.conf.js --reporters kjhtml",
"coverage": "",
"prepublishOnly": "npm run build",

View File

@ -16,6 +16,10 @@ npm-debug.log
!**/*.d.ts
!**/adf-process-services.js
**/*.scss
**/*.css
!**/_theming.scss
coverage/
demo/
dist/

View File

@ -0,0 +1,449 @@
@mixin adf-process-filters-theme($theme) {
$primary: map-get($theme, primary);
.adf {
&-filters__entry {
cursor: pointer;
font-size: 14px!important;
font-weight: bold;
opacity: .54;
padding-left: 30px;
.mat-list-item-content {
height: 34px;
}
&.active, &:hover {
color: mat-color($primary);
opacity: 1;
}
}
&-filters__entry-icon {
padding-right: 12px !important;
padding-left: 0px !important;
}
}
}
@mixin adf-task-list-comment-list-theme($theme) {
$primary: map-get($theme, primary);
.adf {
&-comment-img-container {
float: left;
width: 40px;
padding: 5px 10px;
height: 100%;
}
&-comment-user-icon {
padding: 10px 5px;
width: 30px;
background-color: mat-color($primary);
border-radius: 50%;
font-size: 16px;
color: #fff;
text-align: center;
height: 18px;
background-size: cover;
}
&-comment-user-name {
float: left;
width: calc(100% - 120px);
padding: 2px 10px;
font-weight: 600;
color: #595959;
}
&-comment-message {
float: left;
width: calc(100% - 10px);
padding: 2px 10px;
font-style: italic;
color: #595959;
white-space: initial;
}
&-comment-message-time {
float: left;
width: calc(100% - 120px);
padding: 2px 10px;
font-size: 12px;
color: #595959;
}
&-comment-contents {
float: left;
width: calc(100% - 10px);
}
&-datatable ::ng-deep table {
border: none !important;
tbody td {
padding: 0px !important;
border-top: none !important;
}
}
&-people-img {
border-radius: 90%;
width: 40px;
height: 40px;
vertical-align: middle;
}
}
}
@mixin adf-task-list-people-search-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.adf-people-search {
width: 100%;
.activiti-label {
font-weight: bolder;
}
.fix-element-user-list {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.search-text-header {
font-weight: bold;
opacity: 0.54;
}
.search-text-container {
width: 100%;
input {
line-height: normal;
}
}
.search-list-container {
max-height: 152px;
width: 100%;
overflow-y: auto;
}
adf-people-list ::ng-deep adf-datatable ::ng-deep thead {
display: none;
}
.search-list-action-container {
border-top: 1px solid #eee;
text-align: right;
padding: 5px 0px;
margin-top: 5px;
> button {
opacity: 0.54;
font-weight: bolder;
&:hover {
color: mat-color($primary);
}
}
}
.people-pic {
background: mat-color($primary);
width: 30px;
padding: 10px 5px;
border-radius: 90%;
color: #fff;
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: text-bottom;
}
.people-img {
border-radius: 90%;
width: 40px;
height: 40px;
vertical-align: middle;
}
}
}
@mixin adf-task-list-people-theme($theme) {
$primary: map-get($theme, primary);
.assignment-header {
border-bottom: 1px solid #eee;
padding: 6px 20px;
}
.assigment-count {
float: left;
padding: 10px 0px;
font-weight: bolder;
opacity: 0.54;
}
.add-people {
float: right;
padding: 8px;
height: 26px;
opacity: 0.54;
cursor: pointer;
&:hover {
color: mat-color($primary);
}
}
.assignment-top-container.mat-card {
border-top: 2px solid #eee;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.assignment-top-container-content {
display: flex;
flex-flow: column;
align-items: stretch;
flex: 1 0 auto;
max-width: 100%;
}
.assignment-container {
padding: 10px 20px;
border-bottom: 1px solid #eee;
max-width: 100%;
}
.assignment-list-container {
padding: 0px;
}
adf-people-list ::ng-deep adf-datatable ::ng-deep {
thead {
display: none;
}
.people-email {
opacity: 0.54;
}
}
.people-img {
border-radius: 90%;
width: 40px;
height: 40px;
vertical-align: middle;
}
.adf-people-search-people-pic {
background: mat-color($primary);
width: 30px;
padding: 10px 5px;
border-radius: 100px;
color: #fff;
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: text-bottom;
}
}
@mixin adf-task-list-start-task-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.adf-new-task-heading {
padding: 12px 20px;
font-weight: bold;
border-bottom: 1px solid #eee;
font-size: 18px;
float: left;
text-align: left;
width: calc(100% - 40px);
}
.adf-new-task-layout-card {
width: 66.6667%;
margin-right: calc(33.3333% / 2 - 24px);
margin-left: calc(33.3333% / 2 - 24px);
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
}
.adf-new-task-footer {
padding: 4px;
font-size: 18px;
border-top: 1px solid #eee;
float: left;
width: calc(100% - 40px);
text-align: right;
}
.adf-start-task-input-container {
width: 80%;
}
.adf-new-task-text-width {
width: 90%;
}
.adf-mat-select {
padding-top: 0px;
}
adf-start-task {
.adf {
&-start-task-input-container .mat-input-wrapper {
padding-top: 8px;
}
&-error-text-container {
position: absolute;
width: 81%;
height: 20px;
margin-top: 30px;
}
&-error-text {
padding: 1px;
height: 16px;
font-size: 12px;
line-height: 1.33;
float: left;
color: mat-color($warn);
}
&-error-icon {
float: right;
font-size: 17px;
color: mat-color($warn);
}
&-label {
color: rgb(186, 186, 186);;
}
&-invalid {
.mat-input-underline {
background-color: #f44336 !important;
}
.adf-file {
border-color: mat-color($warn);
}
.mat-input-prefix {
color: mat-color($warn);
}
.adf-input {
border-color: mat-color($warn);
}
.adf-label {
color: mat-color($warn);
&:after {
background-color: mat-color($warn);
}
}
}
}
}
}
@mixin adf-task-list-filters-task-theme($theme) {
$primary: map-get($theme, primary);
.adf {
&-filters__entry {
cursor: pointer;
font-size: 14px!important;
font-weight: bold;
opacity: .54;
padding-left: 30px;
.mat-list-item-content {
height: 34px;
}
}
&-filters__entry-icon {
padding-right: 12px !important;
padding-left: 0px !important;
}
&-filters__entry {
&.active, &:hover {
color: mat-color($primary);
opacity: 1;
}
}
}
}
@mixin adf-task-list-header-theme($theme) {
$primary: map-get($theme, primary);
.adf {
&-controls {
display: flex;
justify-content: space-between;
}
&-edit-controls {
display: flex;
justify-content: flex-end;
margin-left: auto;
}
&-switch-to-edit-mode,
&-save-edit-mode {
color: mat-color($primary);
}
&-cancel-edit-mode,
&-claim-controls {
color: rgb(131, 131, 131);
}
&-card-container {
font-family: inherit;
}
}
}
@mixin adf-process-services-theme($theme) {
@include adf-process-filters-theme($theme);
@include adf-task-list-comment-list-theme($theme);
@include adf-task-list-start-task-theme($theme);
@include adf-task-list-people-search-theme($theme);
@include adf-task-list-people-theme($theme);
@include adf-task-list-filters-task-theme($theme);
@include adf-task-list-header-theme($theme);
}

View File

@ -16,7 +16,7 @@
"noFallthroughCasesInSwitch": true,
"removeComments": true,
"declaration": true,
"outDir": "./dist",
"outDir": "./",
"baseUrl" : "./",
"paths": {
"@alfresco/adf-process-services": ["../process-services"],