mirror of https://github.com/Chocobozzz/PeerTube
Upgrade client dependencies
Migrate removed primeng theme to custom CSSpull/3334/head
parent
fce7fe04ee
commit
4f926722ea
|
@ -177,7 +177,6 @@
|
||||||
"optimization": true,
|
"optimization": true,
|
||||||
"outputHashing": "all",
|
"outputHashing": "all",
|
||||||
"sourceMap": false,
|
"sourceMap": false,
|
||||||
"extractCss": true,
|
|
||||||
"namedChunks": false,
|
"namedChunks": false,
|
||||||
"aot": true,
|
"aot": true,
|
||||||
"extractLicenses": true,
|
"extractLicenses": true,
|
||||||
|
@ -208,7 +207,6 @@
|
||||||
"optimization": false,
|
"optimization": false,
|
||||||
"outputHashing": "none",
|
"outputHashing": "none",
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"extractCss": true,
|
|
||||||
"namedChunks": true,
|
"namedChunks": true,
|
||||||
"aot": true,
|
"aot": true,
|
||||||
"buildOptimizer": false,
|
"buildOptimizer": false,
|
||||||
|
|
|
@ -26,24 +26,26 @@
|
||||||
"sass-lint": "sass-lint"
|
"sass-lint": "sass-lint"
|
||||||
},
|
},
|
||||||
"typings": "*.d.ts",
|
"typings": "*.d.ts",
|
||||||
|
"resolutions": {
|
||||||
|
"@types/mousetrap": "1.6.3"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^0.1001.0-next.6",
|
"@angular-devkit/build-angular": "^0.1100.2",
|
||||||
"@angular/animations": "^10.1.0-next.8",
|
"@angular/animations": "^11.0.1",
|
||||||
"@angular/cdk": "^10.0.0",
|
"@angular/cdk": "^11.0.0",
|
||||||
"@angular/cli": "^10.1.0-next.6",
|
"@angular/cli": "^11.0.2",
|
||||||
"@angular/common": "^10.1.0-next.8",
|
"@angular/common": "^11.0.1",
|
||||||
"@angular/compiler": "^10.1.0-next.8",
|
"@angular/compiler": "^11.0.1",
|
||||||
"@angular/compiler-cli": "^10.1.0-next.8",
|
"@angular/compiler-cli": "^11.0.1",
|
||||||
"@angular/core": "^10.1.0-next.8",
|
"@angular/core": "^11.0.1",
|
||||||
"@angular/forms": "^10.1.0-next.8",
|
"@angular/forms": "^11.0.1",
|
||||||
"@angular/localize": "^10.1.0-next.8",
|
"@angular/localize": "^11.0.1",
|
||||||
"@angular/platform-browser": "^10.1.0-next.8",
|
"@angular/platform-browser": "^11.0.1",
|
||||||
"@angular/platform-browser-dynamic": "^10.1.0-next.8",
|
"@angular/platform-browser-dynamic": "^11.0.1",
|
||||||
"@angular/router": "^10.1.0-next.8",
|
"@angular/router": "^11.0.1",
|
||||||
"@angular/service-worker": "^10.1.0-next.8",
|
"@angular/service-worker": "^11.0.1",
|
||||||
"@angularclass/hmr": "^2.1.3",
|
|
||||||
"@neos21/bootstrap3-glyphicons": "^1.0.1",
|
"@neos21/bootstrap3-glyphicons": "^1.0.1",
|
||||||
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
|
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
|
||||||
"@ng-select/ng-select": "^5.0.0",
|
"@ng-select/ng-select": "^5.0.0",
|
||||||
"@ngx-i18nsupport/ngx-i18nsupport": "^1.1.6",
|
"@ngx-i18nsupport/ngx-i18nsupport": "^1.1.6",
|
||||||
"@ngx-i18nsupport/tooling": "^8.0.3",
|
"@ngx-i18nsupport/tooling": "^8.0.3",
|
||||||
|
@ -62,23 +64,21 @@
|
||||||
"@types/lodash-es": "^4.17.0",
|
"@types/lodash-es": "^4.17.0",
|
||||||
"@types/markdown-it": "^10.0.1",
|
"@types/markdown-it": "^10.0.1",
|
||||||
"@types/node": "^14.0.14",
|
"@types/node": "^14.0.14",
|
||||||
"@types/sanitize-html": "1.23.3",
|
"@types/sanitize-html": "1.27.0",
|
||||||
"@types/sha.js": "^2.4.0",
|
"@types/sha.js": "^2.4.0",
|
||||||
"@types/socket.io-client": "^1.4.32",
|
|
||||||
"@types/video.js": "^7.3.8",
|
"@types/video.js": "^7.3.8",
|
||||||
"@types/webtorrent": "^0.107.0",
|
"@types/webtorrent": "^0.109.0",
|
||||||
"angular2-hotkeys": "^2.1.2",
|
"angular2-hotkeys": "^2.1.2",
|
||||||
"angularx-qrcode": "10.0.6",
|
"angularx-qrcode": "10.0.11",
|
||||||
"bootstrap": "^4.1.3",
|
"bootstrap": "^4.1.3",
|
||||||
"buffer": "^5.1.0",
|
"buffer": "^6.0.2",
|
||||||
"cache-chunk-store": "^3.0.0",
|
"cache-chunk-store": "^3.0.0",
|
||||||
"chart.js": "^2.9.3",
|
"chart.js": "^2.9.3",
|
||||||
"codelyzer": "^6.0.0",
|
"codelyzer": "^6.0.0",
|
||||||
"core-js": "^3.1.4",
|
"core-js": "^3.1.4",
|
||||||
"css-loader": "^3.1.0",
|
"css-loader": "^5.0.1",
|
||||||
"debug": "^4.1.1",
|
"debug": "^4.3.1",
|
||||||
"dexie": "^3.0.0",
|
"dexie": "^3.0.0",
|
||||||
"extract-text-webpack-plugin": "4.0.0-beta.0",
|
|
||||||
"file-loader": "^6.0.0",
|
"file-loader": "^6.0.0",
|
||||||
"focus-visible": "^5.0.2",
|
"focus-visible": "^5.0.2",
|
||||||
"hls.js": "^0.14.16",
|
"hls.js": "^0.14.16",
|
||||||
|
@ -86,52 +86,53 @@
|
||||||
"html-webpack-plugin": "^4.0.3",
|
"html-webpack-plugin": "^4.0.3",
|
||||||
"https-browserify": "^1.0.0",
|
"https-browserify": "^1.0.0",
|
||||||
"jasmine-core": "~3.6.0",
|
"jasmine-core": "~3.6.0",
|
||||||
"jasmine-spec-reporter": "~5.0.0",
|
"jasmine-spec-reporter": "~6.0.0",
|
||||||
"jschannel": "^1.0.2",
|
"jschannel": "^1.0.2",
|
||||||
"karma": "~5.1.0",
|
"karma": "~5.2.3",
|
||||||
"karma-chrome-launcher": "~3.1.0",
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
"karma-coverage-istanbul-reporter": "~3.0.2",
|
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||||
"karma-jasmine": "~4.0.1",
|
"karma-jasmine": "~4.0.1",
|
||||||
"karma-jasmine-html-reporter": "^1.5.0",
|
"karma-jasmine-html-reporter": "^1.5.0",
|
||||||
"linkifyjs": "^2.1.5",
|
"linkifyjs": "^2.1.5",
|
||||||
"lodash-es": "^4.17.4",
|
"lodash-es": "^4.17.4",
|
||||||
"markdown-it": "11.x",
|
"markdown-it": "12.0.2",
|
||||||
"node-sass": "^4.9.3",
|
"mini-css-extract-plugin": "^1.3.1",
|
||||||
|
"node-sass": "^5.0.0",
|
||||||
"npm-font-source-sans-pro": "^1.0.2",
|
"npm-font-source-sans-pro": "^1.0.2",
|
||||||
"p2p-media-loader-hlsjs": "^0.6.2",
|
"p2p-media-loader-hlsjs": "^0.6.2",
|
||||||
"path-browserify": "^1.0.0",
|
"path-browserify": "^1.0.0",
|
||||||
"primeng": "^9.0.0-rc.4",
|
"primeng": "^11.0.0-rc.1",
|
||||||
"process": "^0.11.10",
|
"process": "^0.11.10",
|
||||||
"protractor": "~7.0.0",
|
"protractor": "~7.0.0",
|
||||||
"purify-css": "^1.2.5",
|
"purify-css": "^1.2.5",
|
||||||
"purifycss-webpack": "^0.7.0",
|
"purifycss-webpack": "^0.7.0",
|
||||||
"raw-loader": "^4.0.0",
|
"raw-loader": "^4.0.0",
|
||||||
"rxjs": "^6.5.2",
|
"rxjs": "^6.5.2",
|
||||||
"sanitize-html": "^1.18.4",
|
"sanitize-html": "^2.1.2",
|
||||||
"sass-lint": "^1.13.1",
|
"sass-lint": "^1.13.1",
|
||||||
"sass-loader": "8.0.2",
|
"sass-loader": "10.1.0",
|
||||||
"sass-resources-loader": "^2.0.0",
|
"sass-resources-loader": "^2.0.0",
|
||||||
"sha.js": "^2.4.11",
|
"sha.js": "^2.4.11",
|
||||||
"socket.io-client": "^2.2.0",
|
"socket.io-client": "^3.0.3",
|
||||||
"stream-browserify": "^3.0.0",
|
"stream-browserify": "^3.0.0",
|
||||||
"stream-http": "^3.0.0",
|
"stream-http": "^3.0.0",
|
||||||
"terser-webpack-plugin": "^3.0.0",
|
"terser-webpack-plugin": "^4",
|
||||||
"ts-loader": "^8.0.2",
|
"ts-loader": "^8.0.2",
|
||||||
"tslib": "^2.0.0",
|
"tslib": "^2.0.0",
|
||||||
"tslint": "~6.1.0",
|
"tslint": "~6.1.0",
|
||||||
"tslint-angular": "^3.0.2",
|
"tslint-angular": "^3.0.2",
|
||||||
"tslint-config-standard": "^9.0.0",
|
"tslint-config-standard": "^9.0.0",
|
||||||
"typescript": "~3.9.5",
|
"typescript": "~4.0.5",
|
||||||
"video.js": "^7",
|
"video.js": "^7",
|
||||||
"videojs-contextmenu-ui": "^5.0.0",
|
"videojs-contextmenu-ui": "^5.0.0",
|
||||||
"videojs-contrib-quality-levels": "^2.0.9",
|
"videojs-contrib-quality-levels": "^2.0.9",
|
||||||
"videojs-dock": "^2.0.2",
|
"videojs-dock": "^2.0.2",
|
||||||
"videojs-hotkeys": "^0.2.27",
|
"videojs-hotkeys": "^0.2.27",
|
||||||
"videostream": "~3.2.1",
|
"videostream": "~3.2.1",
|
||||||
"webpack-bundle-analyzer": "^3.0.2",
|
"webpack-bundle-analyzer": "^4.1.0",
|
||||||
"webpack-cli": "^3.0.8",
|
"webpack-cli": "^4.2.0",
|
||||||
"webtorrent": "^0.108.1",
|
"webtorrent": "^0.111.0",
|
||||||
"whatwg-fetch": "^3.0.0",
|
"whatwg-fetch": "^3.0.0",
|
||||||
"zone.js": "~0.10.2"
|
"zone.js": "~0.11.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div>
|
<div class="root">
|
||||||
<my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
|
<my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
|
||||||
|
|
||||||
<div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
|
<div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
|
||||||
|
|
|
@ -5,4 +5,6 @@ my-top-menu-dropdown {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
@include sub-menu-h1;
|
@include sub-menu-h1;
|
||||||
|
}
|
||||||
|
|
|
@ -6,7 +6,6 @@ import { BatchDomainsModalComponent } from '@app/shared/shared-moderation'
|
||||||
import { ActorFollow } from '@shared/models'
|
import { ActorFollow } from '@shared/models'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-followers-list',
|
|
||||||
templateUrl: './following-list.component.html',
|
templateUrl: './following-list.component.html',
|
||||||
styleUrls: [ '../follows.component.scss', './following-list.component.scss' ]
|
styleUrls: [ '../follows.component.scss', './following-list.component.scss' ]
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,32 +5,4 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
p-selectButton {
|
|
||||||
::ng-deep {
|
|
||||||
.ui-button-text {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-button.ui-state-default {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-button.ui-state-active {
|
|
||||||
background-color: pvar(--mainColor);
|
|
||||||
border-color: pvar(--mainColor);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: pvar(--mainHoverColor);
|
|
||||||
border-color: pvar(--mainHoverColor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-button:not(.ui-state-active).ui-state-focus {
|
|
||||||
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,11 +9,17 @@
|
||||||
<div>{{ labelNotifications[notificationType] }}</div>
|
<div>{{ labelNotifications[notificationType] }}</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<p-inputSwitch [(ngModel)]="webNotifications[notificationType]" (onChange)="updateWebSetting(notificationType, $event.checked)"></p-inputSwitch>
|
<my-input-switch
|
||||||
|
[(ngModel)]="webNotifications[notificationType]"
|
||||||
|
(ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
|
||||||
|
></my-input-switch>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="emailEnabled">
|
<div *ngIf="emailEnabled">
|
||||||
<p-inputSwitch [(ngModel)]="emailNotifications[notificationType]" (onChange)="updateEmailSetting(notificationType, $event.checked)"></p-inputSwitch>
|
<my-input-switch
|
||||||
|
[(ngModel)]="emailNotifications[notificationType]"
|
||||||
|
(ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
|
||||||
|
></my-input-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { AutoCompleteModule } from 'primeng/autocomplete'
|
import { AutoCompleteModule } from 'primeng/autocomplete'
|
||||||
import { InputSwitchModule } from 'primeng/inputswitch'
|
|
||||||
import { TableModule } from 'primeng/table'
|
import { TableModule } from 'primeng/table'
|
||||||
import { DragDropModule } from '@angular/cdk/drag-drop'
|
import { DragDropModule } from '@angular/cdk/drag-drop'
|
||||||
import { NgModule } from '@angular/core'
|
import { NgModule } from '@angular/core'
|
||||||
|
@ -29,7 +28,6 @@ import { MyAccountComponent } from './my-account.component'
|
||||||
|
|
||||||
AutoCompleteModule,
|
AutoCompleteModule,
|
||||||
TableModule,
|
TableModule,
|
||||||
InputSwitchModule,
|
|
||||||
DragDropModule,
|
DragDropModule,
|
||||||
|
|
||||||
SharedMainModule,
|
SharedMainModule,
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
|
<div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
|
||||||
<p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
|
<p-chart *ngIf="chartOptions && videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,6 +21,8 @@ export class MyVideoChannelsComponent implements OnInit {
|
||||||
channelsSearch: string
|
channelsSearch: string
|
||||||
channelsSearchChanged = new Subject<string>()
|
channelsSearchChanged = new Subject<string>()
|
||||||
|
|
||||||
|
chartOptions: any
|
||||||
|
|
||||||
private user: User
|
private user: User
|
||||||
|
|
||||||
constructor (
|
constructor (
|
||||||
|
@ -47,55 +49,6 @@ export class MyVideoChannelsComponent implements OnInit {
|
||||||
return this.screenService.isInSmallView()
|
return this.screenService.isInSmallView()
|
||||||
}
|
}
|
||||||
|
|
||||||
get chartOptions () {
|
|
||||||
return {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
|
|
||||||
max: Math.max(1, this.videoChannelsMaximumDailyViews)
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
padding: {
|
|
||||||
left: 15,
|
|
||||||
right: 15,
|
|
||||||
top: 10,
|
|
||||||
bottom: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltips: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false,
|
|
||||||
custom: function (tooltip: any) {
|
|
||||||
if (!tooltip) return
|
|
||||||
// disable displaying the color box
|
|
||||||
tooltip.displayColors = false
|
|
||||||
},
|
|
||||||
callbacks: {
|
|
||||||
label: (tooltip: any, data: any) => `${tooltip.value} views`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
resetSearch () {
|
resetSearch () {
|
||||||
this.channelsSearch = ''
|
this.channelsSearch = ''
|
||||||
this.onChannelsSearchChanged()
|
this.onChannelsSearchChanged()
|
||||||
|
@ -159,6 +112,7 @@ channel with the same name (${videoChannel.name})!`,
|
||||||
day => day.views
|
day => day.views
|
||||||
).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
|
).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
|
||||||
)
|
)
|
||||||
|
|
||||||
this.videoChannelsMaximumDailyViews = max(
|
this.videoChannelsMaximumDailyViews = max(
|
||||||
// compute local maximum daily views for each channel, by their "views" attribute
|
// compute local maximum daily views for each channel, by their "views" attribute
|
||||||
this.videoChannels.map(v => maxBy(
|
this.videoChannels.map(v => maxBy(
|
||||||
|
@ -166,6 +120,57 @@ channel with the same name (${videoChannel.name})!`,
|
||||||
day => day.views
|
day => day.views
|
||||||
).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
|
).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
|
||||||
)
|
)
|
||||||
|
|
||||||
|
this.buildChartOptions()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private buildChartOptions () {
|
||||||
|
this.chartOptions = {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
display: false
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
display: false,
|
||||||
|
ticks: {
|
||||||
|
min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
|
||||||
|
max: Math.max(1, this.videoChannelsMaximumDailyViews)
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
padding: {
|
||||||
|
left: 15,
|
||||||
|
right: 15,
|
||||||
|
top: 10,
|
||||||
|
bottom: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
point: {
|
||||||
|
radius: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
mode: 'index',
|
||||||
|
intersect: false,
|
||||||
|
custom: function (tooltip: any) {
|
||||||
|
if (!tooltip) return
|
||||||
|
// disable displaying the color box
|
||||||
|
tooltip.displayColors = false
|
||||||
|
},
|
||||||
|
callbacks: {
|
||||||
|
label: (tooltip: any, data: any) => `${tooltip.value} views`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
mode: 'index',
|
||||||
|
intersect: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
<div class="top-buttons">
|
<div class="top-buttons">
|
||||||
<div class="history-switch">
|
<div class="history-switch">
|
||||||
<p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch>
|
<my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
|
||||||
<label i18n>Video history</label>
|
<label i18n>Video history</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -47,7 +47,11 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
|
||||||
ngOnInit () {
|
ngOnInit () {
|
||||||
super.ngOnInit()
|
super.ngOnInit()
|
||||||
|
|
||||||
|
this.authService.userInformationLoaded
|
||||||
|
.subscribe(() => {
|
||||||
this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
|
this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy () {
|
ngOnDestroy () {
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { AutoCompleteModule } from 'primeng/autocomplete'
|
import { AutoCompleteModule } from 'primeng/autocomplete'
|
||||||
import { InputSwitchModule } from 'primeng/inputswitch'
|
|
||||||
import { TableModule } from 'primeng/table'
|
import { TableModule } from 'primeng/table'
|
||||||
import { DragDropModule } from '@angular/cdk/drag-drop'
|
import { DragDropModule } from '@angular/cdk/drag-drop'
|
||||||
import { NgModule } from '@angular/core'
|
import { NgModule } from '@angular/core'
|
||||||
|
@ -34,7 +33,6 @@ import { MyVideosComponent } from './my-videos/my-videos.component'
|
||||||
|
|
||||||
AutoCompleteModule,
|
AutoCompleteModule,
|
||||||
TableModule,
|
TableModule,
|
||||||
InputSwitchModule,
|
|
||||||
DragDropModule,
|
DragDropModule,
|
||||||
|
|
||||||
SharedMainModule,
|
SharedMainModule,
|
||||||
|
|
|
@ -150,12 +150,11 @@ p-calendar {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
::ng-deep {
|
::ng-deep {
|
||||||
input,
|
.p-calendar {
|
||||||
.ui-calendar {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
.p-inputtext {
|
||||||
@include peertube-input-text(100%);
|
@include peertube-input-text(100%);
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { InputSwitchModule } from 'primeng/inputswitch'
|
|
||||||
import { CommonModule } from '@angular/common'
|
import { CommonModule } from '@angular/common'
|
||||||
import { NgModule } from '@angular/core'
|
import { NgModule } from '@angular/core'
|
||||||
|
import { SharedFormModule } from '@app/shared/shared-forms'
|
||||||
import { SharedMainModule } from '@app/shared/shared-main'
|
import { SharedMainModule } from '@app/shared/shared-main'
|
||||||
import { SharedSearchModule } from '@app/shared/shared-search'
|
import { SharedSearchModule } from '@app/shared/shared-search'
|
||||||
import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
|
import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
|
||||||
|
@ -12,12 +13,12 @@ import { RecommendedVideosStore } from './recommended-videos.store'
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
InputSwitchModule,
|
|
||||||
|
|
||||||
SharedMainModule,
|
SharedMainModule,
|
||||||
SharedSearchModule,
|
SharedSearchModule,
|
||||||
SharedVideoPlaylistModule,
|
SharedVideoPlaylistModule,
|
||||||
SharedVideoMiniatureModule
|
SharedVideoMiniatureModule,
|
||||||
|
SharedFormModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
RecommendedVideosComponent
|
RecommendedVideosComponent
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
[ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
|
[ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
|
||||||
>
|
>
|
||||||
<span i18n>AUTOPLAY</span>
|
<span i18n>AUTOPLAY</span>
|
||||||
<p-inputSwitch class="small" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
|
<my-input-switch class="small" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></my-input-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@ import { PluginService } from '@app/core/plugins/plugin.service'
|
||||||
import { CustomModalComponent } from '@app/modal/custom-modal.component'
|
import { CustomModalComponent } from '@app/modal/custom-modal.component'
|
||||||
import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
|
import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
|
||||||
import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
|
import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
|
||||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
||||||
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
|
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
|
||||||
import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
|
import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
|
||||||
import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
|
import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
|
||||||
|
@ -54,8 +54,11 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
private location: PlatformLocation,
|
private location: PlatformLocation,
|
||||||
private modalService: NgbModal,
|
private modalService: NgbModal,
|
||||||
private markdownService: MarkdownService,
|
private markdownService: MarkdownService,
|
||||||
|
private ngbConfig: NgbConfig,
|
||||||
public menu: MenuService
|
public menu: MenuService
|
||||||
) { }
|
) {
|
||||||
|
this.ngbConfig.animation = false
|
||||||
|
}
|
||||||
|
|
||||||
get instanceName () {
|
get instanceName () {
|
||||||
return this.serverConfig.instance.name
|
return this.serverConfig.instance.name
|
||||||
|
|
|
@ -3,18 +3,19 @@ import { Injectable, NgZone } from '@angular/core'
|
||||||
import { LiveVideoEventPayload, LiveVideoEventType, UserNotification as UserNotificationServer } from '@shared/models'
|
import { LiveVideoEventPayload, LiveVideoEventType, UserNotification as UserNotificationServer } from '@shared/models'
|
||||||
import { environment } from '../../../environments/environment'
|
import { environment } from '../../../environments/environment'
|
||||||
import { AuthService } from '../auth'
|
import { AuthService } from '../auth'
|
||||||
|
import { io, Socket } from 'socket.io-client'
|
||||||
|
|
||||||
export type NotificationEvent = 'new' | 'read' | 'read-all'
|
export type NotificationEvent = 'new' | 'read' | 'read-all'
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class PeerTubeSocket {
|
export class PeerTubeSocket {
|
||||||
private io: typeof import ('socket.io-client')
|
private io: typeof io
|
||||||
|
|
||||||
private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
|
private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
|
||||||
private liveVideosSubject = new Subject<{ type: LiveVideoEventType, payload: LiveVideoEventPayload }>()
|
private liveVideosSubject = new Subject<{ type: LiveVideoEventType, payload: LiveVideoEventPayload }>()
|
||||||
|
|
||||||
private notificationSocket: SocketIOClient.Socket
|
private notificationSocket: Socket
|
||||||
private liveVideosSocket: SocketIOClient.Socket
|
private liveVideosSocket: Socket
|
||||||
|
|
||||||
constructor (
|
constructor (
|
||||||
private auth: AuthService,
|
private auth: AuthService,
|
||||||
|
@ -77,7 +78,7 @@ export class PeerTubeSocket {
|
||||||
private async importIOIfNeeded () {
|
private async importIOIfNeeded () {
|
||||||
if (this.io) return
|
if (this.io) return
|
||||||
|
|
||||||
this.io = (await import('socket.io-client') as any).default
|
this.io = (await import('socket.io-client')).io
|
||||||
}
|
}
|
||||||
|
|
||||||
private dispatchLiveVideoEvent (type: LiveVideoEventType, payload: LiveVideoEventPayload) {
|
private dispatchLiveVideoEvent (type: LiveVideoEventType, payload: LiveVideoEventPayload) {
|
||||||
|
|
|
@ -54,7 +54,8 @@
|
||||||
<a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
|
<a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
|
||||||
<my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
|
<my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
|
||||||
<ng-container i18n>Help share videos</ng-container>
|
<ng-container i18n>Help share videos</ng-container>
|
||||||
<input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
|
|
||||||
|
<my-input-switch class="ml-auto" [checked]="user.webTorrentEnabled"></my-input-switch>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
|
|
|
@ -352,48 +352,6 @@ menu {
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox]{
|
|
||||||
position: absolute;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
cursor: pointer;
|
|
||||||
text-indent: -9999px;
|
|
||||||
width: 35px;
|
|
||||||
height: 20px;
|
|
||||||
background: #cccccc;
|
|
||||||
display: block;
|
|
||||||
border-radius: 100px;
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 3px;
|
|
||||||
left: 3px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
background: pvar(--mainBackgroundColor);
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:after {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + label {
|
|
||||||
background: pvar(--mainColor);
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
left: calc(100% - 3px);
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobile-view) {
|
@media screen and (max-width: $mobile-view) {
|
||||||
.menu-wrapper {
|
.menu-wrapper {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
|
|
@ -2,6 +2,7 @@ export * from './form-validator.service'
|
||||||
export * from './form-reactive'
|
export * from './form-reactive'
|
||||||
export * from './select'
|
export * from './select'
|
||||||
export * from './input-readonly-copy.component'
|
export * from './input-readonly-copy.component'
|
||||||
|
export * from './input-switch.component'
|
||||||
export * from './markdown-textarea.component'
|
export * from './markdown-textarea.component'
|
||||||
export * from './peertube-checkbox.component'
|
export * from './peertube-checkbox.component'
|
||||||
export * from './preview-upload.component'
|
export * from './preview-upload.component'
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div (click)="update()">
|
||||||
|
<input type="checkbox" [checked]="checked"/>
|
||||||
|
<label class="ml-auto">Toggle</label>
|
||||||
|
</div>
|
|
@ -0,0 +1,44 @@
|
||||||
|
@import '_variables';
|
||||||
|
@import '_mixins';
|
||||||
|
|
||||||
|
input {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
& + label {
|
||||||
|
cursor: pointer;
|
||||||
|
text-indent: -9999px;
|
||||||
|
width: 35px;
|
||||||
|
height: 20px;
|
||||||
|
background: #cccccc;
|
||||||
|
display: block;
|
||||||
|
border-radius: 100px;
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 3px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
background: pvar(--mainBackgroundColor);
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:after {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked + label {
|
||||||
|
background: pvar(--mainColor);
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
left: calc(100% - 3px);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { Component, forwardRef, Input } from '@angular/core'
|
||||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'my-input-switch',
|
||||||
|
styleUrls: [ './input-switch.component.scss' ],
|
||||||
|
templateUrl: './input-switch.component.html',
|
||||||
|
providers: [
|
||||||
|
{
|
||||||
|
provide: NG_VALUE_ACCESSOR,
|
||||||
|
useExisting: forwardRef(() => InputSwitchComponent),
|
||||||
|
multi: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class InputSwitchComponent implements ControlValueAccessor {
|
||||||
|
@Input() checked = false
|
||||||
|
@Input() inputName: string
|
||||||
|
|
||||||
|
propagateChange = (_: any) => { /* empty */ }
|
||||||
|
|
||||||
|
writeValue (checked: boolean) {
|
||||||
|
this.checked = checked
|
||||||
|
}
|
||||||
|
|
||||||
|
registerOnChange (fn: (_: any) => void) {
|
||||||
|
this.propagateChange = fn
|
||||||
|
}
|
||||||
|
|
||||||
|
registerOnTouched () {
|
||||||
|
// Unused
|
||||||
|
}
|
||||||
|
|
||||||
|
update () {
|
||||||
|
this.checked = !this.checked
|
||||||
|
this.propagateChange(this.checked)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,13 +1,14 @@
|
||||||
|
|
||||||
import { InputMaskModule } from 'primeng/inputmask'
|
import { InputMaskModule } from 'primeng/inputmask'
|
||||||
import { InputSwitchModule } from 'primeng/inputswitch'
|
|
||||||
import { NgModule } from '@angular/core'
|
import { NgModule } from '@angular/core'
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
||||||
import { NgSelectModule } from '@ng-select/ng-select'
|
import { NgSelectModule } from '@ng-select/ng-select'
|
||||||
import { SharedGlobalIconModule } from '../shared-icons'
|
import { SharedGlobalIconModule } from '../shared-icons'
|
||||||
import { SharedMainModule } from '../shared-main/shared-main.module'
|
import { SharedMainModule } from '../shared-main/shared-main.module'
|
||||||
|
import { DynamicFormFieldComponent } from './dynamic-form-field.component'
|
||||||
import { FormValidatorService } from './form-validator.service'
|
import { FormValidatorService } from './form-validator.service'
|
||||||
import { InputReadonlyCopyComponent } from './input-readonly-copy.component'
|
import { InputReadonlyCopyComponent } from './input-readonly-copy.component'
|
||||||
|
import { InputSwitchComponent } from './input-switch.component'
|
||||||
import { MarkdownTextareaComponent } from './markdown-textarea.component'
|
import { MarkdownTextareaComponent } from './markdown-textarea.component'
|
||||||
import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
|
import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
|
||||||
import { PreviewUploadComponent } from './preview-upload.component'
|
import { PreviewUploadComponent } from './preview-upload.component'
|
||||||
|
@ -15,7 +16,6 @@ import { ReactiveFileComponent } from './reactive-file.component'
|
||||||
import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
|
import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
|
||||||
import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
|
import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
|
||||||
import { TimestampInputComponent } from './timestamp-input.component'
|
import { TimestampInputComponent } from './timestamp-input.component'
|
||||||
import { DynamicFormFieldComponent } from './dynamic-form-field.component'
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -23,7 +23,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
|
|
||||||
InputMaskModule,
|
InputMaskModule,
|
||||||
InputSwitchModule,
|
|
||||||
NgSelectModule,
|
NgSelectModule,
|
||||||
|
|
||||||
SharedMainModule,
|
SharedMainModule,
|
||||||
|
@ -39,6 +38,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
|
||||||
TextareaAutoResizeDirective,
|
TextareaAutoResizeDirective,
|
||||||
TimestampInputComponent,
|
TimestampInputComponent,
|
||||||
|
|
||||||
|
InputSwitchComponent,
|
||||||
|
|
||||||
SelectChannelComponent,
|
SelectChannelComponent,
|
||||||
SelectOptionsComponent,
|
SelectOptionsComponent,
|
||||||
SelectTagsComponent,
|
SelectTagsComponent,
|
||||||
|
@ -52,7 +53,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
|
|
||||||
InputMaskModule,
|
InputMaskModule,
|
||||||
InputSwitchModule,
|
|
||||||
NgSelectModule,
|
NgSelectModule,
|
||||||
|
|
||||||
InputReadonlyCopyComponent,
|
InputReadonlyCopyComponent,
|
||||||
|
@ -63,6 +63,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
|
||||||
TextareaAutoResizeDirective,
|
TextareaAutoResizeDirective,
|
||||||
TimestampInputComponent,
|
TimestampInputComponent,
|
||||||
|
|
||||||
|
InputSwitchComponent,
|
||||||
|
|
||||||
SelectChannelComponent,
|
SelectChannelComponent,
|
||||||
SelectOptionsComponent,
|
SelectOptionsComponent,
|
||||||
SelectTagsComponent,
|
SelectTagsComponent,
|
||||||
|
|
|
@ -11,5 +11,10 @@ p-inputmask {
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: pvar(--mainBackgroundColor);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ type Metadata = {
|
||||||
levels: Hlsjs.Level[]
|
levels: Hlsjs.Level[]
|
||||||
}
|
}
|
||||||
|
|
||||||
type CustomAudioTrack = Hlsjs.AudioTrack & { name?: string, lang?: string }
|
type CustomAudioTrack = Hlsjs.HlsAudioTrack & { name?: string, lang?: string }
|
||||||
|
|
||||||
const registerSourceHandler = function (vjs: typeof videojs) {
|
const registerSourceHandler = function (vjs: typeof videojs) {
|
||||||
if (!Hlsjs.isSupported()) {
|
if (!Hlsjs.isSupported()) {
|
||||||
|
|
|
@ -1,24 +0,0 @@
|
||||||
import { NgModuleRef, ApplicationRef } from '@angular/core'
|
|
||||||
import { createNewHosts } from '@angularclass/hmr'
|
|
||||||
import { enableDebugTools } from '@angular/platform-browser'
|
|
||||||
|
|
||||||
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
|
|
||||||
let ngModule: NgModuleRef<any>
|
|
||||||
module.hot.accept()
|
|
||||||
bootstrap()
|
|
||||||
.then(mod => {
|
|
||||||
ngModule = mod
|
|
||||||
|
|
||||||
const applicationRef = ngModule.injector.get(ApplicationRef)
|
|
||||||
const componentRef = applicationRef.components[ 0 ]
|
|
||||||
// allows to run `ng.profiler.timeChangeDetection();`
|
|
||||||
enableDebugTools(componentRef)
|
|
||||||
})
|
|
||||||
module.hot.dispose(() => {
|
|
||||||
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef)
|
|
||||||
const elements = appRef.components.map(c => c.location.nativeElement)
|
|
||||||
const makeVisible = createNewHosts(elements)
|
|
||||||
ngModule.destroy()
|
|
||||||
makeVisible()
|
|
||||||
})
|
|
||||||
}
|
|
|
@ -4,8 +4,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
|
||||||
import { AppModule } from './app/app.module'
|
import { AppModule } from './app/app.module'
|
||||||
import { environment } from './environments/environment'
|
import { environment } from './environments/environment'
|
||||||
|
|
||||||
import { hmrBootstrap } from './hmr'
|
|
||||||
|
|
||||||
if (environment.production) {
|
if (environment.production) {
|
||||||
enableProdMode()
|
enableProdMode()
|
||||||
}
|
}
|
||||||
|
@ -36,13 +34,4 @@ const bootstrap = () => platformBrowserDynamic()
|
||||||
return null
|
return null
|
||||||
})
|
})
|
||||||
|
|
||||||
if (environment.hmr) {
|
|
||||||
if (module[ 'hot' ]) {
|
|
||||||
hmrBootstrap(module, bootstrap)
|
|
||||||
} else {
|
|
||||||
console.error('HMR is not enabled for webpack-dev-server!')
|
|
||||||
console.log('Are you using the --hmr flag for ng serve?')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
bootstrap()
|
bootstrap()
|
||||||
}
|
|
||||||
|
|
|
@ -21,7 +21,7 @@ $assets-path: '../../assets/';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/*** theme ***/
|
/*** theme ***/
|
||||||
// now beware node-sass requires interpolation
|
// now beware sass requires interpolation
|
||||||
// for css custom properties #{$var}
|
// for css custom properties #{$var}
|
||||||
--mainColor: #{$main-color};
|
--mainColor: #{$main-color};
|
||||||
--mainColorLighter: #{$main-color-lighter};
|
--mainColorLighter: #{$main-color-lighter};
|
||||||
|
|
|
@ -2,7 +2,487 @@
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
|
|
||||||
@import '~primeng/resources/primeng.css';
|
@import '~primeng/resources/primeng.css';
|
||||||
@import '~primeng/resources/themes/nova-light/theme.css';
|
|
||||||
|
// Taken from old nova light theme
|
||||||
|
|
||||||
|
body .p-disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checkbox
|
||||||
|
body .p-checkbox {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
body .p-checkbox .p-checkbox-box {
|
||||||
|
border: 1px solid #a6a6a6;
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
|
||||||
|
border-color: #212121;
|
||||||
|
}
|
||||||
|
body .p-checkbox .p-checkbox-box .p-checkbox-icon {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Paginator
|
||||||
|
body .p-paginator {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-first,
|
||||||
|
body .p-paginator .p-paginator-prev,
|
||||||
|
body .p-paginator .p-paginator-next,
|
||||||
|
body .p-paginator .p-paginator-last {
|
||||||
|
color: #848484;
|
||||||
|
height: 2.286em;
|
||||||
|
min-width: 2.286em;
|
||||||
|
border: 0 none;
|
||||||
|
line-height: 2.286em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
|
||||||
|
body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
|
||||||
|
body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
|
||||||
|
body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-first:focus,
|
||||||
|
body .p-paginator .p-paginator-prev:focus,
|
||||||
|
body .p-paginator .p-paginator-next:focus,
|
||||||
|
body .p-paginator .p-paginator-last:focus {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-current {
|
||||||
|
color: #333333;
|
||||||
|
height: 2.286em;
|
||||||
|
min-width: 2.286em;
|
||||||
|
line-height: 2.286em;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-dropdown {
|
||||||
|
border: 0 none;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
|
||||||
|
color: #848484;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-first:before {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-prev:before {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-next:before {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-last:before {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-pages {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-pages .p-paginator-page {
|
||||||
|
color: #848484;
|
||||||
|
height: 2.286em;
|
||||||
|
min-width: 2.286em;
|
||||||
|
border: 0 none;
|
||||||
|
line-height: 2.286em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body .p-paginator .p-paginator-pages .p-paginator-page:focus {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
|
||||||
|
}
|
||||||
|
body .p-paginator .p-dropdown {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
height: 2.286em;
|
||||||
|
min-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdown
|
||||||
|
|
||||||
|
body .p-dropdown {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #a6a6a6;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
body .p-dropdown:not(.p-disabled):hover {
|
||||||
|
border-color: #212121;
|
||||||
|
}
|
||||||
|
body .p-dropdown:not(.p-disabled).p-focus {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
|
||||||
|
border-color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-dropdown .p-dropdown-label {
|
||||||
|
padding-right: 2em;
|
||||||
|
}
|
||||||
|
body .p-dropdown .p-dropdown-trigger {
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
color: #848484;
|
||||||
|
}
|
||||||
|
body .p-dropdown .p-dropdown-clear-icon {
|
||||||
|
color: #848484;
|
||||||
|
}
|
||||||
|
body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
|
||||||
|
padding-right: 4em;
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-filter-container {
|
||||||
|
padding: 0.429em 0.857em 0.429em 0.857em;
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
color: #333333;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 2em;
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.5em;
|
||||||
|
right: 1.357em;
|
||||||
|
color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-items {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.429em 0.857em;
|
||||||
|
border: 0 none;
|
||||||
|
color: #333333;
|
||||||
|
background-color: transparent;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
|
||||||
|
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
|
||||||
|
body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
|
||||||
|
color: #333333;
|
||||||
|
background-color: #eaeaea;
|
||||||
|
}
|
||||||
|
body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
|
||||||
|
border: 1px solid #a80000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// p-toast
|
||||||
|
body .p-toast .p-toast-message {
|
||||||
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
margin: 0 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// p-calendar
|
||||||
|
body .p-datepicker {
|
||||||
|
padding: 0.857em;
|
||||||
|
min-width: 20em;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333333;
|
||||||
|
border: 1px solid #a6a6a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .p-datepicker:not(.p-datepicker-inline) {
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus,
|
||||||
|
body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
|
||||||
|
}
|
||||||
|
body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
|
||||||
|
background-color: #eaeaea;
|
||||||
|
}
|
||||||
|
body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover {
|
||||||
|
background-color: #eaeaea;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-datepicker-header {
|
||||||
|
padding: 0.429em 0.857em 0.429em 0.857em;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333333;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-datepicker-header .p-datepicker-prev,
|
||||||
|
body .p-datepicker .p-datepicker-header .p-datepicker-next {
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
color: #a6a6a6;
|
||||||
|
transition: color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-datepicker-header .p-datepicker-title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-datepicker-header .p-datepicker-title select {
|
||||||
|
margin-top: -0.35em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
transition: color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
|
||||||
|
}
|
||||||
|
body .p-datepicker table {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0.857em 0 0 0;
|
||||||
|
}
|
||||||
|
body .p-datepicker table th {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
body .p-datepicker table th.p-datepicker-weekheader {
|
||||||
|
border-right: 1px solid #a6a6a6;
|
||||||
|
}
|
||||||
|
body .p-datepicker table td {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
body .p-datepicker table td > a,
|
||||||
|
body .p-datepicker table td > span {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #333333;
|
||||||
|
padding: 0.5em;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
body .p-datepicker table td > a.p-highlight,
|
||||||
|
body .p-datepicker table td > span.p-highlight {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-datepicker table td > a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
body .p-datepicker table td > a:focus {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
|
||||||
|
}
|
||||||
|
body .p-datepicker table td.p-datepicker-today > a,
|
||||||
|
body .p-datepicker table td.p-datepicker-today > span {
|
||||||
|
background-color: #d0d0d0;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body .p-datepicker table td.p-datepicker-today > a.p-highlight,
|
||||||
|
body .p-datepicker table td.p-datepicker-today > span.p-highlight {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-datepicker table td.p-datepicker-weeknumber {
|
||||||
|
border-right: 1px solid #a6a6a6;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-datepicker-buttonbar {
|
||||||
|
border-top: 1px solid #d8dae2;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-timepicker {
|
||||||
|
border: 0 none;
|
||||||
|
border-top: 1px solid #d8dae2;
|
||||||
|
padding: 0.857em;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-timepicker a {
|
||||||
|
color: #333333;
|
||||||
|
font-size: 1.286em;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-timepicker a:hover {
|
||||||
|
color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-timepicker span {
|
||||||
|
font-size: 1.286em;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-monthpicker .p-monthpicker-month {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-datepicker.p-datepicker-timeonly {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .p-datepicker.p-datepicker-timeonly .p-timepicker {
|
||||||
|
border-top: 0 none;
|
||||||
|
}
|
||||||
|
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
|
||||||
|
border-right: 1px solid #d8dae2;
|
||||||
|
padding-right: 0.857em;
|
||||||
|
padding-left: 0.857em;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
border-right: 0 none;
|
||||||
|
}
|
||||||
|
body .p-calendar.p-calendar-w-btn .p-inputtext {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-right: 0 none;
|
||||||
|
}
|
||||||
|
body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
|
||||||
|
body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
|
||||||
|
border-right: 0 none;
|
||||||
|
}
|
||||||
|
body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
|
||||||
|
width: 2.357em;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
|
||||||
|
width: calc(100% - 2.357em);
|
||||||
|
}
|
||||||
|
body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
|
||||||
|
border: 1px solid #a80000;
|
||||||
|
}
|
||||||
|
body .p-timepicker .p-separator {
|
||||||
|
margin-left: 0;
|
||||||
|
min-width: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// auto complete
|
||||||
|
body .p-autocomplete .p-autocomplete-input {
|
||||||
|
padding: 0.429em;
|
||||||
|
}
|
||||||
|
body .p-autocomplete-panel {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
body .p-autocomplete-panel .p-autocomplete-items {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.429em 0.857em;
|
||||||
|
border: 0 none;
|
||||||
|
color: #333333;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
|
||||||
|
body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: pvar(--mainColor);
|
||||||
|
}
|
||||||
|
body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
|
||||||
|
padding: 0.429em 0.857em;
|
||||||
|
background-color: #d8dae2;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
|
||||||
|
border: 1px solid #a80000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// select button
|
||||||
|
body .p-selectbutton .p-button {
|
||||||
|
background-color: #dadada;
|
||||||
|
border: 1px solid #dadada;
|
||||||
|
color: #333333;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: background-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button .p-button-icon-left {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
|
||||||
|
background-color: #c8c8c8;
|
||||||
|
border-color: #c8c8c8;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight).ui-state-focus {
|
||||||
|
box-shadow: 0 0 0 0.2em #8dcdff;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button.p-highlight {
|
||||||
|
background-color: pvar(--mainColor);
|
||||||
|
border-color: pvar(--mainColor);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
|
||||||
|
background-color: pvar(--mainColorLighter);
|
||||||
|
border-color: pvar(--mainColorLighter);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button:first-child {
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
}
|
||||||
|
body .p-selectbutton .p-button:last-child {
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
border-bottom-right-radius: 3px;
|
||||||
|
}
|
||||||
|
body p-selectbutton.ng-dirty.ng-invalid .p-button {
|
||||||
|
border: 1px solid #a80000;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
|
||||||
@mixin glyphicon-light {
|
@mixin glyphicon-light {
|
||||||
font-family: 'Glyphicons Halflings';
|
font-family: 'Glyphicons Halflings';
|
||||||
|
@ -11,20 +491,9 @@
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
my-edit-button,
|
|
||||||
my-delete-button,
|
|
||||||
my-button {
|
|
||||||
height: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
// focus box-shadow for primeng
|
|
||||||
.ui-inputtext:enabled:focus:not(.ui-state-error) {
|
|
||||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// data table customizations
|
// data table customizations
|
||||||
p-table {
|
p-table {
|
||||||
.ui-table-caption {
|
.p-datatable-header {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
background-color: pvar(--mainBackgroundColor) !important;
|
background-color: pvar(--mainBackgroundColor) !important;
|
||||||
|
|
||||||
|
@ -54,6 +523,10 @@ p-table {
|
||||||
td {
|
td {
|
||||||
padding-left: 15px !important;
|
padding-left: 15px !important;
|
||||||
|
|
||||||
|
&.expand-cell {
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
|
&:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
text-overflow: ellipsis !important;
|
text-overflow: ellipsis !important;
|
||||||
|
@ -66,7 +539,7 @@ p-table {
|
||||||
background-color: pvar(--mainBackgroundColor) !important;
|
background-color: pvar(--mainBackgroundColor) !important;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
|
|
||||||
&.ui-state-highlight {
|
&.p-highlight {
|
||||||
background-color: pvar(--submenuColor) !important;
|
background-color: pvar(--submenuColor) !important;
|
||||||
|
|
||||||
td, td > a {
|
td, td > a {
|
||||||
|
@ -75,7 +548,7 @@ p-table {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-table-tbody {
|
.p-datatable-tbody {
|
||||||
tr {
|
tr {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: pvar(--submenuColor) !important;
|
background-color: pvar(--submenuColor) !important;
|
||||||
|
@ -115,7 +588,7 @@ p-table {
|
||||||
font-weight: $font-semibold !important;
|
font-weight: $font-semibold !important;
|
||||||
color: pvar(--mainForegroundColor) !important;
|
color: pvar(--mainForegroundColor) !important;
|
||||||
|
|
||||||
&.ui-sortable-column:hover {
|
&.p-sortable-column:hover {
|
||||||
background-color: pvar(--submenuColor) !important;
|
background-color: pvar(--submenuColor) !important;
|
||||||
border: 1px solid !important;
|
border: 1px solid !important;
|
||||||
border-color: pvar(--submenuColor) !important;
|
border-color: pvar(--submenuColor) !important;
|
||||||
|
@ -126,7 +599,7 @@ p-table {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-state-highlight {
|
&.p-highlight {
|
||||||
background-color: pvar(--submenuColor) !important;
|
background-color: pvar(--submenuColor) !important;
|
||||||
|
|
||||||
.pi {
|
.pi {
|
||||||
|
@ -170,7 +643,7 @@ p-table {
|
||||||
}
|
}
|
||||||
|
|
||||||
p-paginator {
|
p-paginator {
|
||||||
.ui-paginator-bottom {
|
.p-paginator-bottom {
|
||||||
background-color: pvar(--mainBackgroundColor) !important;
|
background-color: pvar(--mainBackgroundColor) !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -181,30 +654,31 @@ p-table {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.ui-dropdown {
|
.p-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
&.ui-state-focus {
|
&.p-focus {
|
||||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-dropdown-label {
|
.p-label {
|
||||||
color: pvar(--inputPlaceholderColor);
|
color: pvar(--inputPlaceholderColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-paginator-current {
|
.p-paginator-current {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
color: pvar(--inputPlaceholderColor);
|
color: pvar(--inputPlaceholderColor);
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-paginator-first,
|
.p-paginator-first,
|
||||||
.ui-paginator-prev,
|
.p-paginator-prev,
|
||||||
.ui-paginator-next,
|
.p-paginator-next,
|
||||||
.ui-paginator-last {
|
.p-paginator-last {
|
||||||
@include glyphicon-light;
|
@include glyphicon-light;
|
||||||
padding: 5px 2px;
|
padding: 5px 2px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -217,42 +691,40 @@ p-table {
|
||||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-state-disabled:hover {
|
&.p-disabled:hover {
|
||||||
background-color: #fff !important;
|
background-color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-paginator-first {
|
&.p-paginator-first {
|
||||||
@extend .glyphicon-step-backward;
|
@extend .glyphicon-step-backward;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-paginator-prev {
|
&.p-paginator-prev {
|
||||||
@extend .glyphicon-chevron-left;
|
@extend .glyphicon-chevron-left;
|
||||||
|
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-paginator-next {
|
&.p-paginator-next {
|
||||||
@extend .glyphicon-chevron-right;
|
@extend .glyphicon-chevron-right;
|
||||||
|
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-paginator-last {
|
&.p-paginator-last {
|
||||||
@extend .glyphicon-step-forward;
|
@extend .glyphicon-step-forward;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-paginator-pages {
|
.p-paginator-pages {
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
|
|
||||||
.ui-paginator-page {
|
.p-paginator-page {
|
||||||
&.focus-within,
|
&.focus-within,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
|
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: pvar(--mainForegroundColor) !important;
|
color: pvar(--mainForegroundColor) !important;
|
||||||
font-weight: $font-semibold !important;
|
font-weight: $font-semibold !important;
|
||||||
margin: 0 5px !important;
|
margin: 0 5px !important;
|
||||||
|
@ -262,7 +734,7 @@ p-table {
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
line-height: initial !important;
|
line-height: initial !important;
|
||||||
|
|
||||||
&.ui-state-active {
|
&.p-highlight {
|
||||||
&, &:hover, &:active, &:focus {
|
&, &:hover, &:active, &:focus {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background-color: pvar(--mainColor) !important;
|
background-color: pvar(--mainColor) !important;
|
||||||
|
@ -277,7 +749,7 @@ p-table {
|
||||||
// overflow data table
|
// overflow data table
|
||||||
@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
|
@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
|
||||||
p-table {
|
p-table {
|
||||||
.ui-table-wrapper {
|
.p-datatable-wrapper {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
max-width: calc(100vw - #{$horizontal-margins * 2});
|
max-width: calc(100vw - #{$horizontal-margins * 2});
|
||||||
|
|
||||||
|
@ -287,15 +759,15 @@ p-table {
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $mobile-paginator {
|
@if $mobile-paginator {
|
||||||
p-paginator .ui-paginator-bottom {
|
p-paginator .p-paginator-bottom {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.ui-paginator-current {
|
.p-paginator-current {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, .ui-paginator-pages {
|
a, .p-paginator-pages {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -304,18 +776,18 @@ p-table {
|
||||||
}
|
}
|
||||||
|
|
||||||
// PrimeNG calendar tweaks
|
// PrimeNG calendar tweaks
|
||||||
p-calendar .ui-datepicker {
|
p-calendar .p-datepicker {
|
||||||
a {
|
a {
|
||||||
@include disable-default-a-behaviour;
|
@include disable-default-a-behaviour;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-datepicker-header {
|
.p-datepicker-header {
|
||||||
|
|
||||||
.ui-datepicker-year {
|
.p-datepicker-year {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-datepicker-next {
|
.p-datepicker-next {
|
||||||
@extend .glyphicon-chevron-right;
|
@extend .glyphicon-chevron-right;
|
||||||
@include glyphicon-light;
|
@include glyphicon-light;
|
||||||
|
|
||||||
|
@ -327,7 +799,7 @@ p-calendar .ui-datepicker {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-datepicker-prev {
|
.p-datepicker-prev {
|
||||||
@extend .glyphicon-chevron-left;
|
@extend .glyphicon-chevron-left;
|
||||||
@include glyphicon-light;
|
@include glyphicon-light;
|
||||||
|
|
||||||
|
@ -340,7 +812,7 @@ p-calendar .ui-datepicker {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-timepicker {
|
.p-timepicker {
|
||||||
|
|
||||||
.pi.pi-chevron-up {
|
.pi.pi-chevron-up {
|
||||||
@extend .glyphicon-chevron-up;
|
@extend .glyphicon-chevron-up;
|
||||||
|
@ -358,32 +830,32 @@ p-calendar .ui-datepicker {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p-tablecheckbox:hover div .ui-chkbox-box {
|
p-tablecheckbox:hover div .p-checkbox-box {
|
||||||
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
|
box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-chkbox {
|
.p-checkbox {
|
||||||
|
|
||||||
&, .ui-chkbox-box {
|
&, .p-checkbox-box {
|
||||||
width: 18px !important;
|
width: 18px !important;
|
||||||
height: 18px !important;
|
height: 18px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-chkbox-box {
|
.p-checkbox-box {
|
||||||
&.ui-state-active {
|
&.p-highlight {
|
||||||
border-color: pvar(--mainColor) !important;
|
border-color: pvar(--mainColor) !important;
|
||||||
background-color: pvar(--mainColor) !important;
|
background-color: pvar(--mainColor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-chkbox-icon {
|
.p-checkbox-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
bottom: -5px;
|
||||||
left: 6px;
|
left: -2px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -400,51 +872,30 @@ p-tablecheckbox:hover div .ui-chkbox-box {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p-inputswitch {
|
|
||||||
height: 26px;
|
|
||||||
|
|
||||||
.ui-inputswitch-checked .ui-inputswitch-slider {
|
|
||||||
background-color: pvar(--mainColor) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.small {
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
.ui-inputswitch {
|
|
||||||
width: 2.5em !important;
|
|
||||||
height: 1.45em !important;
|
|
||||||
|
|
||||||
.ui-inputswitch-slider::before {
|
|
||||||
height: 1em !important;
|
|
||||||
width: 1em !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-inputswitch-checked .ui-inputswitch-slider::before {
|
|
||||||
transform: translateX(1em) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p-toast {
|
p-toast {
|
||||||
.ui-toast {
|
.p-toast {
|
||||||
|
width: auto;
|
||||||
|
max-width: 300px;
|
||||||
z-index: z(notification) !important;
|
z-index: z(notification) !important;
|
||||||
|
|
||||||
.ui-toast-close-icon {
|
.p-toast-icon-close {
|
||||||
font-family: "Glyphicons Halflings";
|
font-family: "Glyphicons Halflings";
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "\e014";
|
content: "\e014";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .ui-toast-close-icon {
|
&:hover .p-toast-icon-close {
|
||||||
opacity: .3;
|
opacity: .3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-toast-message {
|
.p-toast-message {
|
||||||
font-family: $main-fonts;
|
font-family: $main-fonts;
|
||||||
background-color: pvar(--mainBackgroundColor) !important;
|
background-color: pvar(--mainBackgroundColor) !important;
|
||||||
color: pvar(--mainForegroundColor) !important;
|
color: pvar(--mainForegroundColor) !important;
|
||||||
|
@ -454,29 +905,30 @@ p-toast {
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
|
box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&.ui-toast-message-success .glyphicon {
|
&.p-toast-message-success .glyphicon {
|
||||||
color: #8BC34A !important;
|
color: #8BC34A !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-toast-message-error .glyphicon {
|
&.p-toast-message-error .glyphicon {
|
||||||
color: #F44336 !important;
|
color: #F44336 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-toast-message-warn .glyphicon {
|
&.p-toast-message-warn .glyphicon {
|
||||||
color: #F1680D !important;
|
color: #F1680D !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ui-toast-message-info .glyphicon {
|
&.p-toast-message-info .glyphicon {
|
||||||
color: #03A9F4 !important;
|
color: #03A9F4 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-block {
|
.notification-block {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5px;
|
padding: 10px;
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
@ -496,6 +948,14 @@ p-toast {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-widget {
|
.p-selectbutton {
|
||||||
font-family: $main-fonts !important;
|
.p-button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
padding: 5px 15px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,8 +4,8 @@ const path = require('path')
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||||
const TerserPlugin = require('terser-webpack-plugin')
|
const TerserPlugin = require('terser-webpack-plugin')
|
||||||
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
|
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
|
||||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
|
||||||
const PurifyCSSPlugin = require('purifycss-webpack')
|
const PurifyCSSPlugin = require('purifycss-webpack')
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||||
|
|
||||||
module.exports = function () {
|
module.exports = function () {
|
||||||
const configuration = {
|
const configuration = {
|
||||||
|
@ -64,9 +64,9 @@ module.exports = function () {
|
||||||
|
|
||||||
{
|
{
|
||||||
test: /\.(sass|scss)$/,
|
test: /\.(sass|scss)$/,
|
||||||
use: ExtractTextPlugin.extract({
|
|
||||||
fallback: 'style-loader',
|
|
||||||
use: [
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
|
||||||
{
|
{
|
||||||
loader: 'css-loader',
|
loader: 'css-loader',
|
||||||
options: {
|
options: {
|
||||||
|
@ -74,6 +74,7 @@ module.exports = function () {
|
||||||
importLoaders: 1
|
importLoaders: 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
loader: 'sass-loader',
|
loader: 'sass-loader',
|
||||||
options: {
|
options: {
|
||||||
|
@ -86,7 +87,6 @@ module.exports = function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
@ -111,7 +111,7 @@ module.exports = function () {
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
new ExtractTextPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: process.env.ANALYZE_BUNDLE === 'true'
|
filename: process.env.ANALYZE_BUNDLE === 'true'
|
||||||
? '[name].css'
|
? '[name].css'
|
||||||
: '[name].[hash].css'
|
: '[name].[hash].css'
|
||||||
|
|
4268
client/yarn.lock
4268
client/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue