mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Fuse Modernization continues...
This commit is contained in:
sercan
parent
5251a6305f
commit
98297ea787
16
credits.txt
Normal file
16
credits.txt
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Image/Vector/Icon Credits
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
Avatars - https://uifaces.co/
|
||||
Flag icons - http://www.famfamfam.com/lab/icons/flags/
|
||||
Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
|
||||
A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
|
||||
Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
|
||||
Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
|
||||
Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
|
||||
Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
|
||||
Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
|
||||
Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
|
||||
Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
|
||||
Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
|
||||
First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4
|
||||
199
package-lock.json
generated
199
package-lock.json
generated
|
|
@ -5,9 +5,9 @@
|
|||
"requires": true,
|
||||
"dependencies": {
|
||||
"@agm/core": {
|
||||
"version": "1.0.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.3.tgz",
|
||||
"integrity": "sha512-nsyergarmMB4JCw7KGujj86ulgRYhEk8zXKRiJZdnju/irLvazQ/9Anlfsf1Rc5yph8sZrmQDwqLGZ6AqHhnzA=="
|
||||
"version": "1.0.0-beta.5",
|
||||
"resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.5.tgz",
|
||||
"integrity": "sha512-LVENJqtBZEWpX+uJkGI0zgg+Xkm2KkktQm4ojZozArbeNvQkVL6pqVc04Mme6vvOzwJpD1cET5w4byC8Xaq1QQ=="
|
||||
},
|
||||
"@angular-devkit/architect": {
|
||||
"version": "0.8.3",
|
||||
|
|
@ -17,6 +17,17 @@
|
|||
"requires": {
|
||||
"@angular-devkit/core": "0.8.3",
|
||||
"rxjs": "~6.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular-devkit/build-angular": {
|
||||
|
|
@ -81,6 +92,15 @@
|
|||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
|
||||
"integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
|
||||
"dev": true
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -113,6 +133,17 @@
|
|||
"@angular-devkit/architect": "0.8.3",
|
||||
"@angular-devkit/core": "0.8.3",
|
||||
"rxjs": "~6.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular-devkit/core": {
|
||||
|
|
@ -125,6 +156,17 @@
|
|||
"chokidar": "^2.0.3",
|
||||
"rxjs": "~6.2.0",
|
||||
"source-map": "^0.5.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular-devkit/schematics": {
|
||||
|
|
@ -135,21 +177,33 @@
|
|||
"requires": {
|
||||
"@angular-devkit/core": "0.8.3",
|
||||
"rxjs": "~6.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/animations": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.1.8.tgz",
|
||||
"integrity": "sha512-OUetZPkEfUz0o58bVmx42Jdd/ep+KcgV5xaFvRTwXI/mVbTYgODJUos7aaoyBz6J2EPB/pTA4NMyZU3XFKjDiw==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.1.9.tgz",
|
||||
"integrity": "sha512-bPl5fNn4ja1S2Bn4xRT93wYqx0KjvZrX1FjpQltkf9dMmAdVpYj7spy+eYgClAMfZMWv7pa70F+FtSDkWbgRsA==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "7.0.0-beta.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.0.0-beta.1.tgz",
|
||||
"integrity": "sha512-8Xtp5XE8x2xPj9rmUWEuFZ2aptNRaEnzcZmP7RZ97nIf0mv6t+K/rD80HEbAnXjhNYzA839vIUjZNUezfuhLAQ==",
|
||||
"version": "7.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.0.0-beta.2.tgz",
|
||||
"integrity": "sha512-txzcJtWYbnd+Gs5ah5KojmZaRR/k3WOKJNz0NKR2FK7rnX8rfYK65FMNniakqjDPd08mpgqWVkyhJRuAeSDfGQ==",
|
||||
"requires": {
|
||||
"parse5": "^5.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
|
|
@ -184,6 +238,15 @@
|
|||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"dev": true
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"yargs-parser": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
|
||||
|
|
@ -196,25 +259,25 @@
|
|||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.1.8.tgz",
|
||||
"integrity": "sha512-v8U49a7w2hXKX229WCLNF40RYY3v26+QKlN/jxdzKpP4wu5dguX6s6d3+AJdtywvsE8WS1NwOTHWCCWuMiVxrg==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.1.9.tgz",
|
||||
"integrity": "sha512-i35FiFxHC/vBfyYEdprgbedxWuimCbqGSdSQpBUE4jNka80EifG2IAHIk/vAG98z7LSUyo6n7nf6iFDY3GrYZA==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.1.8.tgz",
|
||||
"integrity": "sha512-a+OblYNKzjBVsYy3FlZd8QkZvWpsDlqb8xGCfUBPazPFlbeDGp4Bvz5KdX0uCTv46OQyh6jeAmKWPt0PVxLrhg==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.1.9.tgz",
|
||||
"integrity": "sha512-TY6axB1c7VvYXf+ebFDq3Ej+edgii3CDxew8HnyTFAWeDF2Gh8io1vTYwtdyDka6U53ASaheM1HpiUjzvYH0jQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler-cli": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.1.8.tgz",
|
||||
"integrity": "sha512-oL7ghO1Yjfp+J349hWrOqsrwJZ6ZAC0mRsXY0SkadnPI3oLzcmysmZV91UUjjZ43KR6lmXXkxo52Gt8bIRYEWQ==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.1.9.tgz",
|
||||
"integrity": "sha512-/+Gh/I40KhwcLKiLpzYzZwPm78O2p6zxJxBmJA3gySCtl6iaxXq7wHvc63wa/6ESSvGWW0/WkZAr3m3GECx5Tg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "^1.4.2",
|
||||
|
|
@ -357,80 +420,80 @@
|
|||
}
|
||||
},
|
||||
"@angular/core": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.1.8.tgz",
|
||||
"integrity": "sha512-6bMVQmPqpKJZspjNRIEMaGOxCmDWrAZENlofXNgPhQ0mUNh17iTH7XpqjKbW7UWtnTqGcdnDC9dI++P08ggD3g==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.1.9.tgz",
|
||||
"integrity": "sha512-V4XuBvQtS98guRV0Fq661hG9Ij0+4oWyHvIrnqZckuQ9D1G8NSJyZ/Lfh0kBB1cl+mnGe/J9XN1avW7liswDNQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/flex-layout": {
|
||||
"version": "6.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-6.0.0-beta.16.tgz",
|
||||
"integrity": "sha512-0AYtIBGrEJshdFMc6TXGloCkD19YTCRKVJl6xZHX4H5dLnUn+daqXcbh4UsWhayevnLp85HEf2ViHLmTa6jv3g==",
|
||||
"version": "6.0.0-beta.18",
|
||||
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-6.0.0-beta.18.tgz",
|
||||
"integrity": "sha512-1Alv3YSIZYp0CTUIESIaSQLoSVyLzuNKPa5bGM/RzOmeSrndm5plVgI9wopGfJUDiwM18R97rq/4XjDvNT/+ig==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/forms": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.8.tgz",
|
||||
"integrity": "sha512-S+spi72wxXTTIdB+02xgYdl8UlCYMJ13ast0dfCGStwx/fRUsgo0sWppDpMJz9sseC7xKEJ4U5tsfjTiCQ9dqw==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.9.tgz",
|
||||
"integrity": "sha512-gNwTCA0nzUR4LlXWPdfYBA+chq4X9mvOBo46+M44TevNwEsip6iSZKp7no9O5dquALOZ2HpFRuRkPoH4lXuVYA==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/http": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.1.8.tgz",
|
||||
"integrity": "sha512-WqOm3mAjU9SdPazi7DTJzPosRzb4+3Dk3gdzMpKwDNP40Zg940UBt62udVmK2ERReIQlQbHgq/+JLiPe3q5O5A==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.1.9.tgz",
|
||||
"integrity": "sha512-Tm6SA7QIKGT4Bb+xlyPG+ZXrwniNwF+/ejsKcBar8xaligW4+R9oo5Ql6t4HpjafkWIPLBEXyxaiVq1nWPyz7g==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/language-service": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.1.8.tgz",
|
||||
"integrity": "sha512-AQpjHDlhGuuRvBuWEpq/u49lcaEL/PO2tLMMU5gRqBFYido9wP/6Flz0Oxgu1g5Xjj19Kj00j9uNGgSGc4UCyQ==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.1.9.tgz",
|
||||
"integrity": "sha512-xm3lbJYelyq02iLdS4gpymuHc8WadoPRCYMHW5Ond7kD+05JGt8smYEGOAcjSt0NJrpmkPWnTzlFlXxWYLQNdw==",
|
||||
"dev": true
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "7.0.0-beta.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-7.0.0-beta.1.tgz",
|
||||
"integrity": "sha512-l1zyAivLf09yIPKWaRq/TiGq+h7vKuUlSG3ruqBdtjK/BTiiWgylNojKNI9X/zPd0DOamN255KzrgbJEb5eBIg==",
|
||||
"version": "7.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-7.0.0-beta.2.tgz",
|
||||
"integrity": "sha512-OgKGzcylyFDGSGY6GnZ6HmreKG6eTgjQtkSqC/Ngv0B7ilPlpvbiyk3yAcjXSOLiHjU0tfXI1stZJjxmlSCqjg==",
|
||||
"requires": {
|
||||
"parse5": "^5.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/material-moment-adapter": {
|
||||
"version": "7.0.0-beta.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-7.0.0-beta.1.tgz",
|
||||
"integrity": "sha512-N16ulgszdMHnTOgTcd06cviwYlIGED4kQDUaUFLAQziyu8DCWRE2eumQRC2EyBjLvaTJuIC5rP5JPFcVMbp75w==",
|
||||
"version": "7.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-7.0.0-beta.2.tgz",
|
||||
"integrity": "sha512-54ZqAv5/ROq1WCrbf97HPvJJQ/gM3NLWablmLcmxRgd2BMZm80XcItSGGY/j+S5Ra2A0zBhVxsvXjWpNvmn2tw==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.8.tgz",
|
||||
"integrity": "sha512-ZjnlnKj6K+Z+LvA9dbzckOfB0CwaamTkQGxyODXdYpwEJ/7YOoz+v+LYf6BpKdyqiDHEyVQnkU0YiniNNy+CWA==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.9.tgz",
|
||||
"integrity": "sha512-/OpLZxpAQW912DnY4/RX0VLYJJ+TaCWMVP/tg7CBYaPpeJve7GHXfZLSJ1p95RhnSyohTYtdtbHG0NDuG8dgqw==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser-dynamic": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.8.tgz",
|
||||
"integrity": "sha512-rXsyY6xpeuBTGyEmgx3KFMv1PTgaa1efA1bo8I3KIuUn595GnQamszpXISSySGeMYxEhKFeQWafb/ZDnSg0vWQ==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.9.tgz",
|
||||
"integrity": "sha512-PGng7UCrWc5gCNxKo94VSWq0SRdN4jUeTCnX7tEI//Qu+dQPolJkUHPgD9A5UH1pSOEYl/2z+S2bayu+z+9o2w==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/router": {
|
||||
"version": "6.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.1.8.tgz",
|
||||
"integrity": "sha512-0J7xkN8l4vdmtFETgJFYqHYxUPZz9grTnjeKmEkBSogxpOfJE5doDkAcBraRzB/Nb95MSb+zc4rIjx9Otx2IjA==",
|
||||
"version": "6.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.1.9.tgz",
|
||||
"integrity": "sha512-FQksj8DiiWiY9o/1Ppq335Lr3d5wW3Odzg3yWC3JgFN37GMdCQxX71TX5ls8JeVspTiOeP9Lty99vDgfIcl+9A==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
|
|
@ -471,6 +534,17 @@
|
|||
"rxjs": "~6.2.0",
|
||||
"tree-kill": "^1.0.0",
|
||||
"webpack-sources": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@ngx-translate/core": {
|
||||
|
|
@ -504,6 +578,17 @@
|
|||
"rxjs": "~6.2.0",
|
||||
"semver": "^5.3.0",
|
||||
"semver-intersect": "^1.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@swimlane/dragula": {
|
||||
|
|
@ -8735,17 +8820,17 @@
|
|||
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
|
||||
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz",
|
||||
"integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"rxjs-compat": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.2.2.tgz",
|
||||
"integrity": "sha512-h113JzEXnqBd6JQ8TYg33oDuM3baZ9WKS49rtbMX0gBW2Kz0z4wDZ0/pCA0T9sRJM1HkZT6mt45gpYOJ2MqWYQ=="
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.3.3.tgz",
|
||||
"integrity": "sha512-caGN7ixiabHpOofginKEquuHk7GgaCrC7UpUQ9ZqGp80tMc68msadOeP/2AKy2R4YJsT1+TX5GZCtxO82qWkyA=="
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
|
|
@ -10077,9 +10162,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"typescript": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "http://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
|
||||
"integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
|
||||
"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
|
||||
"dev": true
|
||||
},
|
||||
"uglify-js": {
|
||||
|
|
|
|||
38
package.json
38
package.json
|
|
@ -18,20 +18,20 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.3",
|
||||
"@angular/animations": "6.1.8",
|
||||
"@angular/cdk": "7.0.0-beta.1",
|
||||
"@angular/common": "6.1.8",
|
||||
"@angular/compiler": "6.1.8",
|
||||
"@angular/core": "6.1.8",
|
||||
"@angular/flex-layout": "6.0.0-beta.16",
|
||||
"@angular/forms": "6.1.8",
|
||||
"@angular/http": "6.1.8",
|
||||
"@angular/material": "7.0.0-beta.1",
|
||||
"@angular/material-moment-adapter": "7.0.0-beta.1",
|
||||
"@angular/platform-browser": "6.1.8",
|
||||
"@angular/platform-browser-dynamic": "6.1.8",
|
||||
"@angular/router": "6.1.8",
|
||||
"@agm/core": "1.0.0-beta.5",
|
||||
"@angular/animations": "6.1.9",
|
||||
"@angular/cdk": "7.0.0-beta.2",
|
||||
"@angular/common": "6.1.9",
|
||||
"@angular/compiler": "6.1.9",
|
||||
"@angular/core": "6.1.9",
|
||||
"@angular/flex-layout": "6.0.0-beta.18",
|
||||
"@angular/forms": "6.1.9",
|
||||
"@angular/http": "6.1.9",
|
||||
"@angular/material": "7.0.0-beta.2",
|
||||
"@angular/material-moment-adapter": "7.0.0-beta.2",
|
||||
"@angular/platform-browser": "6.1.9",
|
||||
"@angular/platform-browser-dynamic": "6.1.9",
|
||||
"@angular/router": "6.1.9",
|
||||
"@ngrx/effects": "6.1.0",
|
||||
"@ngrx/router-store": "6.1.0",
|
||||
"@ngrx/store": "6.1.0",
|
||||
|
|
@ -58,15 +58,15 @@
|
|||
"ngx-cookie-service": "1.0.10",
|
||||
"perfect-scrollbar": "1.4.0",
|
||||
"prismjs": "1.15.0",
|
||||
"rxjs": "6.2.2",
|
||||
"rxjs-compat": "6.2.2",
|
||||
"rxjs": "6.3.3",
|
||||
"rxjs-compat": "6.3.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "6.2.3",
|
||||
"@angular/compiler-cli": "6.1.8",
|
||||
"@angular/language-service": "6.1.8",
|
||||
"@angular/compiler-cli": "6.1.9",
|
||||
"@angular/language-service": "6.1.9",
|
||||
"@angular-devkit/build-angular": "0.8.3",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "2.8.8",
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
"protractor": "5.4.0",
|
||||
"ts-node": "5.0.1",
|
||||
"tslint": "5.9.1",
|
||||
"typescript": "2.7.2",
|
||||
"typescript": "2.9.2",
|
||||
"webpack-bundle-analyzer": "3.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
height: 64px;
|
||||
font-size: 13px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="shortcuts" fxHide fxShow.gt-sm>
|
||||
<div class="shortcuts" fxLayout="row" fxHide fxShow.gt-sm>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
:host {
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint('lt-md') {
|
||||
|
||||
#fuse-shortcuts {
|
||||
|
||||
|
|
|
|||
|
|
@ -70,9 +70,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
// Get the navigation items and flatten them
|
||||
this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
|
||||
|
||||
const cookieExists = this._cookieService.check('FUSE2.shortcuts');
|
||||
|
||||
if ( cookieExists )
|
||||
if ( this._cookieService.check('FUSE2.shortcuts') )
|
||||
{
|
||||
this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
|
||||
}
|
||||
|
|
@ -107,6 +105,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
];
|
||||
}
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMatchMediaService.onMediaChange
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ fuse-sidebar {
|
|||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
min-width: 0 !important;
|
||||
max-width: 80vw !important;
|
||||
width: 80vw !important;
|
||||
|
|
|
|||
|
|
@ -20,11 +20,13 @@ fuse-widget {
|
|||
width: 100%;
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
border-radius: 2px;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
|
||||
transform: rotateY(0deg);
|
||||
backface-visibility: hidden;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
> .fuse-widget-back {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -36,9 +38,11 @@ fuse-widget {
|
|||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
|
||||
transform: rotateY(180deg);
|
||||
backface-visibility: hidden;
|
||||
border: 1px solid;
|
||||
|
||||
[fuseWidgetToggle] {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
> .fuse-widget-front,
|
||||
> .fuse-widget-back {
|
||||
background: map-get($background, card);
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
@import '~@angular/material/theming';
|
||||
|
||||
// Breakpoint mixins
|
||||
@import "mixins/breakpoints";
|
||||
@import "partials/breakpoints";
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
// Media step breakpoint mixin based on Angular Material lib
|
||||
$breakpoints: (
|
||||
xs: 'screen and (max-width: 599px)',
|
||||
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
|
||||
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
|
||||
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
|
||||
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
|
||||
lt-sm: 'screen and (max-width: 599px)',
|
||||
lt-md: 'screen and (max-width: 959px)',
|
||||
lt-lg: 'screen and (max-width: 1279px)',
|
||||
lt-xl: 'screen and (max-width: 1919px)',
|
||||
gt-xs: 'screen and (min-width: 600px)',
|
||||
gt-sm: 'screen and (min-width: 960px)',
|
||||
gt-md: 'screen and (min-width: 1280px)',
|
||||
gt-lg: 'screen and (min-width: 1920px)'
|
||||
) !default;
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 600px,
|
||||
md: 960px,
|
||||
lg: 1280px,
|
||||
xl: 1920px
|
||||
) !default;
|
||||
|
||||
@mixin media-breakpoint($breakpointName) {
|
||||
|
||||
$mediaQuery: map-get($breakpoints, $breakpointName);
|
||||
|
||||
@if ($mediaQuery != null) {
|
||||
|
||||
@media #{$mediaQuery} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-max($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,31 @@
|
|||
// Fix: "Remove the cdk-global-scrollblock effects from the HTML"
|
||||
// Fuse already blocks the body scroll so it doesn't need this feature. We are disabling it
|
||||
// because on Windows, it causes a scrollbar to show up.
|
||||
html {
|
||||
|
||||
&.cdk-global-scrollblock {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix: "Inconsistent button heights due to inconsistent line heights"
|
||||
button {
|
||||
|
||||
.mat-button-wrapper {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
|
||||
// Fix: "Font-weight config affecting the icons"
|
||||
font-weight: 400 !important;
|
||||
|
||||
// Fix: "Inconsistent positioning on custom font icons"
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Fix: "Icon button ripple radius is not correct on Edge & Safari"
|
||||
.mat-icon-button {
|
||||
|
||||
|
|
@ -30,9 +58,9 @@
|
|||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
// Fix: "Table-cell and inline-table in mat-select"
|
||||
.mat-form-field {
|
||||
|
||||
// Fix: "Table-cell and inline-table in mat-select"
|
||||
&.mat-form-field-type-mat-select {
|
||||
|
||||
.mat-form-field-infix {
|
||||
|
|
@ -58,6 +86,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Fix: "Inconsistent input heights"
|
||||
.mat-form-field-appearance-outline {
|
||||
|
||||
input[type="time"] {
|
||||
|
||||
&.mat-input-element {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix: Stepper icons are broken due to Fuse's icon helpers
|
||||
mat-horizontal-stepper,
|
||||
mat-vertical-stepper {
|
||||
|
|
|
|||
38
src/@fuse/scss/partials/_breakpoints.scss
Normal file
38
src/@fuse/scss/partials/_breakpoints.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// Media step breakpoint mixin based on Angular Material lib
|
||||
$breakpoints: (
|
||||
xs: 'screen and (max-width: 599px)',
|
||||
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
|
||||
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
|
||||
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
|
||||
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
|
||||
lt-sm: 'screen and (max-width: 599px)',
|
||||
lt-md: 'screen and (max-width: 959px)',
|
||||
lt-lg: 'screen and (max-width: 1279px)',
|
||||
lt-xl: 'screen and (max-width: 1919px)',
|
||||
gt-xs: 'screen and (min-width: 600px)',
|
||||
gt-sm: 'screen and (min-width: 960px)',
|
||||
gt-md: 'screen and (min-width: 1280px)',
|
||||
gt-lg: 'screen and (min-width: 1920px)'
|
||||
) !default;
|
||||
|
||||
// Re-map the breakpoints for the helper classes
|
||||
$helper-breakpoints: (
|
||||
xs: null,
|
||||
sm: 'gt-xs',
|
||||
md: 'gt-sm',
|
||||
lg: 'gt-md',
|
||||
xl: 'gt-lg'
|
||||
);
|
||||
|
||||
@mixin media-breakpoint($breakpointName) {
|
||||
|
||||
$mediaQuery: map-get($breakpoints, $breakpointName);
|
||||
|
||||
@if ($mediaQuery == null) {
|
||||
@content
|
||||
} @else {
|
||||
@media #{$mediaQuery} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
.fuse-card {
|
||||
background: map-get($background, card);
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
.card-divider {
|
||||
border-top: 1px solid map-get($foreground, divider);
|
||||
|
|
@ -21,8 +22,8 @@
|
|||
.fuse-card {
|
||||
max-width: 320px;
|
||||
min-width: 320px;
|
||||
border-radius: 2px;
|
||||
@include mat-elevation(2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid;
|
||||
|
||||
&.variable-width {
|
||||
min-width: 0;
|
||||
|
|
|
|||
|
|
@ -60,3 +60,11 @@ img {
|
|||
vertical-align: top;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Input
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
input {
|
||||
border: none;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Position helpers
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include media-breakpoint($materialBreakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
||||
|
||||
.position#{$infix}-relative {
|
||||
position: relative;
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Absolute position alignment helpers
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include media-breakpoint($materialBreakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
||||
|
||||
.align#{$infix}-top {
|
||||
top: 0;
|
||||
|
|
@ -78,11 +78,11 @@
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Spacing helpers
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include media-breakpoint($materialBreakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@ mat-icon {
|
|||
min-height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include media-breakpoint($materialBreakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
||||
|
||||
@for $size from 2 through 128 {
|
||||
|
||||
|
|
|
|||
|
|
@ -230,13 +230,12 @@ mat-icon.status {
|
|||
color: #F44336;
|
||||
|
||||
&:before {
|
||||
content: "do_not_disturb_on";
|
||||
content: "remove_circle_outline";
|
||||
}
|
||||
}
|
||||
|
||||
&.away {
|
||||
background-color: #FFC107;
|
||||
color: #FFFFFF;
|
||||
color: #FFC107;
|
||||
|
||||
&:before {
|
||||
content: "access_time";
|
||||
|
|
@ -245,7 +244,6 @@ mat-icon.status {
|
|||
|
||||
&.offline {
|
||||
color: #646464;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&:before {
|
||||
content: "not_interested";
|
||||
|
|
|
|||
|
|
@ -219,24 +219,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Material style
|
||||
&.material {
|
||||
// Material 2 style
|
||||
&.material2,
|
||||
.material2 & {
|
||||
|
||||
.nav-subheader {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
|
||||
> .group-title {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px 0 24px;
|
||||
border-radius: 0 20px 20px 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
|
||||
> .content-card {
|
||||
background: map-get($background, card);
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
> .toolbar {
|
||||
border-bottom-color: map-get($foreground, divider);
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
|
||||
> .content-card {
|
||||
background: map-get($background, card);
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
> .toolbar {
|
||||
border-bottom-color: map-get($foreground, divider);
|
||||
|
|
@ -79,15 +81,11 @@
|
|||
// @ Page Layouts
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
$carded-header-height: 200px !default;
|
||||
$carded-header-height-sm: 160px !default;
|
||||
$carded-toolbar-height: 64px !default;
|
||||
|
||||
$header-height: 120px !default;
|
||||
$header-height-sm: 100px !default;
|
||||
|
||||
// Calculate toolbarless header height
|
||||
// Calculate toolbar-less carded header height
|
||||
$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
|
||||
$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
|
||||
|
||||
.page-layout {
|
||||
position: relative;
|
||||
|
|
@ -109,10 +107,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
right: 0;
|
||||
left: 0;
|
||||
height: $carded-header-height;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: $carded-header-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Fullwidth
|
||||
|
|
@ -136,12 +130,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
height: $carded-header-height-without-toolbar !important;
|
||||
min-height: $carded-header-height-without-toolbar !important;
|
||||
max-height: $carded-header-height-without-toolbar !important;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: $carded-header-height-without-toolbar-sm !important;
|
||||
min-height: $carded-header-height-without-toolbar-sm !important;
|
||||
max-height: $carded-header-height-without-toolbar-sm !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .content-card {
|
||||
|
|
@ -149,7 +137,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(7);
|
||||
@include mat-elevation(1);
|
||||
|
||||
> .toolbar {
|
||||
display: flex;
|
||||
|
|
@ -303,12 +291,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
height: $carded-header-height;
|
||||
min-height: $carded-header-height;
|
||||
max-height: $carded-header-height;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: $carded-header-height-sm;
|
||||
min-height: $carded-header-height-sm;
|
||||
max-height: $carded-header-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -334,12 +316,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
height: $carded-header-height-without-toolbar;
|
||||
min-height: $carded-header-height-without-toolbar;
|
||||
max-height: $carded-header-height-without-toolbar;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: $carded-header-height-without-toolbar-sm;
|
||||
min-height: $carded-header-height-without-toolbar-sm;
|
||||
max-height: $carded-header-height-without-toolbar-sm;
|
||||
}
|
||||
}
|
||||
|
||||
> .content-card {
|
||||
|
|
@ -347,7 +323,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(7);
|
||||
@include mat-elevation(1);
|
||||
|
||||
> .toolbar {
|
||||
display: flex;
|
||||
|
|
@ -379,7 +355,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
width: calc(100% - 32px);
|
||||
min-width: 0;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
@include media-breakpoint('lt-lg') {
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
|
|
@ -566,7 +542,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
z-index: 3;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@include mat-elevation(7);
|
||||
@include mat-elevation(1);
|
||||
|
||||
> .header {
|
||||
height: $header-height;
|
||||
|
|
@ -625,6 +601,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
> .content {
|
||||
border-radius: 8px;
|
||||
@include mat-elevation(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -685,7 +666,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
|
||||
// Smaller margins
|
||||
&.carded {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
font-family: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
|
||||
font-family: 'Nunito', 'Helvetica Neue', 'Arial', sans-serif;
|
||||
line-height: 1.4 !important;
|
||||
letter-spacing: -0.1px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
&.right-side-panel {
|
||||
|
||||
@include media-breakpoint-up('lg') {
|
||||
@include media-breakpoint('gt-md') {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,8 +63,11 @@ $custom_palettes: (
|
|||
|
||||
// Force the input field font sizes to 16px
|
||||
$typography: mat-typography-config(
|
||||
$font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
|
||||
$input: mat-typography-level(16px, 1.125, 400)
|
||||
$font-family: 'Nunito, Helvetica Neue, Arial, sans-serif',
|
||||
$title: mat-typography-level(20px, 32px, 600),
|
||||
$body-2: mat-typography-level(14px, 24px, 600),
|
||||
$button: mat-typography-level(14px, 14px, 600),
|
||||
$input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
|
||||
);
|
||||
|
||||
// Setup the typography
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ export class CalendarFakeDb
|
|||
title : 'A 3 day event',
|
||||
allDay : true,
|
||||
color : {
|
||||
primary : '#ad2121',
|
||||
secondary: '#FAE3E3'
|
||||
primary : '#F44336',
|
||||
secondary: '#FFCDD2'
|
||||
},
|
||||
resizable: {
|
||||
beforeStart: true,
|
||||
|
|
@ -40,8 +40,8 @@ export class CalendarFakeDb
|
|||
title : 'An event with no end date',
|
||||
allDay : false,
|
||||
color : {
|
||||
primary : '#e3bc08',
|
||||
secondary: '#FDF1BA'
|
||||
primary : '#FF9800',
|
||||
secondary: '#FFE0B2'
|
||||
},
|
||||
resizable: {
|
||||
beforeStart: true,
|
||||
|
|
@ -59,7 +59,7 @@ export class CalendarFakeDb
|
|||
title : 'A long event that spans 2 months',
|
||||
allDay : false,
|
||||
color : {
|
||||
primary : '#1e90ff',
|
||||
primary : '#1E90FF',
|
||||
secondary: '#D1E8FF'
|
||||
},
|
||||
resizable: {
|
||||
|
|
@ -78,8 +78,8 @@ export class CalendarFakeDb
|
|||
title : 'A draggable and resizable event',
|
||||
allDay : false,
|
||||
color : {
|
||||
primary : '#e3bc08',
|
||||
secondary: '#FDF1BA'
|
||||
primary : '#673AB7',
|
||||
secondary: '#D1C4E9'
|
||||
},
|
||||
resizable: {
|
||||
beforeStart: true,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export class ContactsFakeDb
|
|||
'email' : 'abbott@withinpixels.com',
|
||||
'phone' : '+1-202-555-0175',
|
||||
'address' : '933 8th Street Stamford, CT 06902',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -26,7 +26,7 @@ export class ContactsFakeDb
|
|||
'email' : 'arnold@withinpixels.com',
|
||||
'phone' : '+1-202-555-0141',
|
||||
'address' : '906 Valley Road Michigan City, IN 46360',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -40,7 +40,7 @@ export class ContactsFakeDb
|
|||
'email' : 'barrera@withinpixels.com',
|
||||
'phone' : '+1-202-555-0196',
|
||||
'address' : '183 River Street Passaic, NJ 07055',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -54,7 +54,7 @@ export class ContactsFakeDb
|
|||
'email' : 'blair@withinpixels.com',
|
||||
'phone' : '+1-202-555-0118',
|
||||
'address' : '143 Jones Street Eau Claire, WI 54701',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -68,7 +68,7 @@ export class ContactsFakeDb
|
|||
'email' : 'boyle@withinpixels.com',
|
||||
'phone' : '+1-202-555-0177',
|
||||
'address' : '218 Pearl Street Brandon, FL 33510',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -82,7 +82,7 @@ export class ContactsFakeDb
|
|||
'email' : 'christy@withinpixels.com',
|
||||
'phone' : '+1-202-555-0136',
|
||||
'address' : '329 Bridge Street Desoto, TX 75115',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -96,7 +96,7 @@ export class ContactsFakeDb
|
|||
'email' : 'copeland@withinpixels.com',
|
||||
'phone' : '+1-202-555-0107',
|
||||
'address' : '956 6th Avenue North Bergen, NJ 0704',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -110,7 +110,7 @@ export class ContactsFakeDb
|
|||
'email' : 'estes@withinpixels.com',
|
||||
'phone' : '+1-202-555-0113',
|
||||
'address' : '664 York Street Cambridge, MA 02138',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -124,7 +124,7 @@ export class ContactsFakeDb
|
|||
'email' : 'harper@withinpixels.com',
|
||||
'phone' : '+1-202-555-0173',
|
||||
'address' : '738 Route 11 Cornelius, NC 28031',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -138,7 +138,7 @@ export class ContactsFakeDb
|
|||
'email' : 'helen@withinpixels.com',
|
||||
'phone' : '+1-202-555-0163',
|
||||
'address' : '194 Washington Avenue Saint Petersburg, FL 33702',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -152,7 +152,7 @@ export class ContactsFakeDb
|
|||
'email' : 'henderson@withinpixels.com',
|
||||
'phone' : '+1-202-555-0151',
|
||||
'address' : '686 Roosevelt Avenue Oviedo, FL 32765',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -166,7 +166,7 @@ export class ContactsFakeDb
|
|||
'email' : 'josefina@withinpixels.com',
|
||||
'phone' : '+1-202-555-0160',
|
||||
'address' : '202 Hartford Road Lynchburg, VA 24502',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -180,7 +180,7 @@ export class ContactsFakeDb
|
|||
'email' : 'katina@withinpixels.com',
|
||||
'phone' : '+1-202-555-0186',
|
||||
'address' : '219 Woodland Road Valrico, FL 33594',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -194,7 +194,7 @@ export class ContactsFakeDb
|
|||
'email' : 'lily@withinpixels.com',
|
||||
'phone' : '+1-202-555-0115',
|
||||
'address' : '305 Willow Drive Superior, WI 54880',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -208,7 +208,7 @@ export class ContactsFakeDb
|
|||
'email' : 'mai@withinpixels.com',
|
||||
'phone' : '+1-202-555-0199',
|
||||
'address' : '148 Heather Lane Mcminnville, TN 37110',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -222,7 +222,7 @@ export class ContactsFakeDb
|
|||
'email' : 'nancy@withinpixels.com',
|
||||
'phone' : '+1-202-555-0120',
|
||||
'address' : '345 Laurel Lane Union City, NJ 07087',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -236,7 +236,7 @@ export class ContactsFakeDb
|
|||
'email' : 'nora@withinpixels.com',
|
||||
'phone' : '+1-202-555-0172',
|
||||
'address' : '572 Rose Street Summerfield, FL 34491',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -250,7 +250,7 @@ export class ContactsFakeDb
|
|||
'email' : 'odessa@withinpixels.com',
|
||||
'phone' : '+1-202-555-0190',
|
||||
'address' : '527 Jefferson Court Conyers, GA 30012',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -264,7 +264,7 @@ export class ContactsFakeDb
|
|||
'email' : 'reyna@withinpixels.com',
|
||||
'phone' : '+1-202-555-0116',
|
||||
'address' : '297 Strawberry Lane Faribault, MN 55021',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -278,7 +278,7 @@ export class ContactsFakeDb
|
|||
'email' : 'shauna@withinpixels.com',
|
||||
'phone' : '+1-202-555-0159',
|
||||
'address' : '928 Canterbury Court Pittsburgh, PA 15206',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -292,7 +292,7 @@ export class ContactsFakeDb
|
|||
'email' : 'shepard@withinpixels.com',
|
||||
'phone' : '+1-202-555-0173',
|
||||
'address' : '904 Ridge Road Pickerington, OH 43147',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -306,7 +306,7 @@ export class ContactsFakeDb
|
|||
'email' : 'tillman@withinpixels.com',
|
||||
'phone' : '+1-202-555-0183',
|
||||
'address' : '447 Charles Street Dorchester, MA 02125',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -320,7 +320,7 @@ export class ContactsFakeDb
|
|||
'email' : 'trevino@withinpixels.com',
|
||||
'phone' : '+1-202-555-0138',
|
||||
'address' : '84 Valley View Road Norman, OK 73072',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -334,7 +334,7 @@ export class ContactsFakeDb
|
|||
'email' : 'tyson@withinpixels.com',
|
||||
'phone' : '+1-202-555-0146',
|
||||
'address' : '204 Clark Street Monsey, NY 10952',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
},
|
||||
{
|
||||
|
|
@ -348,7 +348,7 @@ export class ContactsFakeDb
|
|||
'email' : 'velezquez@withinpixels.com',
|
||||
'phone' : '+1-202-555-0146',
|
||||
'address' : '261 Cleveland Street Riverside, NJ 08075',
|
||||
'birthday': null,
|
||||
'birthday': '',
|
||||
'notes' : ''
|
||||
}
|
||||
];
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -25,23 +25,22 @@ export class MailFakeDb
|
|||
{
|
||||
'type' : 'image',
|
||||
'fileName': 'flowers',
|
||||
'preview' : 'assets/images/etc/flowers-thumb.jpg',
|
||||
'preview' : 'assets/images/mail/attachment-1.jpg',
|
||||
'url' : '',
|
||||
'size' : '1.1Mb'
|
||||
},
|
||||
{
|
||||
'type' : 'image',
|
||||
'fileName': 'snow',
|
||||
'preview' : 'assets/images/etc/snow-thumb.jpg',
|
||||
'preview' : 'assets/images/mail/attachment-2.jpg',
|
||||
'url' : '',
|
||||
'size' : '380kb'
|
||||
},
|
||||
{
|
||||
'type' : 'image',
|
||||
'fileName': 'sunrise',
|
||||
'preview' : 'assets/images/etc/sunrise-thumb.jpg',
|
||||
'url' : 'assets/images/etc/early-sunrise.jpg',
|
||||
'size' : '17Mb'
|
||||
'preview' : 'assets/images/mail/attachment-3.jpg',
|
||||
'size': '17Mb'
|
||||
}
|
||||
],
|
||||
'labels' : [
|
||||
|
|
|
|||
|
|
@ -94,14 +94,14 @@ export class ScrumboardFakeDb
|
|||
'id' : '67027cahbe3b52ecf2dc631c',
|
||||
'name': 'mail.jpg',
|
||||
'src' : 'assets/images/scrumboard/mail.jpg',
|
||||
'time': 'Added Nov 3 at 15:22AM',
|
||||
'time': 'Nov 3 at 15:22AM',
|
||||
'type': 'image'
|
||||
},
|
||||
{
|
||||
'id' : '56027cfcbe1b72ecf1fc452a',
|
||||
'name': 'calendar.jpg',
|
||||
'src' : 'assets/images/scrumboard/calendar.jpg',
|
||||
'time': 'Added Nov 1 at 12:34PM',
|
||||
'time': 'Nov 1 at 12:34PM',
|
||||
'type': 'image'
|
||||
}
|
||||
],
|
||||
|
|
@ -383,14 +383,14 @@ export class ScrumboardFakeDb
|
|||
'id' : '12027cafbe3b52ecf2ef632c',
|
||||
'name': 'header-.jpg',
|
||||
'src' : 'assets/images/scrumboard/header-1.jpg',
|
||||
'time': 'Added Nov 3 at 15:22AM',
|
||||
'time': 'Nov 3 at 15:22AM',
|
||||
'type': 'image'
|
||||
},
|
||||
{
|
||||
'id' : '55027ced1e1a12ecf1fced2a',
|
||||
'name': 'header-2.jpg',
|
||||
'src' : 'assets/images/scrumboard/header-2.jpg',
|
||||
'time': 'Added Nov 1 at 12:34PM',
|
||||
'time': 'Nov 1 at 12:34PM',
|
||||
'type': 'image'
|
||||
}
|
||||
],
|
||||
|
|
@ -628,13 +628,13 @@ export class ScrumboardFakeDb
|
|||
'id' : '56027cfcbe1b72ecf1fc452a',
|
||||
'name': 'calendar-app-design.jpg',
|
||||
'src' : 'assets/images/scrumboard/calendar.jpg',
|
||||
'time': 'Added Nov 1 at 12:34PM',
|
||||
'time': 'Nov 1 at 12:34PM',
|
||||
'type': 'image'
|
||||
},
|
||||
{
|
||||
'id' : '67027cahbe3b52ecf2dc631c',
|
||||
'url' : 'assets/images/scrumboard/calendar.jpg',
|
||||
'time': 'Added Nov 3 at 15:22AM',
|
||||
'time': 'Nov 3 at 15:22AM',
|
||||
'type': 'link'
|
||||
}
|
||||
],
|
||||
|
|
@ -730,7 +730,7 @@ export class ScrumboardFakeDb
|
|||
'id' : '5603a2ae2bbd55bb2db57478',
|
||||
'name': 'mail-app-design.jpg',
|
||||
'src' : 'assets/images/scrumboard/mail.jpg',
|
||||
'time': 'Added Nov 1 at 12:34PM',
|
||||
'time': 'Nov 1 at 12:34PM',
|
||||
'type': 'image'
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ chat-panel {
|
|||
z-index: 99;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
@ -381,7 +381,7 @@ fuse-sidebar {
|
|||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
min-width: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
width: 100vw !important;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ import { ContentComponent } from 'app/layout/components/content/content.componen
|
|||
],
|
||||
imports : [
|
||||
RouterModule,
|
||||
FuseSharedModule,
|
||||
FuseSharedModule
|
||||
],
|
||||
exports: [
|
||||
exports : [
|
||||
ContentComponent
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
<a mat-button routerLink="/documentation/changelog">Changelog</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</mat-toolbar>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
<div class="navbar-content">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
<fuse-navigation class="material2" layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,19 @@ fuse-sidebar {
|
|||
|
||||
.navbar-content {
|
||||
padding-top: 0;
|
||||
|
||||
// Material 2 specific style
|
||||
.material2 {
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
border-radius: 20px;
|
||||
margin: 0 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,22 @@ fuse-sidebar {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
|
||||
// Material 2 specific style
|
||||
.material2 {
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
border-radius: 20px;
|
||||
margin: 0 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ toolbar {
|
|||
min-width: 64px;
|
||||
height: 64px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ toolbar {
|
|||
height: 64px;
|
||||
width: 1px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,7 +144,8 @@
|
|||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
@include mat-elevation(4);
|
||||
border-radius: 8px;
|
||||
@include mat-elevation(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,16 +25,15 @@
|
|||
<div class="filters" fxLayout="column" fxLayoutAlign="center center"
|
||||
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<mat-form-field class="course-search">
|
||||
|
||||
<input matInput placeholder="Search for a course" [(ngModel)]="searchTerm"
|
||||
<mat-form-field appearance="outline" class="course-search">
|
||||
<mat-label>Search for a course</mat-label>
|
||||
<input matInput [(ngModel)]="searchTerm"
|
||||
(input)="filterCoursesByTerm()">
|
||||
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="category-selector">
|
||||
|
||||
<mat-select placeholder="Select Category" [(ngModel)]="currentCategory"
|
||||
<mat-form-field appearance="outline" class="category-selector">
|
||||
<mat-label>Category</mat-label>
|
||||
<mat-select [(ngModel)]="currentCategory"
|
||||
(selectionChange)="filterCoursesByCategory()">
|
||||
<mat-option [value]="'all'">
|
||||
All
|
||||
|
|
@ -43,7 +42,6 @@
|
|||
{{ category.label }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
letter-spacing: 0.03em;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
.content {
|
||||
|
||||
.category-selector {
|
||||
min-width: 200px;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
|
|
@ -66,18 +66,14 @@
|
|||
margin: 24px auto;
|
||||
padding: 0 20px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.course-search {
|
||||
width: 200px;
|
||||
width: 320px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('sm') {
|
||||
@include media-breakpoint('gt-xs') {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -100,15 +96,17 @@
|
|||
&:hover {
|
||||
|
||||
.course-content {
|
||||
@include mat-elevation(8);
|
||||
border: none;
|
||||
@include mat-elevation(12);
|
||||
}
|
||||
}
|
||||
|
||||
.course-content {
|
||||
min-height: 240px;
|
||||
transition: box-shadow 150ms ease-in-out;
|
||||
|
||||
@include mat-elevation(3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 200ms ease-in-out;
|
||||
@include mat-elevation(1);
|
||||
|
||||
.header {
|
||||
padding: 16px 24px;
|
||||
|
|
|
|||
|
|
@ -20,13 +20,14 @@
|
|||
min-height: 200px;
|
||||
}
|
||||
|
||||
&.cal-open {
|
||||
@include mat-elevation(3);
|
||||
&.cal-selected {
|
||||
border: none;
|
||||
@include mat-elevation(9);
|
||||
}
|
||||
}
|
||||
|
||||
.cal-open-day-events {
|
||||
box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
|
||||
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.54);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -111,7 +111,6 @@ export class CalendarComponent implements OnInit
|
|||
*/
|
||||
beforeMonthViewRender({header, body}): void
|
||||
{
|
||||
// console.info('beforeMonthViewRender');
|
||||
/**
|
||||
* Get the selected day
|
||||
*/
|
||||
|
|
@ -122,10 +121,10 @@ export class CalendarComponent implements OnInit
|
|||
if ( _selectedDay )
|
||||
{
|
||||
/**
|
||||
* Set selectedday style
|
||||
* Set selected day style
|
||||
* @type {string}
|
||||
*/
|
||||
_selectedDay.cssClass = 'mat-elevation-z3';
|
||||
_selectedDay.cssClass = 'cal-selected';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,36 +8,26 @@
|
|||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
|
||||
<div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
<div mat-dialog-content class="p-16 pb-0 m-0" fusePerfectScrollbar>
|
||||
|
||||
<form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Title</mat-label>
|
||||
<input matInput
|
||||
name="title"
|
||||
formControlName="title"
|
||||
placeholder="Title"
|
||||
required>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="py-16" fxFlex="1 0 auto" fxLayout="row">
|
||||
<mat-slide-toggle
|
||||
name="allDay"
|
||||
formControlName="allDay"
|
||||
class="mr-24"
|
||||
aria-label="All day">
|
||||
All Day
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
|
||||
|
||||
<div class="py-16" fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
|
||||
|
||||
<mat-form-field class="mr-sm-24" fxFlex>
|
||||
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
|
||||
<mat-label>Primary color</mat-label>
|
||||
<input matInput
|
||||
class="primary-color-input"
|
||||
class="primary-color-input border-radius-4"
|
||||
name="primary color"
|
||||
formControlName="primary"
|
||||
placeholder="Primary color"
|
||||
[(colorPicker)]="event.color.primary"
|
||||
cpWidth="290px"
|
||||
[cpPresetColors]="presetColors"
|
||||
|
|
@ -45,12 +35,12 @@
|
|||
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field appearance="outline" class="pl-sm-8" fxFlex="50">
|
||||
<mat-label>Secondary color</mat-label>
|
||||
<input matInput
|
||||
class="secondary-color-input"
|
||||
class="secondary-color-input border-radius-4"
|
||||
name="secondary color"
|
||||
formControlName="secondary"
|
||||
placeholder="Secondary color"
|
||||
[(colorPicker)]="event.color.secondary"
|
||||
cpWidth="290px"
|
||||
[cpPresetColors]="presetColors"
|
||||
|
|
@ -60,50 +50,57 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="pb-32" fxFlex="1 0 auto" fxLayout="row">
|
||||
|
||||
<mat-slide-toggle name="allDay" formControlName="allDay" class="mr-24" aria-label="All day">
|
||||
All Day
|
||||
</mat-slide-toggle>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
|
||||
|
||||
<mat-form-field class="mr-sm-24" fxFlex>
|
||||
<input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
|
||||
name="start"
|
||||
formControlName="start">
|
||||
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
|
||||
<mat-label>Start date</mat-label>
|
||||
<input matInput [matDatepicker]="startDatePicker" name="start" formControlName="start">
|
||||
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
|
||||
<input matInput placeholder="Start Time">
|
||||
<mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
|
||||
<mat-label>Start time</mat-label>
|
||||
<input matInput type="time">
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
|
||||
|
||||
<mat-form-field class="mr-sm-24" fxFlex>
|
||||
<input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
|
||||
name="end"
|
||||
formControlName="end">
|
||||
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
|
||||
<mat-label>End date</mat-label>
|
||||
<input matInput [matDatepicker]="endDatePicker" name="end" formControlName="end">
|
||||
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
|
||||
<input matInput placeholder="End Time">
|
||||
<mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
|
||||
<mat-label>End time</mat-label>
|
||||
<input matInput type="time">
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<mat-form-field formGroupName="meta" class="w-100-p">
|
||||
<mat-form-field appearance="outline" formGroupName="meta" class="w-100-p">
|
||||
<mat-label>Location</mat-label>
|
||||
<input matInput
|
||||
name="location"
|
||||
formControlName="location"
|
||||
placeholder="Location">
|
||||
formControlName="location">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field formGroupName="meta" class="w-100-p">
|
||||
|
||||
<mat-form-field appearance="outline" formGroupName="meta" class="w-100-p">
|
||||
<mat-label>Notes</mat-label>
|
||||
<textarea matInput
|
||||
formControlName="notes"
|
||||
placeholder="Notes"
|
||||
mat-maxlength="250"
|
||||
max-rows="4">
|
||||
</textarea>
|
||||
|
|
@ -113,32 +110,34 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<button *ngIf="action !=='edit'"
|
||||
mat-raised-button
|
||||
(click)="matDialogRef.close(eventForm)"
|
||||
class="save-button mat-accent"
|
||||
[disabled]="eventForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
|
||||
|
||||
<button *ngIf="action ==='edit'"
|
||||
mat-raised-button
|
||||
(click)="matDialogRef.close(['save',eventForm])"
|
||||
class="save-button mat-accent"
|
||||
[disabled]="eventForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
||||
<button *ngIf="action ==='edit'"
|
||||
mat-icon-button
|
||||
mat-button color="primary"
|
||||
class="mr-8"
|
||||
(click)="matDialogRef.close(['delete',eventForm])"
|
||||
aria-label="Delete"
|
||||
matTooltip="Delete">
|
||||
<mat-icon>delete</mat-icon>
|
||||
DELETE
|
||||
</button>
|
||||
|
||||
<button *ngIf="action !== 'edit'"
|
||||
mat-button color="primary"
|
||||
class="save-button"
|
||||
(click)="matDialogRef.close(eventForm)"
|
||||
[disabled]="eventForm.invalid"
|
||||
aria-label="ADD">
|
||||
ADD
|
||||
</button>
|
||||
|
||||
<button *ngIf="action === 'edit'"
|
||||
mat-button color="primary"
|
||||
class="save-button"
|
||||
(click)="matDialogRef.close(['save', eventForm])"
|
||||
[disabled]="eventForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('xs') {
|
||||
@include media-breakpoint('gt-xs') {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<div fxFlex fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
<div class="big-circle mat-elevation-z6 app-logo" fxLayout="column" fxLayoutAlign="center center"
|
||||
<div class="big-circle app-logo" fxLayout="column" fxLayoutAlign="center center"
|
||||
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
|
||||
<mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="app-title mt-48 mb-16" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
|
||||
<span class="app-title mt-48 mb-8" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
|
||||
Chat App
|
||||
</span>
|
||||
|
||||
<span fxHide fxShow.gt-md class="app-message" [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
|
||||
Select a contact to start a chat!
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@ chat-start {
|
|||
height: 240px;
|
||||
line-height: 240px;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint('lt-md') {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ chat-view {
|
|||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
@include mat-elevation(2);
|
||||
border: 1px solid;
|
||||
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,15 @@
|
|||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include media-breakpoint('lt-lg') {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
.mat-sidenav-container {
|
||||
display: flex;
|
||||
|
|
@ -38,7 +39,6 @@
|
|||
flex-direction: column;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.37);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
.big-circle {
|
||||
background: map-get($background, card);
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,6 +61,8 @@
|
|||
.mat-form-field-flex {
|
||||
|
||||
.mat-form-field-infix {
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
@if ($is-dark == true) {
|
||||
background-color: map-get($background, hover);
|
||||
} @else {
|
||||
|
|
@ -84,6 +87,7 @@
|
|||
|
||||
.search {
|
||||
background: map-get($background, background);
|
||||
border-color: map-get($foreground, divider);
|
||||
|
||||
input {
|
||||
background: map-get($background, background);
|
||||
|
|
|
|||
|
|
@ -81,12 +81,10 @@
|
|||
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<mat-icon>search</mat-icon>
|
||||
|
||||
<mat-icon class="s-16 secondary-text">search</mat-icon>
|
||||
<input [(ngModel)]="searchText" type="text" placeholder="Search or start new chat" fxFlex>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
|
|
@ -120,27 +118,29 @@
|
|||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
|
||||
<img [src]="contacts | getById:chat.contactId:'avatar'"
|
||||
class="avatar"
|
||||
<img class="avatar" [src]="contacts | getById:chat.contactId:'avatar'"
|
||||
alt="{{contacts | getById:chat.contactId:'name'}}"/>
|
||||
<mat-icon class="s-16 status" [ngClass]="contacts | getById:chat.contactId:'status'"></mat-icon>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxFlex>
|
||||
|
||||
<div class="" fxFlex fxLayout="column" fxLayoutAlign="center start">
|
||||
<div class="pr-4" fxFlex fxLayout="column" fxLayoutAlign="center start">
|
||||
<div class="contact-name">{{contacts | getById:chat.contactId:'name'}}</div>
|
||||
<div class="contact-last-message">{{chat.lastMessage}}</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="column" fxLayoutAlign="center end">
|
||||
<div fxLayout="column" fxLayoutAlign="start end">
|
||||
<div class="contact-last-message-time">
|
||||
{{chat.lastMessageTime | date}}
|
||||
</div>
|
||||
<div *ngIf="chat.unread" class="unread-message-count accent">{{chat.unread}}</div>
|
||||
<div *ngIf="chat.unread" class="mt-4 unread-message-count accent">{{chat.unread}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
@ -159,17 +159,21 @@
|
|||
[@animate]="{value:'*',params:{y:'100%'}}">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div class="avatar-wrapper" fxFlex="0 1 auto">
|
||||
<img src="{{contact.avatar}}" class="mat-avatar avatar" alt="{{contact.name}}"/>
|
||||
<mat-icon class="s-16 status" [ngClass]="contact.status"></mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="" fxLayout="column" fxLayoutAlign="center start">
|
||||
<div fxLayout="column" fxLayoutAlign="start start">
|
||||
<div class="contact-name">{{contact.name}}</div>
|
||||
<p class="contact-mood">{{contact.mood}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<!-- / CONTACTS LIST-->
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,16 @@ chat-chats-sidenav {
|
|||
line-height: 36px;
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
@include mat-elevation(1);
|
||||
border-radius: 18px;
|
||||
border: 1px solid;
|
||||
overflow: hidden;
|
||||
|
||||
.icon {
|
||||
.mat-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: 12px;
|
||||
padding: 0 12px 0 8px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -61,6 +63,7 @@ chat-chats-sidenav {
|
|||
border-bottom: 1px solid;
|
||||
padding: 16px;
|
||||
font-weight: 400;
|
||||
border-radius: 0;
|
||||
|
||||
.avatar-wrapper {
|
||||
|
||||
|
|
@ -80,17 +83,23 @@ chat-chats-sidenav {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.contact-last-message-time {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.contact-mood {
|
||||
line-height: normal;
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
font-size: 12px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@
|
|||
<!-- USER MOOD -->
|
||||
<form [formGroup]="userForm" fxLayout="column">
|
||||
|
||||
<mat-form-field class="mb-24" fxFlex="0 1 auto">
|
||||
<textarea matInput placeholder="Mood" name="mood"
|
||||
formControlName="mood" rows="3"></textarea>
|
||||
<mat-form-field appearance="outline" fxFlex="0 1 auto">
|
||||
<mat-label>Mood</mat-label>
|
||||
<textarea matInput name="mood" formControlName="mood" rows="3"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-radio-group formControlName="status" fxLayout="column">
|
||||
|
|
|
|||
|
|
@ -14,79 +14,88 @@
|
|||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
|
||||
<div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
<div mat-dialog-content class="p-24 pb-0 m-0" fusePerfectScrollbar>
|
||||
|
||||
<form [formGroup]="contactForm">
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Name</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
|
||||
<input name="name" formControlName="name" placeholder="Name" matInput required>
|
||||
<input name="name" formControlName="name" matInput required>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Lastname</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
|
||||
<input name="lastName" formControlName="lastName" placeholder="Lastname" matInput>
|
||||
<input name="lastName" formControlName="lastName" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Nickname</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">star</mat-icon>
|
||||
<input name="nickname" formControlName="nickname" matInput placeholder="Nickname">
|
||||
<input name="nickname" formControlName="nickname" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Phone number</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">phone</mat-icon>
|
||||
<input formControlName="phone" matInput placeholder="Phone number">
|
||||
<input formControlName="phone" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Email</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">email</mat-icon>
|
||||
<input name="email" formControlName="email" matInput type="email" placeholder="Email">
|
||||
<input name="email" formControlName="email" matInput type="email">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Company</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">domain</mat-icon>
|
||||
<input name="company" formControlName="company" matInput placeholder="Company">
|
||||
<input name="company" formControlName="company" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Job title</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">work</mat-icon>
|
||||
<input name="jobTitle" formControlName="jobTitle" matInput placeholder="Job title">
|
||||
<input name="jobTitle" formControlName="jobTitle" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field class="mr-24" fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Birthday</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">cake</mat-icon>
|
||||
<input matInput [matDatepicker]="birthdayDatePicker" placeholder="Birthday">
|
||||
<input matInput [matDatepicker]="birthdayDatePicker" name="birthday" formControlName="birthday">
|
||||
<mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #birthdayDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Address</mat-label>
|
||||
<mat-icon matPrefix class="mr-12 s-20 secondary-text">home</mat-icon>
|
||||
<input name="address" formControlName="address" matInput placeholder="Address">
|
||||
<input name="address" formControlName="address" matInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex>
|
||||
<textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text"
|
||||
max-rows="4"></textarea>
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<mat-label>Notes</mat-label>
|
||||
<textarea name="notes" formControlName="notes" matInput type="text" max-rows="4"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
|
@ -94,32 +103,33 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
|
||||
|
||||
<button *ngIf="action !=='edit'"
|
||||
mat-raised-button
|
||||
(click)="matDialogRef.close(contactForm)"
|
||||
class="save-button mat-accent"
|
||||
[disabled]="contactForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
||||
<button *ngIf="action ==='edit'"
|
||||
mat-raised-button
|
||||
(click)="matDialogRef.close(['save',contactForm])"
|
||||
class="save-button mat-accent"
|
||||
[disabled]="contactForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
||||
<button *ngIf="action ==='edit'"
|
||||
mat-icon-button
|
||||
<button *ngIf="action === 'edit'"
|
||||
mat-button
|
||||
class="mr-8"
|
||||
(click)="matDialogRef.close(['delete',contactForm])"
|
||||
aria-label="Delete"
|
||||
matTooltip="Delete">
|
||||
<mat-icon>delete</mat-icon>
|
||||
DELETE
|
||||
</button>
|
||||
|
||||
<button *ngIf="action !== 'edit'"
|
||||
mat-button
|
||||
class="save-button"
|
||||
(click)="matDialogRef.close(contactForm)"
|
||||
[disabled]="contactForm.invalid"
|
||||
aria-label="SAVE">
|
||||
ADD
|
||||
</button>
|
||||
|
||||
<button *ngIf="action === 'edit'"
|
||||
mat-button
|
||||
class="save-button"
|
||||
(click)="matDialogRef.close(['save',contactForm])"
|
||||
[disabled]="contactForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('xs') {
|
||||
@include media-breakpoint('gt-xs') {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
<div fxFlex="row" fxLayoutAlign="end center">
|
||||
<button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
|
||||
<mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
|
||||
<mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
|
||||
<mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_border</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ contacts-contact-list {
|
|||
padding: 0;
|
||||
z-index: 99;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
@include media-breakpoint('xs') {
|
||||
position: sticky;
|
||||
top: calc(100vh - 72px);
|
||||
top: calc(100vh - 120px);
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ export class Contact
|
|||
this.email = contact.email || '';
|
||||
this.phone = contact.phone || '';
|
||||
this.address = contact.address || '';
|
||||
this.birthday = contact.birhday || '';
|
||||
this.birthday = contact.birthday || '';
|
||||
this.notes = contact.notes || '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<div id="contacts" class="page-layout simple left-sidebar inner-sidebar inner-scroll">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
|
||||
<div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start"
|
||||
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button mat-icon-button class="sidebar-toggle mr-12" fxHide.gt-md
|
||||
<button mat-icon-button class="sidebar-toggle mr-12" fxHide.gt-sm
|
||||
(click)="toggleSidebar('contacts-main-sidebar')">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
|
@ -25,13 +25,17 @@
|
|||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-input-wrapper mt-16 ml-8 m-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<label for="search" class="mr-8">
|
||||
<mat-icon>search</mat-icon>
|
||||
</label>
|
||||
<mat-form-field mat-no-float class="m-0" floatLabel="never">
|
||||
<input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
|
||||
</mat-form-field>
|
||||
<div class="ml-sm-32" fxLayout="row" fxLayoutAlign="center center" fxFlex>
|
||||
|
||||
<div class="search-wrapper mt-16 mt-sm-0">
|
||||
|
||||
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input [formControl]="searchInput" placeholder="Search for a contact">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
|
|
@ -61,7 +65,7 @@
|
|||
<div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content mat-elevation-z4">
|
||||
<div class="content">
|
||||
<contacts-contact-list></contacts-contact-list>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,34 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
#contacts {
|
||||
|
||||
.header {
|
||||
|
||||
.search-wrapper {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(1);
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 18px;
|
||||
|
||||
input {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,30 @@
|
|||
@mixin contacts-theme($theme) {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
#contacts {
|
||||
|
||||
.header {
|
||||
|
||||
.search-wrapper {
|
||||
background: map-get($background, card);
|
||||
|
||||
.search {
|
||||
|
||||
.mat-icon {
|
||||
color: map-get($foreground, icon);
|
||||
}
|
||||
|
||||
input {
|
||||
background: map-get($background, card);
|
||||
color: map-get($foreground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.sidebar {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<!-- SIDEBAR CONTENT -->
|
||||
<div class="content py-16" fusePerfectScrollbar>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav material2">
|
||||
|
||||
<div class="nav-item" aria-label="inbox">
|
||||
<a class="nav-link" matRipple (click)="changeFilter('all')"
|
||||
|
|
|
|||
|
|
@ -20,9 +20,10 @@
|
|||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
|
||||
@include media-breakpoint(gt-sm) {
|
||||
@include mat-elevation(4);
|
||||
@include mat-elevation(1);
|
||||
}
|
||||
|
||||
> .header {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
padding: 32px;
|
||||
min-width: 0;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
@include media-breakpoint('lt-lg') {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
@include media-breakpoint('lt-lg') {
|
||||
flex: 1 0 100%;
|
||||
margin-top: 32px;
|
||||
width: 100%;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
.fuse-card {
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
@include media-breakpoint('lt-lg') {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
|
|
|
|||
|
|
@ -1,158 +1,5 @@
|
|||
<div id="dashboard-project" class="page-layout simple right-sidebar" fxLayout="row">
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<fuse-sidebar class="sidebar" name="project-dashboard-right-sidebar-1" position="right" lockedOpen="gt-md">
|
||||
|
||||
<!-- SIDEBAR CONTENT -->
|
||||
<div class="content">
|
||||
|
||||
<!-- WIDGET GROUP -->
|
||||
<div class="widget-group" fxLayout="column" fxFlex="100" [@animateStagger]="{value:'50'}">
|
||||
|
||||
<!-- NOW WIDGET -->
|
||||
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="p-0">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<div class="h3">{{dateNow | date: 'EEEE, HH:mm:ss'}}</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #moreMenu="matMenu">
|
||||
<button mat-menu-item aria-label="Flip widget">
|
||||
Details
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
|
||||
<div class="h1 secondary-text">
|
||||
<span>{{dateNow | date: 'MMMM'}}</span>
|
||||
</div>
|
||||
|
||||
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
|
||||
{{dateNow | date: 'd'}}
|
||||
</div>
|
||||
|
||||
<div class="h1 secondary-text">
|
||||
<span>{{dateNow | date: 'y'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
</div>
|
||||
<!-- / Front -->
|
||||
|
||||
</fuse-widget>
|
||||
<!-- / NOW WIDGET -->
|
||||
|
||||
<!-- WEATHER WIDGET -->
|
||||
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="p-0">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text mr-8">place</mat-icon>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
|
||||
<mat-icon class="secondary-text">more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #moreMenu="matMenu">
|
||||
<button mat-menu-item aria-label="Flip widget">
|
||||
Details
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<mat-icon fontSet="meteocons"
|
||||
[fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
|
||||
class="icon s-40 secondary-text mr-16"></mat-icon>
|
||||
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
|
||||
</span>
|
||||
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
|
||||
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 by" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" fontIcon="icon-windy"
|
||||
class="s-16 secondary-text mr-8"></mat-icon>
|
||||
<span>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
|
||||
</span>
|
||||
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" fontIcon="icon-compass"
|
||||
class="s-16 secondary-text mr-8"></mat-icon>
|
||||
<span>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" fontIcon="icon-rainy"
|
||||
class="s-16 secondary-text mr-8"></mat-icon>
|
||||
<span>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-16">
|
||||
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
|
||||
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
|
||||
<span class="h4">{{day.name}}</span>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" [fontIcon]="day.icon"
|
||||
class="secondary-text mr-16"></mat-icon>
|
||||
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
|
||||
<span class="h2 font-weight-300 secondary-text text-super">°</span>
|
||||
<span class="h2 font-weight-300 secondary-text">
|
||||
{{widgets.weatherWidget.tempUnit}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
</div>
|
||||
<!-- / Front -->
|
||||
|
||||
</fuse-widget>
|
||||
<!-- / WEATHER WIDGET -->
|
||||
|
||||
</div>
|
||||
<!-- / WIDGET GROUP -->
|
||||
|
||||
</div>
|
||||
<!-- / SIDEBAR CONTENT -->
|
||||
|
||||
</fuse-sidebar>
|
||||
<!-- / SIDEBAR -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center" fusePerfectScrollbar>
|
||||
|
||||
|
|
@ -161,8 +8,8 @@
|
|||
|
||||
<div fxLayout="row" fxLayoutAlign="space-between start">
|
||||
|
||||
<span class="mat-display-1 mb-0 welcome-message"
|
||||
[@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!
|
||||
<span class="mat-display-1 my-0 my-sm-24 welcome-message"
|
||||
[@animate]="{value:'*',params:{x:'50px'}}">Welcome back, Charlie!
|
||||
</span>
|
||||
|
||||
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
|
||||
|
|
@ -204,7 +51,7 @@
|
|||
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<mat-form-field>
|
||||
|
|
@ -242,7 +89,7 @@
|
|||
<!-- / Front -->
|
||||
|
||||
<!-- Back -->
|
||||
<div class="fuse-widget-back p-16 pt-32 mat-elevation-z2">
|
||||
<div class="fuse-widget-back p-16 pt-32">
|
||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
||||
aria-label="Flip widget">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
|
|
@ -262,7 +109,7 @@
|
|||
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget2.title}}</div>
|
||||
|
|
@ -291,7 +138,7 @@
|
|||
<!-- / Front -->
|
||||
|
||||
<!-- Back -->
|
||||
<div class="fuse-widget-back p-16 pt-32 mat-elevation-z2">
|
||||
<div class="fuse-widget-back p-16 pt-32">
|
||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
||||
aria-label="Flip widget">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
|
|
@ -311,7 +158,7 @@
|
|||
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget3.title}}</div>
|
||||
|
|
@ -340,7 +187,7 @@
|
|||
<!-- / Front -->
|
||||
|
||||
<!-- Back -->
|
||||
<div class="fuse-widget-back p-16 pt-32 mat-elevation-z2">
|
||||
<div class="fuse-widget-back p-16 pt-32">
|
||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
||||
aria-label="Flip widget">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
|
|
@ -360,7 +207,7 @@
|
|||
fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget4.title}}</div>
|
||||
|
|
@ -389,7 +236,7 @@
|
|||
<!-- / Front -->
|
||||
|
||||
<!-- Back -->
|
||||
<div class="fuse-widget-back p-16 pt-32 mat-elevation-z2">
|
||||
<div class="fuse-widget-back p-16 pt-32">
|
||||
<button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
|
||||
aria-label="Flip widget">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
|
|
@ -409,7 +256,7 @@
|
|||
class="widget widget5">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="px-16 border-bottom" fxLayout="row wrap"
|
||||
fxLayoutAlign="space-between center">
|
||||
|
|
@ -488,7 +335,7 @@
|
|||
fxFlex="100" fxFlex.gt-sm="50">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="px-16 py-8 border-bottom" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
|
|
@ -548,7 +395,7 @@
|
|||
fxFlex="100" fxFlex.gt-sm="50">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="px-16 py-8 border-bottom" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
|
|
@ -601,7 +448,7 @@
|
|||
fxFlex="100" fxFlex.gt-sm="50">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
<div class="h3 px-16 py-24">
|
||||
{{widgets.widget8.title}}
|
||||
</div>
|
||||
|
|
@ -633,7 +480,7 @@
|
|||
fxFlex="100" fxFlex.gt-sm="50">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
<div class="px-16 py-12 border-bottom" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget9.title}}</div>
|
||||
|
|
@ -750,7 +597,7 @@
|
|||
fxFlex="100">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="simple-table-container" ms-responsive-table>
|
||||
<div class=" table-title">
|
||||
|
|
@ -803,7 +650,7 @@
|
|||
fxFlex="100">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-elevation-z2">
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="p-24 mb-8 border-bottom" fxLayout="row"
|
||||
fxLayoutAlign="space-between center">
|
||||
|
|
@ -901,4 +748,154 @@
|
|||
</div>
|
||||
<!-- / CENTER -->
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<fuse-sidebar class="sidebar" name="project-dashboard-right-sidebar-1" position="right" lockedOpen="gt-md">
|
||||
|
||||
<!-- SIDEBAR CONTENT -->
|
||||
<div class="content">
|
||||
|
||||
<!-- WIDGET GROUP -->
|
||||
<div class="widget-group" fxLayout="column" fxFlex="100" [@animateStagger]="{value:'50'}">
|
||||
|
||||
<!-- NOW WIDGET -->
|
||||
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="pb-0">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<div class="h3">{{dateNow | date: 'EEEE, HH:mm:ss'}}</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #moreMenu="matMenu">
|
||||
<button mat-menu-item aria-label="Flip widget">
|
||||
Details
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
|
||||
<div class="h1 secondary-text">
|
||||
<span>{{dateNow | date: 'MMMM'}}</span>
|
||||
</div>
|
||||
|
||||
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
|
||||
{{dateNow | date: 'd'}}
|
||||
</div>
|
||||
|
||||
<div class="h1 secondary-text">
|
||||
<span>{{dateNow | date: 'y'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / Front -->
|
||||
|
||||
</fuse-widget>
|
||||
<!-- / NOW WIDGET -->
|
||||
|
||||
<!-- WEATHER WIDGET -->
|
||||
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="secondary-text mr-8">place</mat-icon>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
|
||||
<mat-icon class="secondary-text">more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #moreMenu="matMenu">
|
||||
<button mat-menu-item aria-label="Flip widget">
|
||||
Details
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<mat-icon fontSet="meteocons"
|
||||
[fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
|
||||
class="icon s-40 secondary-text mr-16"></mat-icon>
|
||||
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
|
||||
</span>
|
||||
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
|
||||
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-16 by" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" fontIcon="icon-windy"
|
||||
class="s-16 secondary-text mr-8"></mat-icon>
|
||||
<span>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
|
||||
</span>
|
||||
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" fontIcon="icon-compass"
|
||||
class="s-16 secondary-text mr-8"></mat-icon>
|
||||
<span>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" fontIcon="icon-rainy"
|
||||
class="s-16 secondary-text mr-8"></mat-icon>
|
||||
<span>
|
||||
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-16">
|
||||
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
|
||||
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
|
||||
<span class="h4">{{day.name}}</span>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon fontSet="meteocons" [fontIcon]="day.icon"
|
||||
class="secondary-text mr-16"></mat-icon>
|
||||
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
|
||||
<span class="h2 font-weight-300 secondary-text text-super">°</span>
|
||||
<span class="h2 font-weight-300 secondary-text">
|
||||
{{widgets.weatherWidget.tempUnit}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / Front -->
|
||||
|
||||
</fuse-widget>
|
||||
<!-- / WEATHER WIDGET -->
|
||||
|
||||
</div>
|
||||
<!-- / WIDGET GROUP -->
|
||||
|
||||
</div>
|
||||
<!-- / SIDEBAR CONTENT -->
|
||||
|
||||
</fuse-sidebar>
|
||||
<!-- / SIDEBAR -->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,13 @@
|
|||
height: 40px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.project-selector {
|
||||
margin-left: 1px;
|
||||
border-radius: 0;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0 8px 0 0;
|
||||
|
||||
mat-icon {
|
||||
color: #FFFFFF;
|
||||
|
|
|
|||
|
|
@ -5,21 +5,6 @@
|
|||
|
||||
#dashboard-project {
|
||||
|
||||
> .sidebar {
|
||||
|
||||
fuse-widget {
|
||||
|
||||
> .fuse-widget-front,
|
||||
> .fuse-widget-back {
|
||||
@if ($is-dark) {
|
||||
background: map-get($background, background);
|
||||
} @else {
|
||||
background: map-get($background, app-bar);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .center {
|
||||
|
||||
> .content {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import {
|
||||
MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule,
|
||||
MatButtonModule, MatChipsModule, MatExpansionModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule,
|
||||
MatSortModule,
|
||||
MatTableModule, MatTabsModule
|
||||
} from '@angular/material';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
|
@ -69,6 +70,7 @@ const routes: Routes = [
|
|||
|
||||
MatButtonModule,
|
||||
MatChipsModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
<div class="h2 secondary-text">Customer</div>
|
||||
</div>
|
||||
|
||||
<div class="customer">
|
||||
<div class="customer mb-32">
|
||||
<table class="simple">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -88,9 +88,14 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<mat-tab-group class="addresses">
|
||||
<mat-accordion class="addresses">
|
||||
|
||||
<mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Shipping Address</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<mat-tab label="Shipping Address">
|
||||
<div fxFlex fxLayout="column">
|
||||
<div class="address h4 py-24">{{order.customer.shippingAddress.address}}
|
||||
</div>
|
||||
|
|
@ -102,9 +107,15 @@
|
|||
</agm-marker>
|
||||
</agm-map>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Invoice Address" fxLayout="column">
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Invoice Address</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div fxFlex fxLayout="column">
|
||||
<div class="address h4 py-24">{{order.customer.invoiceAddress.address}}
|
||||
</div>
|
||||
|
|
@ -116,8 +127,11 @@
|
|||
</agm-marker>
|
||||
</agm-map>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
</mat-expansion-panel>
|
||||
|
||||
</mat-accordion>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section pb-48">
|
||||
|
|
@ -156,9 +170,10 @@
|
|||
[formGroup]="statusForm"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<mat-form-field class="mr-16" fxFlex>
|
||||
<mat-form-field appearance="outline" class="mr-16" fxFlex>
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select formControlName="newStatus"
|
||||
placeholder="Select a status" required>
|
||||
required>
|
||||
<mat-option *ngFor="let status of orderStatuses"
|
||||
[value]="status.id">
|
||||
{{status.name}}
|
||||
|
|
@ -265,21 +280,21 @@
|
|||
<table class="simple">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Image</th>
|
||||
<th class="w-80">ID</th>
|
||||
<th class="w-120">Image</th>
|
||||
<th>Name</th>
|
||||
<th>Price</th>
|
||||
<th>Quantity</th>
|
||||
<th class="w-120">Price</th>
|
||||
<th class="w-80">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="product-row"
|
||||
*ngFor="let product of order.products"
|
||||
[routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle">
|
||||
<td class="w-64">
|
||||
<td>
|
||||
{{product.id}}
|
||||
</td>
|
||||
<td class="w-80">
|
||||
<td>
|
||||
<img class="product-image" [src]="product.image">
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo"
|
||||
<div class="logo mb-24 mb-sm-0"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
<mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
||||
|
|
@ -23,16 +23,14 @@
|
|||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-input-wrapper ml-sm-16"
|
||||
fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="search-input-wrapper ml-sm-32" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
<label for="search" class="mr-8">
|
||||
<mat-icon class="secondary-text">search</mat-icon>
|
||||
<mat-icon class="secondary-text s-18">search</mat-icon>
|
||||
</label>
|
||||
<mat-form-field floatLabel="never" fxFlex="1 0 auto">
|
||||
<input id="search" matInput #filter placeholder="Search">
|
||||
</mat-form-field>
|
||||
<input id="search" #filter placeholder="Search">
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
|
|
|
|||
|
|
@ -4,19 +4,50 @@
|
|||
|
||||
#orders {
|
||||
|
||||
.top-bg {
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
height: 224px;
|
||||
}
|
||||
}
|
||||
|
||||
> .center {
|
||||
|
||||
> .header {
|
||||
|
||||
.search-input-wrapper {
|
||||
max-width: 480px;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 21px;
|
||||
padding: 0 16px;
|
||||
background: white;
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
margin: 24px 0;
|
||||
height: 128px !important;
|
||||
min-height: 128px !important;
|
||||
max-height: 128px !important;
|
||||
@include media-breakpoint('xs') {
|
||||
padding: 8px 0;
|
||||
height: 160px !important;
|
||||
min-height: 160px !important;
|
||||
max-height: 160px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,24 +67,26 @@
|
|||
|
||||
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Product Name</mat-label>
|
||||
<input matInput
|
||||
name="name"
|
||||
formControlName="name"
|
||||
placeholder="Product Name"
|
||||
required>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Product Description</mat-label>
|
||||
<textarea matInput
|
||||
name="description"
|
||||
formControlName="description"
|
||||
placeholder="Product Description"
|
||||
rows="5">
|
||||
</textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
|
||||
<mat-label>Categories</mat-label>
|
||||
|
||||
<mat-chip-list #categoryList name="categories" formControlName="categories">
|
||||
|
||||
|
|
@ -94,8 +96,7 @@
|
|||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
|
||||
<input placeholder="Categories"
|
||||
[matChipInputFor]="categoryList"
|
||||
<input [matChipInputFor]="categoryList"
|
||||
[matChipInputAddOnBlur]="true"
|
||||
(matChipInputTokenEnd)="product.addCategory($event)"/>
|
||||
|
||||
|
|
@ -103,7 +104,9 @@
|
|||
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
|
||||
<mat-label>Tags</mat-label>
|
||||
|
||||
<mat-chip-list #tagList name="tags" formControlName="tags">
|
||||
|
||||
|
|
@ -113,8 +116,7 @@
|
|||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
|
||||
<input placeholder="Tags"
|
||||
[matChipInputFor]="tagList"
|
||||
<input [matChipInputFor]="tagList"
|
||||
[matChipInputAddOnBlur]="true"
|
||||
(matChipInputTokenEnd)="product.addTag($event)"/>
|
||||
|
||||
|
|
@ -149,35 +151,39 @@
|
|||
<mat-tab label="Pricing">
|
||||
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Tax Excluded Price</mat-label>
|
||||
<input matInput
|
||||
name="priceTaxExcl"
|
||||
formControlName="priceTaxExcl"
|
||||
placeholder="Tax Excluded Price" type="number">
|
||||
type="number">
|
||||
<span matPrefix>$ </span>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Tax Included Price</mat-label>
|
||||
<input matInput
|
||||
name="priceTaxIncl"
|
||||
formControlName="priceTaxIncl"
|
||||
placeholder="Tax Included Price" type="number">
|
||||
type="number">
|
||||
<span matPrefix>$ </span>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Tax Rate</mat-label>
|
||||
<input matInput
|
||||
name="taxRate"
|
||||
formControlName="taxRate"
|
||||
placeholder="Tax Rate" type="number">
|
||||
type="number">
|
||||
<span matPrefix>%</span>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Compared Price</mat-label>
|
||||
<input matInput
|
||||
name="comparedPrice"
|
||||
formControlName="comparedPrice"
|
||||
placeholder="Compared Price" type="number">
|
||||
type="number">
|
||||
<span matPrefix>$ </span>
|
||||
<mat-hint align="start">Add a compare price to show next to the real price
|
||||
</mat-hint>
|
||||
|
|
@ -189,64 +195,74 @@
|
|||
<mat-tab label="Inventory">
|
||||
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>SKU</mat-label>
|
||||
<input matInput
|
||||
name="sku"
|
||||
formControlName="sku"
|
||||
placeholder="SKU">
|
||||
formControlName="sku">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input matInput
|
||||
name="quantity"
|
||||
formControlName="quantity"
|
||||
placeholder="Quantity" type="number">
|
||||
type="number">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Shipping">
|
||||
|
||||
<div class="tab-content p-24" fusePerfectScrollbar fxLayout="column">
|
||||
|
||||
<div class="py-16" fxLayout="row">
|
||||
<mat-form-field fxFlex>
|
||||
<div fxLayout="row" fxLayoutAlign="space-between">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="30">
|
||||
<mat-label>Width</mat-label>
|
||||
<input matInput
|
||||
name="Width"
|
||||
formControlName="width"
|
||||
placeholder="Width">
|
||||
formControlName="width">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="30">
|
||||
<mat-label>Height</mat-label>
|
||||
<input matInput
|
||||
name="Height"
|
||||
formControlName="height"
|
||||
placeholder="Height">
|
||||
formControlName="height">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="30">
|
||||
<mat-label>Depth</mat-label>
|
||||
<input matInput
|
||||
name="Depth"
|
||||
formControlName="depth"
|
||||
placeholder="Depth">
|
||||
formControlName="depth">
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Weight</mat-label>
|
||||
<input matInput
|
||||
name="Weight"
|
||||
formControlName="weight"
|
||||
placeholder="Weight">
|
||||
formControlName="weight">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Extra Shipping Fee</mat-label>
|
||||
<input matInput
|
||||
name="extraShippingFee"
|
||||
formControlName="extraShippingFee"
|
||||
placeholder="Extra Shipping Fee" type="number">
|
||||
type="number">
|
||||
<span matPrefix>$ </span>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
@ -257,4 +273,5 @@
|
|||
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,12 @@
|
|||
.product-image {
|
||||
overflow: hidden;
|
||||
width: 56px;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: 56px;
|
||||
border: 3px solid rgba(0, 0, 0, 0.12);
|
||||
min-height: 56px;
|
||||
max-height: 56px;
|
||||
border-radius: 4px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
|
|
@ -43,7 +47,7 @@
|
|||
height: 128px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
border: 3px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
<!-- HEADER -->
|
||||
<div class="header accent"
|
||||
fxLayout="column" fxLayoutAlign="center center"
|
||||
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||
fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div class="logo my-12 m-sm-0"
|
||||
<div class="logo mb-24 mb-md-0"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
<mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
||||
shopping_basket
|
||||
</mat-icon>
|
||||
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
|
||||
|
|
@ -25,22 +25,22 @@
|
|||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-input-wrapper mx-24 m-md-0"
|
||||
fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="search-input-wrapper mx-32 mx-md-0" fxFlex="1 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
<label for="search" class="mr-8">
|
||||
<mat-icon class="secondary-text">search</mat-icon>
|
||||
<mat-icon class="secondary-text s-18">search</mat-icon>
|
||||
</label>
|
||||
<mat-form-field floatLabel="never" fxFlex="1 0 auto">
|
||||
<input id="search" matInput #filter placeholder="Search">
|
||||
</mat-form-field>
|
||||
<input id="search" #filter placeholder="Search">
|
||||
</div>
|
||||
<!-- / SEARCH -->
|
||||
|
||||
<!-- ADD BUTTON -->
|
||||
<button mat-raised-button
|
||||
[routerLink]="'/apps/e-commerce/products/new'"
|
||||
class="add-product-button fuse-white my-12 mt-sm-0">
|
||||
class="add-product-button fuse-white mt-24 mt-md-0">
|
||||
<span>ADD NEW PRODUCT</span>
|
||||
</button>
|
||||
<!-- / ADD BUTTON -->
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
|
@ -67,9 +67,10 @@
|
|||
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
||||
<mat-cell *matCellDef="let product">
|
||||
<img class="product-image"
|
||||
*ngIf="product.images[0]" [alt]="product.name"
|
||||
[src]="product.images[0].url"/>
|
||||
<img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
|
||||
*ngIf="product.featuredImageId" [alt]="product.name"
|
||||
[src]="product.images[product.featuredImageId].url"/>
|
||||
<img *ngIf="!product.featuredImageId"
|
||||
[src]="'assets/images/ecommerce/product-image-placeholder.png'">
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
#products {
|
||||
|
||||
.top-bg {
|
||||
@include media-breakpoint-down(xs) {
|
||||
height: 240px;
|
||||
|
||||
@include media-breakpoint('lt-md') {
|
||||
height: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -16,10 +17,34 @@
|
|||
|
||||
.search-input-wrapper {
|
||||
max-width: 480px;
|
||||
height: 42px;
|
||||
max-height: 42px;
|
||||
min-height: 42px;
|
||||
border-radius: 21px;
|
||||
padding: 0 16px;
|
||||
background: white;
|
||||
|
||||
@include media-breakpoint('lt-md') {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
margin: 8px 0;
|
||||
@include media-breakpoint('lt-md') {
|
||||
padding: 8px 0;
|
||||
height: 192px !important;
|
||||
min-height: 192px !important;
|
||||
max-height: 192px !important;
|
||||
|
|
@ -64,7 +89,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mat-column-buttons {
|
||||
.mat-column-category {
|
||||
flex: 0 1 240px;
|
||||
}
|
||||
|
||||
.mat-column-price {
|
||||
flex: 0 1 160px;
|
||||
}
|
||||
|
||||
.mat-column-quantity {
|
||||
flex: 0 1 160px;
|
||||
}
|
||||
|
||||
.mat-column-active {
|
||||
flex: 0 1 80px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator, MatSort } from '@angular/material';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { merge, Observable, BehaviorSubject, fromEvent, Subject } from 'rxjs';
|
||||
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
|
|
@ -11,10 +11,10 @@ import { EcommerceProductsService } from 'app/main/apps/e-commerce/products/prod
|
|||
import { takeUntil } from 'rxjs/internal/operators';
|
||||
|
||||
@Component({
|
||||
selector : 'e-commerce-products',
|
||||
templateUrl: './products.component.html',
|
||||
styleUrls : ['./products.component.scss'],
|
||||
animations : fuseAnimations
|
||||
selector : 'e-commerce-products',
|
||||
templateUrl : './products.component.html',
|
||||
styleUrls : ['./products.component.scss'],
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class EcommerceProductsComponent implements OnInit
|
||||
{
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
min-height: 160px;
|
||||
max-height: 160px;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint('lt-md') {
|
||||
height: 120px;
|
||||
min-height: 120px;
|
||||
max-height: 120px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<!-- SIDEBAR CONTENT -->
|
||||
<div class="content py-16" fusePerfectScrollbar>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav material2">
|
||||
|
||||
<div class="nav-item" aria-label="inbox">
|
||||
<a class="nav-link" matRipple>
|
||||
|
|
|
|||
|
|
@ -12,48 +12,48 @@
|
|||
|
||||
<form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>From</mat-label>
|
||||
<input matInput name="from"
|
||||
placeholder="From"
|
||||
formControlName="from"
|
||||
type="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>To</mat-label>
|
||||
<input matInput name="to"
|
||||
placeholder="To"
|
||||
formControlName="to"
|
||||
type="email" required>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Cc</mat-label>
|
||||
<input matInput
|
||||
name="cc"
|
||||
placeholder="Cc"
|
||||
formControlName="cc"
|
||||
type="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Bcc</mat-label>
|
||||
<input matInput
|
||||
name="bcc"
|
||||
placeholder="Bcc"
|
||||
formControlName="bcc"
|
||||
type="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Subject</mat-label>
|
||||
<input matInput name="subject"
|
||||
placeholder="Subject"
|
||||
formControlName="subject">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<textarea matInput name="message"
|
||||
placeholder="Message"
|
||||
formControlName="message"
|
||||
rows="6">
|
||||
</textarea>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Message</mat-label>
|
||||
<textarea matInput name="message"
|
||||
formControlName="message"
|
||||
rows="6">
|
||||
</textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="attachment-list">
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size">(12 Kb)</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<span class="filename">attachment-1.jpg</span>
|
||||
<span class="size">(350 Kb)</span>
|
||||
<span class="size ml-4">(350 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
|
|
@ -86,8 +86,9 @@
|
|||
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<button mat-raised-button
|
||||
color="accent"
|
||||
(click)="matDialogRef.close(['send',composeForm])"
|
||||
class="save-button mat-accent"
|
||||
class="save-button"
|
||||
[disabled]="composeForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SEND
|
||||
|
|
|
|||
|
|
@ -12,14 +12,12 @@
|
|||
|
||||
.attachment-list {
|
||||
font-size: 13px;
|
||||
padding-top: 16px;
|
||||
|
||||
.attachment {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(0, 0, 0, 0.16);
|
||||
border: 1px solid;
|
||||
border-radius: 20px;
|
||||
padding-left: 16px;
|
||||
margin-top: 8px;
|
||||
border-radius: 2px;
|
||||
|
||||
.filename {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
|
||||
<mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
|
||||
<mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
|
||||
<mat-icon class="secondary-text" *ngIf="!mail.starred">star_border</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ mail-ngrx-details {
|
|||
.preview {
|
||||
width: 100px;
|
||||
margin: 0 16px 8px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
|
||||
<div class="avatar accent" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
|
||||
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
|
||||
<mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
|
||||
<mat-icon class="s-16 ml-8" *ngIf="mail.hasAttachments">attachment</mat-icon>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ mail-ngrx-list-item {
|
|||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
margin: 0 4px 0 0;
|
||||
padding: 3px 8px;
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</button>
|
||||
|
||||
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<mat-icon class="secondary-text">search</mat-icon>
|
||||
<input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@ mail-ngrx {
|
|||
.header {
|
||||
|
||||
.search-wrapper {
|
||||
@include mat-elevation(7);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(1);
|
||||
|
||||
.sidebar-toggle {
|
||||
margin: 0;
|
||||
margin: 0 0 0 6px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 0;
|
||||
|
|
@ -22,11 +24,13 @@ mail-ngrx {
|
|||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 18px;
|
||||
padding: 0 18px;
|
||||
|
||||
input {
|
||||
height: 56px;
|
||||
padding-left: 16px;
|
||||
min-height: 56px;
|
||||
max-height: 56px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -137,4 +137,22 @@
|
|||
border-top-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
|
||||
// Compose dialog
|
||||
.mail-ngrx-compose-dialog {
|
||||
|
||||
.mat-dialog-container {
|
||||
|
||||
.compose-form {
|
||||
|
||||
.attachment-list {
|
||||
|
||||
.attachment {
|
||||
background-color: map-get($background, card);
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<!-- SIDEBAR CONTENT -->
|
||||
<div class="content" fusePerfectScrollbar>
|
||||
|
||||
<div class="p-24">
|
||||
<div class="px-24 pt-32 pb-12">
|
||||
<button mat-raised-button
|
||||
class="mat-accent compose-dialog-button w-100-p"
|
||||
(click)="composeDialog()"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav material2">
|
||||
|
||||
<div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,50 +12,50 @@
|
|||
|
||||
<form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>From</mat-label>
|
||||
<input matInput name="from"
|
||||
placeholder="From"
|
||||
formControlName="from"
|
||||
type="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<input matInput name="to"
|
||||
placeholder="To"
|
||||
formControlName="to"
|
||||
type="email" required>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="show-hide-extra-fields" (click)="toggleExtraToFields()">
|
||||
<span [fxShow]="!showExtraToFields">Show CC & BCC</span>
|
||||
<span [fxShow]="showExtraToFields">Hide CC & BCC</span>
|
||||
</div>
|
||||
|
||||
<mat-form-field [fxShow]="showExtraToFields">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>To</mat-label>
|
||||
<input matInput name="to"
|
||||
formControlName="to"
|
||||
type="email" required>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" [fxShow]="showExtraToFields">
|
||||
<mat-label>Cc</mat-label>
|
||||
<input matInput
|
||||
name="cc"
|
||||
placeholder="Cc"
|
||||
formControlName="cc"
|
||||
type="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field [fxShow]="showExtraToFields">
|
||||
<mat-form-field appearance="outline" [fxShow]="showExtraToFields">
|
||||
<mat-label>Bcc</mat-label>
|
||||
<input matInput
|
||||
name="bcc"
|
||||
placeholder="Bcc"
|
||||
formControlName="bcc"
|
||||
type="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Subject</mat-label>
|
||||
<input matInput name="subject"
|
||||
placeholder="Subject"
|
||||
formControlName="subject">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Message</mat-label>
|
||||
<textarea matInput name="message"
|
||||
placeholder="Message"
|
||||
formControlName="message"
|
||||
rows="6">
|
||||
</textarea>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<span class="filename">attachment-2.doc</span>
|
||||
<span class="size">(12 Kb)</span>
|
||||
<span class="size ml-4">(12 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<span class="filename">attachment-1.jpg</span>
|
||||
<span class="size">(350 Kb)</span>
|
||||
<span class="size ml-4">(350 Kb)</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button aria-label="Delete attachment">
|
||||
|
|
@ -91,8 +91,9 @@
|
|||
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>
|
||||
<button mat-raised-button
|
||||
color="accent"
|
||||
(click)="matDialogRef.close(['send',composeForm])"
|
||||
class="save-button mat-accent"
|
||||
class="save-button"
|
||||
[disabled]="composeForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SEND
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('sm') {
|
||||
@include media-breakpoint('gt-xs') {
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
|
|
@ -27,14 +27,12 @@
|
|||
|
||||
.attachment-list {
|
||||
font-size: 13px;
|
||||
padding-top: 16px;
|
||||
|
||||
.attachment {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(0, 0, 0, 0.16);
|
||||
border: 1px solid;
|
||||
border-radius: 20px;
|
||||
padding-left: 16px;
|
||||
margin-top: 8px;
|
||||
border-radius: 2px;
|
||||
|
||||
.filename {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
|
||||
<mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
|
||||
<mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
|
||||
<mat-icon class="secondary-text" *ngIf="!mail.starred">star_border</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ mail-details {
|
|||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
margin: 4px 4px 4px 0;
|
||||
padding: 3px 8px;
|
||||
|
||||
|
|
@ -98,6 +98,7 @@ mail-details {
|
|||
.preview {
|
||||
width: 100px;
|
||||
margin: 0 16px 8px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
|
||||
<div class="avatar accent" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
|
||||
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
|
||||
<mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
|
||||
<mat-icon class="s-16 ml-8" *ngIf="mail.hasAttachments">attachment</mat-icon>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ mail-list-item {
|
|||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
margin: 0 4px 0 0;
|
||||
padding: 3px 8px;
|
||||
|
||||
|
|
|
|||
|
|
@ -24,9 +24,10 @@
|
|||
</button>
|
||||
|
||||
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<mat-icon class="secondary-text">search</mat-icon>
|
||||
<input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@ mail {
|
|||
.header {
|
||||
|
||||
.search-wrapper {
|
||||
@include mat-elevation(7);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
@include mat-elevation(1);
|
||||
|
||||
.sidebar-toggle {
|
||||
margin: 0;
|
||||
margin: 0 0 0 6px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 0;
|
||||
|
|
@ -22,11 +24,13 @@ mail {
|
|||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 18px;
|
||||
padding: 0 18px;
|
||||
|
||||
input {
|
||||
height: 56px;
|
||||
padding-left: 16px;
|
||||
min-height: 56px;
|
||||
max-height: 56px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -137,4 +137,22 @@
|
|||
border-top-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
|
||||
// Compose dialog
|
||||
.mail-compose-dialog {
|
||||
|
||||
.mat-dialog-container {
|
||||
|
||||
.compose-form {
|
||||
|
||||
.attachment-list {
|
||||
|
||||
.attachment {
|
||||
background-color: map-get($background, card);
|
||||
border-color: map-get($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<!-- SIDEBAR CONTENT -->
|
||||
<div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{y:'50px'}}">
|
||||
|
||||
<div class="p-24">
|
||||
<div class="px-24 pt-32 pb-12">
|
||||
<button mat-raised-button
|
||||
class="mat-accent compose-dialog-button w-100-p"
|
||||
(click)="composeDialog()"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav material2">
|
||||
|
||||
<div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
(cardLabelsChanged)="updateCard()"></scrumboard-label-selector>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
</div>
|
||||
<!-- / LABELS -->
|
||||
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
<mat-menu #membersMenu="matMenu" [overlapTrigger]="false">
|
||||
<div fxFlex fxLayout="column" class="scrumboard-members-menu"
|
||||
(click)="$event.stopPropagation()">
|
||||
<mat-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
|
||||
<mat-checkbox class="member px-16" [checked]="card.idMembers.indexOf(member.id) > -1"
|
||||
*ngFor="let member of board.members"
|
||||
(change)="toggleInArray(member.id, card.idMembers);updateCard()">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
</mat-checkbox>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
</div>
|
||||
<!-- / MEMBERS -->
|
||||
|
||||
|
|
@ -85,25 +87,31 @@
|
|||
(click)="$event.stopPropagation()"
|
||||
fxLayout="column" fxLayoutAlign="start end">
|
||||
|
||||
<mat-form-field floatLabel="never" (click)="$event.stopPropagation()" fxFlex>
|
||||
<mat-form-field appearance="outline" (click)="$event.stopPropagation()" fxFlex>
|
||||
<mat-label>Checklist title</mat-label>
|
||||
<input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel"
|
||||
name="checklistTitle" placeholder="Checklist title" required>
|
||||
name="checklistTitle" required>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button class="mat-accent" aria-label="Add Checklist"
|
||||
[disabled]="!newChecklistForm.valid">Add Checklist
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
</div>
|
||||
<!-- / CHECKLIST -->
|
||||
|
||||
<!-- SUBSCRIBE -->
|
||||
<div class="subscribe " fxFlex="0 1 auto">
|
||||
<button mat-icon-button class="" [matMenuTriggerFor]="subscribeMenu">
|
||||
<mat-icon>remove_red_eye</mat-icon>
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="subscribeMenu">
|
||||
<mat-icon *ngIf="card.subscribed">visibility</mat-icon>
|
||||
<mat-icon *ngIf="!card.subscribed">visibility_off</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #subscribeMenu="matMenu" [overlapTrigger]="false">
|
||||
<button *ngIf="card.subscribed" mat-menu-item (click)="toggleSubscribe()">
|
||||
Unsubscribe
|
||||
|
|
@ -112,21 +120,26 @@
|
|||
Subscribe
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
</div>
|
||||
<!-- / SUBSCRIBE -->
|
||||
|
||||
<!-- OPTIONS -->
|
||||
<div class="options " fxFlex="0 1 auto">
|
||||
|
||||
<button mat-icon-button class="" [matMenuTriggerFor]="optionsMenu">
|
||||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #optionsMenu="matMenu" [overlapTrigger]="false">
|
||||
<button mat-menu-item (click)="removeCard()">
|
||||
Remove Card
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
</div>
|
||||
<!-- / OPTIONS -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CLOSE DIALOG BUTTON -->
|
||||
|
|
@ -139,51 +152,45 @@
|
|||
|
||||
</mat-toolbar>
|
||||
|
||||
<div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
<div *ngIf="card" mat-dialog-content class="py-24 px-0 m-0" fusePerfectScrollbar>
|
||||
|
||||
<div fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center"
|
||||
fxLayout="column" fxLayoutAlign="center center">
|
||||
<!-- BREADCRUMB -->
|
||||
<div class="card-breadcrumb mt-8 mb-32 px-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
<span>{{board.name}}</span>
|
||||
<mat-icon class="s-20">chevron_right</mat-icon>
|
||||
<span>{{list.name}}</span>
|
||||
</div>
|
||||
<!-- / BREADCRUMB -->
|
||||
|
||||
<!-- BREADCRUMB -->
|
||||
<div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<span>{{board.name}}</span>
|
||||
<mat-icon class="s-20">chevron_right</mat-icon>
|
||||
<span>{{list.name}}</span>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<!-- NAME -->
|
||||
<div class="card-name px-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Title</mat-label>
|
||||
<input matInput [(ngModel)]="card.name" required (change)="updateCard()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- / BREADCRUMB -->
|
||||
<!-- / NAME -->
|
||||
|
||||
<!-- DUE DATE -->
|
||||
<div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<mat-form-field floatLabel="never">
|
||||
<input matInput [matDatepicker]="picker" [(ngModel)]="card.due" placeholder="Choose a due date">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<div *ngIf="card.due" class="due-date px-24 pl-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Due Date</mat-label>
|
||||
<input matInput [matDatepicker]="picker" [(ngModel)]="card.due">
|
||||
<mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-icon-button class="remove-due-date" (click)="removeDueDate()">
|
||||
<mat-icon class="s-16">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- / DUE DATE -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- NAME -->
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</mat-icon>
|
||||
<div class="card-name">
|
||||
<mat-form-field floatLabel="never" class="w-100-p">
|
||||
<input matInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / NAME -->
|
||||
|
||||
<!-- DESCRIPTION -->
|
||||
<div class="description">
|
||||
<mat-form-field class="w-100-p">
|
||||
<textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1"
|
||||
<div class="description px-24 mb-16">
|
||||
<mat-form-field appearance="outline" class="w-100-p">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput [(ngModel)]="card.description" columns="1"
|
||||
mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
|
@ -192,15 +199,17 @@
|
|||
<!-- SECTIONS -->
|
||||
<div class="sections">
|
||||
|
||||
<!-- LABELS SECTION -->
|
||||
<!-- LABELS & MEMBERS SECTION -->
|
||||
<div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
|
||||
fxLayout="column" fxLayout.gt-xs="row">
|
||||
|
||||
<div *ngIf="card.idLabels[0]" fxFlex class="labels">
|
||||
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-20">label</mat-icon>
|
||||
<mat-icon class="mr-8">label</mat-icon>
|
||||
<span class="section-title">Labels</span>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<mat-chip-list class="label-chips">
|
||||
<mat-chip class="label-chip mb-4"
|
||||
|
|
@ -208,76 +217,79 @@
|
|||
[ngClass]="board.labels | getById:labelId:'color'"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<span>{{board.labels|getById:labelId:'name'}}</span>
|
||||
<mat-icon class="ml-8 s-16 chip-remove"
|
||||
(click)="toggleInArray(labelId, card.idLabels);updateCard()">close
|
||||
</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="card.idMembers[0]" fxFlex class="members">
|
||||
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-20">supervisor_account</mat-icon>
|
||||
<mat-icon class="mr-8">supervisor_account</mat-icon>
|
||||
<span class="section-title">Members</span>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<mat-chip-list class="member-chips">
|
||||
<mat-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="member-chips" fxLayout="row" fxLayoutWrap>
|
||||
<div class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
|
||||
[matTooltip]="board.members | getById:memberId:'name'">
|
||||
<mat-icon class="ml-8 s-16 chip-remove"
|
||||
(click)="toggleInArray(memberId, card.idMembers);updateCard()">close
|
||||
</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / LABELS SECTION -->
|
||||
<!-- / LABELS & MEMBERS SECTION -->
|
||||
|
||||
<!-- ATTACHMENTS SECTION -->
|
||||
<div *ngIf="card.attachments[0]" class="section">
|
||||
|
||||
<div class="attachments">
|
||||
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-20">attachment</mat-icon>
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start">
|
||||
<mat-icon class="mr-8">attachment</mat-icon>
|
||||
<span class="section-title">Attachments</span>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
|
||||
<div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
|
||||
<div fxLayout="column" fxLayoutAlign="start" fxLayoutWrap fxLayout.gt-sm="row">
|
||||
|
||||
<div *ngSwitchCase="'image'"
|
||||
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
|
||||
fxLayout="column" fxLayoutAlign="center start">
|
||||
<div class="attachment" fxFlex="33" *ngFor="let item of card.attachments"
|
||||
[ngSwitch]="item.type">
|
||||
|
||||
<div class="attachment-preview mat-elevation-z2"
|
||||
[ngStyle]="{'background-image': 'url('+item.src+')'}">
|
||||
</div>
|
||||
<div fxLayout="column" fxLayoutAlign="start" *ngSwitchCase="'image'">
|
||||
|
||||
<div class="attachment-content" fxLayout="column">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<span class="attachment-name">{{item.name}}</span>
|
||||
<mat-icon *ngIf="card.idAttachmentCover === item.id"
|
||||
class="yellow-700-fg attachment-is-cover s-20">star
|
||||
</mat-icon>
|
||||
<div class="attachment-preview mat-elevation-z1">
|
||||
<img [src]="item.src">
|
||||
</div>
|
||||
|
||||
<span class="attachment-time">{{item.time}}</span>
|
||||
<div class="attachment-content mt-8" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
|
||||
<div>
|
||||
<button mat-raised-button class="attachment-actions-button"
|
||||
<div fxFlex>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<span class="attachment-name">{{item.name}}</span>
|
||||
<mat-icon *ngIf="card.idAttachmentCover === item.id"
|
||||
class="yellow-700-fg attachment-is-cover">
|
||||
star
|
||||
</mat-icon>
|
||||
</div>
|
||||
|
||||
<span class="attachment-time">{{item.time}}</span>
|
||||
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="attachment-actions-button"
|
||||
[matMenuTriggerFor]="attachmentActionsMenu">
|
||||
<span fxLayout="row" fxLayoutAlign="center center">
|
||||
<span>Actions</span>
|
||||
<mat-icon class="s-20">arrow_drop_down</mat-icon>
|
||||
</span>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #attachmentActionsMenu="matMenu">
|
||||
<button mat-menu-item (click)="toggleCoverImage(item.id)">
|
||||
<span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
|
||||
|
|
@ -287,31 +299,34 @@
|
|||
Remove Attachment
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'link'" fxLayout="row">
|
||||
<div class="attachment-preview mat-elevation-z2" fxLayout="column"
|
||||
fxLayoutAlign="center center">
|
||||
<span>LINK</span>
|
||||
</div>
|
||||
<div class="attachment-content" fxLayout="column">
|
||||
<span class="attachment-url">{{item.url}}</span>
|
||||
<span class="attachment-time">{{item.time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'link'" fxLayout="row">
|
||||
<div class="attachment-preview mat-elevation-z2" fxLayout="column"
|
||||
fxLayoutAlign="center center">
|
||||
<span>LINK</span>
|
||||
</div>
|
||||
<div class="attachment-content" fxLayout="column">
|
||||
<span class="attachment-url">{{item.url}}</span>
|
||||
<span class="attachment-time">{{item.time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button mat-button class="add-attachment-button" aria-label="add attachment">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-20">add</mat-icon>
|
||||
<span>Add an attachment</span>
|
||||
</div>
|
||||
<button mat-stroked-button class="add-attachment-button" aria-label="add attachment">
|
||||
Add an attachment
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / ATTACHMENTS SECTION -->
|
||||
|
||||
|
|
@ -322,8 +337,7 @@
|
|||
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<mat-icon class="s-20">check_box</mat-icon>
|
||||
|
||||
<mat-icon class="mr-8">check_box</mat-icon>
|
||||
<span fxFlex class="section-title">{{checklist.name}}</span>
|
||||
|
||||
<div>
|
||||
|
|
@ -352,9 +366,10 @@
|
|||
{{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
|
||||
</span>
|
||||
|
||||
<mat-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
|
||||
<mat-progress-bar color="accent" class="checklist-progressbar" mode="determinate"
|
||||
value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
|
||||
</mat-progress-bar>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="check-items">
|
||||
|
|
@ -363,21 +378,23 @@
|
|||
fxLayoutAlign="space-between center">
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-checkbox [(ngModel)]="checkItem.checked"
|
||||
(change)="updateCheckedCount(checklist)"
|
||||
aria-label="{{checkItem.name}}">
|
||||
</mat-checkbox>
|
||||
<mat-form-field fxFlex class="mx-12">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex>
|
||||
<input matInput [(ngModel)]="checkItem.name">
|
||||
<mat-checkbox matPrefix [(ngModel)]="checkItem.checked"
|
||||
(change)="updateCheckedCount(checklist)"
|
||||
aria-label="{{checkItem.name}}">
|
||||
</mat-checkbox>
|
||||
<button mat-icon-button matSuffix class="checklist-actions-button"
|
||||
(click)="removeChecklistItem(checkItem, checklist)">
|
||||
<mat-icon class="secondary-text">delete</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="checklist-actions-button"
|
||||
(click)="removeChecklistItem(checkItem, checklist)">
|
||||
<mat-icon class="secondary-text s-20">delete</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)"
|
||||
|
|
@ -385,18 +402,18 @@
|
|||
fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
|
||||
<mat-icon class="s-20">add</mat-icon>
|
||||
|
||||
<mat-form-field class="no-errors-spacer mx-12" fxFlex>
|
||||
<input matInput ngModel #checkItem="ngModel" name="checkItem"
|
||||
placeholder="Add an item" autocomplete="off">
|
||||
<mat-form-field appearance="outline" class="no-errors-spacer mr-16" fxFlex>
|
||||
<input matInput ngModel #checkItem="ngModel" name="checkItem" autocomplete="off"
|
||||
placeholder="New checklist item">
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<button mat-raised-button
|
||||
<button mat-mini-fab color="accent"
|
||||
[disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
|
||||
class="mat-accent" aria-label="Add">
|
||||
<span>Add</span>
|
||||
aria-label="Add">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -411,33 +428,37 @@
|
|||
<div class="comments">
|
||||
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-20">comment</mat-icon>
|
||||
<mat-icon class="mr-8">comment</mat-icon>
|
||||
<span class="section-title">Comments</span>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
|
||||
<form name="cardCommentForm"
|
||||
#newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
|
||||
class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
|
||||
|
||||
<div fxLayout="row">
|
||||
<img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
|
||||
<mat-form-field fxFlex>
|
||||
<input matInput name="newComment" ngModel #newComment="ngModel"
|
||||
placeholder="Write a comment.." required>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="end center">
|
||||
<button mat-raised-button class="mat-accent"
|
||||
<img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
|
||||
|
||||
<mat-form-field class="mr-12" appearance="outline" fxFlex>
|
||||
<mat-label>Comment</mat-label>
|
||||
<input matInput name="newComment" ngModel #newComment="ngModel" required>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-mini-fab class="mat-accent"
|
||||
[disabled]="!newCommentForm.valid || newCommentForm.pristine"
|
||||
aria-label="Add">
|
||||
<span>Add</span>
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
|
||||
<div class="comment" fxLayout="row" fxLayoutAlign="start center"
|
||||
*ngFor="let comment of card.comments">
|
||||
|
||||
<img class="comment-member-avatar"
|
||||
[src]="board.members | getById: comment.idMember:'avatar'">
|
||||
|
|
@ -450,8 +471,11 @@
|
|||
<div class="comment-time secondary-text">{{comment.time}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / COMMENTS SECTION -->
|
||||
|
||||
|
|
@ -461,27 +485,45 @@
|
|||
<div class="activities">
|
||||
|
||||
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-20">list</mat-icon>
|
||||
<mat-icon class="mr-8">list</mat-icon>
|
||||
<span class="section-title">Activity</span>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="activity" fxLayout="row" fxLayoutAlign="start center"
|
||||
*ngFor="let activity of card.activities">
|
||||
|
||||
<div class="activity" *ngFor="let activity of card.activities" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
|
||||
<img class="activity-member-avatar"
|
||||
[src]="board.members| getById:activity.idMember:'avatar'">
|
||||
<div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
|
||||
<div class="activity-message">{{activity.message}}</div>
|
||||
<div class="activity-time secondary-text">{{activity.time}}</div>
|
||||
[src]="board.members | getById:activity.idMember:'avatar'">
|
||||
|
||||
<div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div class="activity-member-name">
|
||||
{{board.members | getById:activity.idMember:'name'}}
|
||||
</div>
|
||||
<div class="activity-message">{{activity.message}}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="activity-time mt-4 secondary-text">{{activity.time}}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / ACTIVITIES SECTION -->
|
||||
|
||||
</div>
|
||||
<!-- / SECTIONS -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('xs') {
|
||||
@include media-breakpoint('gt-xs') {
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
.card-breadcrumb {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-subscribe {
|
||||
|
|
@ -71,20 +71,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.due-date {
|
||||
|
||||
.remove-due-date {
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.sections {
|
||||
|
||||
.section {
|
||||
border-bottom: 1px solid;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -99,17 +90,13 @@
|
|||
.section-header {
|
||||
font-size: 16px;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 24px 0 32px 0;
|
||||
padding: 24px 16px 32px 32px;
|
||||
}
|
||||
|
||||
.labels {
|
||||
|
|
@ -143,7 +130,7 @@
|
|||
padding: 0;
|
||||
|
||||
.member-chip {
|
||||
padding: 4px 12px 4px 4px;
|
||||
margin: 4px;
|
||||
|
||||
.member-chip-avatar {
|
||||
width: 32px;
|
||||
|
|
@ -160,23 +147,12 @@
|
|||
.attachments {
|
||||
|
||||
.attachment {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 24px 24px 0;
|
||||
|
||||
.attachment-preview {
|
||||
width: 160px;
|
||||
height: 128px;
|
||||
background-size: contain;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
font-weight: 600;
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('xs') {
|
||||
margin-right: 24px;
|
||||
}
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attachment-content {
|
||||
|
|
@ -190,16 +166,6 @@
|
|||
.attachment-is-cover {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.attachment-actions-button {
|
||||
text-transform: capitalize;
|
||||
margin: 12px 0 0 0;
|
||||
padding-left: 12px;
|
||||
|
||||
mat-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -209,18 +175,13 @@
|
|||
mat-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checklist {
|
||||
|
||||
.checklist-progress {
|
||||
margin-bottom: 16px;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.checklist-progress-value {
|
||||
margin-right: 12px;
|
||||
|
|
@ -242,7 +203,9 @@
|
|||
.check-item {
|
||||
|
||||
mat-checkbox {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
margin: 0 12px 0 3px;
|
||||
|
||||
.mat-label {
|
||||
font-size: 14px;
|
||||
|
|
@ -255,18 +218,51 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-actions-button {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
|
||||
&.mat-form-field-appearance-outline {
|
||||
|
||||
.mat-form-field-outline {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
|
||||
.mat-form-field-infix {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-check-item-form {
|
||||
padding-top: 16px;
|
||||
margin: 32px 0 0 0;
|
||||
|
||||
mat-form-field {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mat-button {
|
||||
margin: 0 0 0 16px;
|
||||
&.mat-form-field-appearance-outline {
|
||||
|
||||
.mat-form-field-outline {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
|
||||
.mat-form-field-infix {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -274,7 +270,7 @@
|
|||
.comments {
|
||||
|
||||
.comment {
|
||||
margin-bottom: 16px;
|
||||
margin: 0 0 24px 0;
|
||||
|
||||
.comment-member-avatar {
|
||||
width: 32px;
|
||||
|
|
@ -294,40 +290,21 @@
|
|||
|
||||
.comment-bubble {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
margin: 4px 0;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: -7px;
|
||||
right: auto;
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
border: 11px solid;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -9px;
|
||||
right: auto;
|
||||
top: -1px;
|
||||
bottom: auto;
|
||||
border: 8px solid;
|
||||
}
|
||||
margin: 6px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.new-comment {
|
||||
margin: 0 0 24px 0;
|
||||
|
||||
mat-form-field {
|
||||
margin: 0;
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -336,11 +313,11 @@
|
|||
.activities {
|
||||
|
||||
.activity {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.activity-member-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
|
@ -348,12 +325,14 @@
|
|||
.activity-member-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.activity-message {
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,9 @@
|
|||
<div fxFlex fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div class="label" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row"
|
||||
fxFlexAlign="space-between center"
|
||||
[ngClass]="label.color">
|
||||
fxLayoutAlign="space-between center">
|
||||
|
||||
<div class="label-color" [ngClass]="label.color"></div>
|
||||
|
||||
<mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center"
|
||||
[checked]="card.idLabels.indexOf(label.id) > -1"
|
||||
|
|
@ -25,8 +26,11 @@
|
|||
<button mat-icon-button>
|
||||
<mat-icon class="s-16" (click)="labelsMenuView ='edit';selectedLabel = label">mode_edit</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="view edit" *ngSwitchCase="'edit'" fxFlex fxLayout="column">
|
||||
|
|
@ -70,6 +74,9 @@
|
|||
</div>
|
||||
|
||||
<button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">ADD NEW LABEL</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,14 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
margin: 0 8px 8px 8px;
|
||||
padding: 4px 4px 4px 16px;
|
||||
margin: 0 8px 8px 16px;
|
||||
|
||||
.label-color {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.edit,
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user