From 9044a06cbaf354eb7bc31c32ec62f3a0e1a4c829 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 21 Jul 2022 15:01:31 +0300 Subject: [PATCH] Add method buildCss in server.ts for customization. Fix invite and subscribe buttons. --- angular.json | 14 +- package.json | 5 +- server.ts | 95 ++++- src/app/openaireLibrary | 2 +- .../subscribe/invite/invite.component.html | 10 +- .../utils/subscribe/subscribe.component.ts | 43 +-- src/assets/community.less | 46 +++ src/assets/connect-custom.less | 352 ------------------ src/assets/connect.less | 33 ++ src/assets/openaire-theme | 2 +- src/deprecated.css | 7 - src/styles.less | 8 +- 12 files changed, 212 insertions(+), 405 deletions(-) create mode 100644 src/assets/community.less delete mode 100644 src/assets/connect-custom.less create mode 100644 src/assets/connect.less delete mode 100644 src/deprecated.css diff --git a/angular.json b/angular.json index 914993f..37160c2 100644 --- a/angular.json +++ b/angular.json @@ -46,7 +46,6 @@ ], "styles": [ "src/styles.less", - "src/deprecated.css", "src/assets/common-assets/library-css/material.scss" ], "scripts": [ @@ -65,6 +64,9 @@ "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, + "styles": [ + "src/assets/common-assets/library-css/material.scss" + ], "budgets": [ { "type": "initial", @@ -96,6 +98,9 @@ "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, + "styles": [ + "src/assets/common-assets/library-css/material.scss" + ], "budgets": [ { "type": "initial", @@ -127,6 +132,9 @@ "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, + "styles": [ + "src/assets/common-assets/library-css/material.scss" + ], "budgets": [ { "type": "initial", @@ -191,13 +199,13 @@ "options": { "outputPath": "dist/connect/server", "main": "server.ts", - "tsConfig": "src/tsconfig.server.json" + "tsConfig": "src/tsconfig.server.json", }, "configurations": { "development": { "outputHashing": "media", "sourceMap": false, - "optimization": true + "optimization": true, }, "beta": { "outputHashing": "media", diff --git a/package.json b/package.json index 064ee1c..2e7e44a 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,9 @@ "@angular/platform-server": "~11.2.14", "@angular/router": "~11.2.14", "@nguniversal/express-engine": "^11.2.1", + "@node-minify/clean-css": "^6.2.0", + "@node-minify/core": "^6.2.0", + "axios": "^0.27.2", "clipboard": "^1.5.16", "core-js": "^2.5.4", "express": "^4.15.2", @@ -43,7 +46,7 @@ "rxjs": "^6.5.1", "ts-md5": "^1.2.0", "tslib": "^2.0.0", - "uikit": "^3.12.0", + "uikit": "3.12.0", "zone.js": "~0.10.2" }, "devDependencies": { diff --git a/server.ts b/server.ts index a745ceb..ab6c9b4 100644 --- a/server.ts +++ b/server.ts @@ -10,6 +10,67 @@ import {APP_BASE_HREF} from '@angular/common'; import {existsSync} from 'fs'; import {REQUEST, RESPONSE} from "./src/app/openaireLibrary/utils/tokens"; import {isArray} from "util"; +import {properties} from "./src/environments/environment"; +import {Layout} from "./src/app/openaireLibrary/connect/community/CustomizationOptions"; + +const fs = require('fs'); +const less = require('less'); +const minify = require('@node-minify/core'); +const cleanCSS = require('@node-minify/clean-css'); +const axios = require('axios'); + +const browser = process.cwd() + '/dist/connect/browser/'; +const node_modules = process.cwd() + '/node_modules'; + +function buildCss(portal: string, variables: {} = null) { + let lessFile = 'community.less' + if(portal === 'connect') { + lessFile = 'connect.less' + } + let input = fs.readFileSync(browser + '/assets/' + lessFile, 'utf8'); + /* Change fonts path */ + let modifyVars = { + '@font-media-url': 'e("assets/openaire-theme/media/fonts/aileron/")', + '@font-media-icon-url': 'e("assets/openaire-theme/media/fonts/material-icons/")' + } + /* Change variables (optional)*/ + if(variables) { + Object.entries(variables).forEach(([key, value]) => { + modifyVars[key] = value; + }); + } + let options = { + paths: [browser + '/assets/', node_modules], + rewriteUrls: 'all', + modifyVars: modifyVars + }; + less.render(input, options, function (error, result) { + if(error) { + console.log(error); + } else { + fs.writeFile(browser + portal + '.css', result.css, function (error) { + if(error) { + console.error(error); + } else { + minify({ + compressor: cleanCSS, + replaceInPlace: true, + input: browser + portal + '.css', + output: browser + portal + '.css', + callback: function(err) { + if(err) { + console.log(err); + } + } + }); + } + }); + } + }); +} + +buildCss('connect'); +buildCss('default'); // The Express app is exported so that it can be used by serverless Functions. export function app() { @@ -70,7 +131,6 @@ export function app() { let communityLinks = ["/search/advanced/*", "/participate/*", "/search/project", '/search/result', '/search/publication', '/search/dataset', '/search/software', '/search/other', '/search/dataprovider', '/search/organization', '/project-report', '/search/find/publications', '/search/find/datasets', '/search/find/software', '/search/find/other', '/search/find/projects', '/search/find/dataproviders', '/search/find/research-outcomes' - ]; robots = "User-Agent: *\n" + "Crawl-delay: 30\n" + @@ -86,6 +146,39 @@ export function app() { res.send(robots); }); + server.post('/build-css/all', (req, res) => { + let layoutsURL = properties.adminToolsAPIURL + '/community/layouts'; + axios.get(layoutsURL).then(response => { + if(response.data && Array.isArray(response.data) && response.data.length > 0) { + response.data.forEach((layout: Layout) => { + let variables = Layout.getVariables(layout); + if(variables) { + buildCss(layout.portalPid, variables); + } + }); + res.send('CSS build for all available layouts was successful'); + } else { + res.send('No available layouts found'); + } + }); + }); + + server.post('/build-css/:id', (req, res) => { + let layoutURL = properties.adminToolsAPIURL + '/community/' + req.params.id + '/layout'; + axios.get(layoutURL).then(response => { + if(response.data) { + let variables = Layout.getVariables(response.data); + if(variables) { + buildCss(response.data.portalPid, variables); + } + res.send('CSS build for ' + response.data.portalPid + 'layouts was successful'); + } else { + res.send('No layout found'); + } + }).catch(function (error) { + res.send('No layout found'); + }); + }); // Example Express Rest API endpoints // server.get('/api/**', (req, res) => { }); // Serve static files from /browser diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index 2c289af..8e09a2c 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 2c289af1e633b9c4bc242bd256d66c287155d8ed +Subproject commit 8e09a2c68de2f248fd38f370a067073280f30165 diff --git a/src/app/utils/subscribe/invite/invite.component.html b/src/app/utils/subscribe/invite/invite.component.html index 76ccc9d..08e5c6f 100644 --- a/src/app/utils/subscribe/invite/invite.component.html +++ b/src/app/utils/subscribe/invite/invite.component.html @@ -30,12 +30,8 @@
- - + + + Invite users
diff --git a/src/app/utils/subscribe/subscribe.component.ts b/src/app/utils/subscribe/subscribe.component.ts index b69a285..43ea5b7 100644 --- a/src/app/utils/subscribe/subscribe.component.ts +++ b/src/app/utils/subscribe/subscribe.component.ts @@ -15,8 +15,7 @@ import {Subscriber, Subscription} from "rxjs"; import {properties} from "../../../environments/environment"; import {UserRegistryService} from "../../openaireLibrary/services/user-registry.service"; import {SubscribeService} from "../../openaireLibrary/utils/subscribe/subscribe.service"; - -declare var UIkit: any; +import {NotificationHandler} from "../../openaireLibrary/utils/notification-handler"; @Component({ selector: 'subscribe', @@ -26,27 +25,23 @@ declare var UIkit: any;

Please login first to join

- - - - Members: {{members}} + Members: {{members}} @@ -113,11 +108,11 @@ export class SubscribeComponent { this.subscribeService.setLoading(false); } - private isSubscribed() { + public isSubscribed() { this.subscribed = Session.isSubscribedTo('community', this.communityId, this.user); } - private get isManager() { + public get isManager() { return Session.isManager('community', this.communityId, this.user); } @@ -196,12 +191,7 @@ export class SubscribeComponent { this.successfulSubscribe(); }, error => { this.subscribeService.setLoading(false); - UIkit.notification({ - message: 'An error occurred. Please try again!', - status: 'warning', - timeout: 3000, - pos: 'top-center' - }); + NotificationHandler.rise('>An error occurred. Please try again!', 'danger'); //console.log(error) this.handleError("Error subscribing email: " + this.user.email + " from community with id: " + this.communityId, error); })); @@ -221,12 +211,7 @@ export class SubscribeComponent { this.subscribed = false; }, error => { this.subscribeService.setLoading(false); - UIkit.notification({ - message: 'An error occurred. Please try again!', - status: 'warning', - timeout: 3000, - pos: 'top-center' - }); + NotificationHandler.rise('>An error occurred. Please try again!', 'danger'); //console.log(error) this.handleError("Error unsubscribing email: " + email + " from community with id: " + this.communityId, error); })); diff --git a/src/assets/community.less b/src/assets/community.less new file mode 100644 index 0000000..a008006 --- /dev/null +++ b/src/assets/community.less @@ -0,0 +1,46 @@ +@import "openaire-theme/less/_import"; +@import "common-assets/less/general"; +@import "common-assets/less/user"; +@import "common-assets/less/landing"; +@import "common-assets/less/linking"; + +#joinAndInviteBtn { + position: fixed; + right: 0; + z-index: @global-z-index - 18; + display: block; + top: calc(40% - 60px); +} + +#joinAndInviteBtn #join, +#joinAndInviteBtn #member, +#joinAndInviteBtn #invite { + width: 140px; + line-height: 60px; + padding: 0 20px; + text-transform: none; + font-size: @global-xsmall-font-size; + border: none; + box-shadow: @global-default-shadow; + border-radius: @global-border-radius 0 0 @global-border-radius; + + &:hover { + box-shadow: @global-small-box-shadow; + } +} + +#joinAndInviteBtn #join { + background-image: linear-gradient(290deg, @success-border-color 0%, @success-color 100%); + color: @global-inverse-color; +} + +#joinAndInviteBtn #member { + color: @success-color; +} + +#joinAndInviteBtn #invite:extend(.uk-button-primary) { + &:hover { + background-color: @button-primary-background; + color: @button-primary-color; + } +} diff --git a/src/assets/connect-custom.less b/src/assets/connect-custom.less deleted file mode 100644 index 776fa24..0000000 --- a/src/assets/connect-custom.less +++ /dev/null @@ -1,352 +0,0 @@ -/* -Define variables for connect -Custom connect css -*/ -.connectApp { - /* Import OpenAIRE theme*/ - @import (multiple) "~src/assets/openaire-theme/less/_import"; - - /** Global */ - @global-primary-gradient: linear-gradient(110deg, @connect-light-color 0%, @connect-dark-color 100%); - - /** Background*/ - @background-primary-background: @connect-color; - @background-primary-background-gradient: none; - - /** Buttons */ - @button-primary-background: @connect-color; - @button-primary-color: @global-color; - @button-secondary-border: @global-color; - @button-secondary-color: @global-color; - @button-secondary-hover-background: @global-secondary-background; - @button-secondary-hover-background-gradient: none; - @button-secondary-active-background: @global-secondary-background; - @button-secondary-active-background-gradient: none; - - /** Label */ - @label-secondary-color: @connect-color; - @label-secondary-border: @connect-color; - - /** Text */ - @text-primary-color: @connect-color; - @text-background-color: @connect-color; - @text-secondary-color: @primary-color; - @inverse-text-primary-color: @connect-color; -} - -.communityApp { - /* Import OpenAIRE theme*/ - @import (multiple) "~src/assets/openaire-theme/less/_import"; - - #joinAndInviteBtn { - float: left; - position: fixed; - right: 0; - z-index: 982; - display: block; - top: calc(40% - 60px); - } - - #joinAndInviteBtn #join, - #joinAndInviteBtn #invite { - width: 140px; - height: 60px; - border-right: none; - border-width: 0; - border-radius: 6px 0 0 6px; - } - - #joinAndInviteBtn #invite { - color: @global-inverse-color !important; - } - - #joinAndInviteBtn #join { - background-image: linear-gradient(290deg, @success-border-color 0%, @success-color 100%); - color: @global-inverse-color !important; - } - - #joinAndInviteBtn .member-button { - background: @global-inverse-color !important; - } -} - -/*.whiteBackground { - background-color: #fff; -}*/ - -/*.homeBackgroundImage { - background-image: url(~src/assets/connect-assets/home/connect_long_image.png); -}*/ - -/*.community-logo img { - max-height: 76px; -}*/ - - -/*OLD css*/ - -/*:root {*/ -/* --portal-main-color: #FECA1D;*/ -/* !* --portal-main-contrast: #2E2E2E; *!*/ -/* --portal-main-contrast: white;*/ -/* !*--portal-dark-color: #b48536;*!*/ -/* --portal-dark-color: #FFC400;*/ -/* --openaire-main-color: #313179;*/ - -/* --explore-portal-color: #D95F2D;*/ -/* --provide-portal-color: #37C7E9;*/ -/* --monitor-portal-color: #9ABB55;*/ -/* --connect-portal-color: #FECA1D;*/ -/* !*--connect-portal-color: #EBB13E;*!*/ -/* --develop-portal-color: #DA65AB;*/ - -/* --explore-portal-lower-tone: #a0462c;*/ -/* --provide-portal-lower-tone: #3A8FA3;*/ -/* --monitor-portal-lower-tone: #7c9144;*/ -/* --connect-portal-lower-tone: #b48536;*/ -/* --develop-portal-lower-tone: #9f4e7e;*/ - -/* --community_main_color: #4C9CD5;*/ -/* --community_main_color_rgb: 76, 156, 213;*/ -/* --community_secondary_color: #24857F;*/ -/* --community_main_dark_color: #2276B9;*/ -/* --background-light-color: #F7FCFF;*/ -/*}*/ - - -/*.tm-toolbar .uk-subnav-line .custom-connect-li, .connect-background {*/ -/* background: var(--portal-main-color) !important;*/ -/*}*/ - -/*.banner-background {*/ -/* background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(160, 193, 242, 1) 100%);*/ -/*}*/ - -/*.connectInfoCard {*/ -/* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.24);*/ -/*}*/ - -/*.connectCheckIcon {*/ -/* background: rgba(0, 0, 0, 0.60);*/ -/* color: white;*/ -/*}*/ - -/*.searchForm, .communitiesSearchForm {*/ -/* background: transparent linear-gradient(0deg, #FAFAFA 0%, #E2EEFA 100%);*/ -/*}*/ - -/*.communityToolBar {*/ -/* background-color: #dedede;*/ -/* z-index: 10;*/ -/*}*/ - -/*!*.my-tooltip {*/ -/* opacity: 0;*/ -/*}*!*/ - -/*.communityToolBarSection {*/ -/* z-index: 10;*/ -/*}*/ - -/*div:not(.connect_App) bottom .uk-totop {*/ -/* background-color: transparent !important;*/ -/*}*/ - -/*.communityPanelBackground .curator-photo {*/ -/* border: rgba(255, 255, 255, 0.5) 8px solid;*/ -/*}*/ - -/*.communityRecentResults .search-results > li:nth-child(2) {*/ -/* border-top: none !important;*/ -/*}*/ - -/*.communityRecentResults .search-results > li:last-child {*/ -/* border-bottom: none !important;*/ - -/*}*/ - -/*.communityPanelBackground .uk-breadcrumb .active {*/ -/* color: white;*/ -/*}*/ - -/*.uk-breadcrumb .active {*/ -/* font-weight: bold;*/ -/*}*/ - -/*.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {*/ -/* border-radius: 20px;*/ -/* padding: 10px 20px;*/ -/*}*/ - - -/*.communityPanelBackground .uk-grid-divider > :not(.uk-first-column)::before {*/ -/* border-left: 1px solid rgba(255, 255, 255, .2);*/ -/*}*/ - - -/*!*CONNECT REDESIGN*!*/ - - - -/*.uk-tooltip.community-page-tooltip {*/ -/* background-color: white;*/ -/* display: block;*/ -/* border-radius: 4px;*/ -/* padding: 15px 15px 0;*/ -/* border: 1px solid #DEDEDE;*/ -/* color: #6c6c6c;*/ -/* z-index: 10000;*/ -/*}*/ - -/*.user-circle-background {*/ -/* background-color: var(--portal-main-color);*/ -/* border-radius: 50%;*/ -/* height: 10px;*/ -/* width: 10px;*/ -/* display: inline-flex;*/ -/* padding: 2px;*/ -/* fill: white;*/ -/*}*/ - -/*a:hover .user-circle-background {*/ -/* background-color: var(--portal-dark-color);*/ -/*}*/ - -/*.communityApp .custom-main-content {*/ -/* background-color: var(--background-light-color);*/ -/* !*background-color: lightpink;*!*/ -/* color: #000000 !important;*/ -/* font-size: 14px !important;*/ -/* min-height: 60vh;*/ -/*}*/ - -/*.coloredBackground, .coloredBackground:focus, .coloredBackground:hover {*/ -/* background-color: transparent;*/ -/*}*/ - -/*.generalSearchForm .subtitle{*/ -/* color: #000000 !important;*/ -/* opacity: 0.6;*/ -/*}*/ - -/*.generalSearchForm .title{*/ -/* color: #000000 !important;*/ -/* font-size: 28px;*/ -/* font-weight: 400;*/ -/* font-family: 'Open Sans', sans-serif !important;*/ -/*}*/ - -/*.publicationAnalytics.uk-icon-button:hover, .publicationAnalytics.uk-icon-button.active {*/ -/* background: #FFE6E6;*/ -/*}*/ -/*.publicationAnalytics.uk-icon-button {*/ -/* border-color: #F17AA9 !important;*/ -/*}*/ - -/*.datasetAnalytics.uk-icon-button:hover, .datasetAnalytics.uk-icon-button.active {*/ -/* background: #E2DAF0;*/ -/*}*/ -/*.datasetAnalytics.uk-icon-button {*/ -/* border-color: #A98BD4 !important;*/ -/*}*/ - -/*.softwareAnalytics.uk-icon-button:hover, .softwareAnalytics.uk-icon-button.active {*/ -/* background: #D4ECD6;*/ -/*}*/ -/*.softwareAnalytics.uk-icon-button {*/ -/* border-color: #639C66 !important;*/ -/*}*/ - -/*.otherAnalytics.uk-icon-button:hover, .otherAnalytics.uk-icon-button.active {*/ -/* background: #C5E0E9;*/ -/*}*/ -/*.otherAnalytics.uk-icon-button {*/ -/* border-color: #708AA5 !important;*/ -/*}*/ -/*!*END OF CONNECT REDESIGN*!*/ - -/*.communityApp .uk-logo{*/ -/* padding-left: 20px;*/ - -/*}*/ - -/*.connectApp .login text {*/ -/* stroke: black;*/ -/* fill: black;*/ -/*}*/ - -/*.connectApp {*/ -/* font-size: 16px;*/ -/*}*/ - -/*.connectApp .text-small {*/ -/* font-size: 14px;*/ -/*}*/ - -/*.connectApp, .connectApp h1, .connectApp h2, .connectApp h3,*/ -/*.connectApp h4, .connectApp h5, .connectApp h6, .connectApp .uk-card, .connectApp .color {*/ -/* color: #1A1A1A;*/ -/*}*/ - -/*.connectApp .portal-button {*/ -/* color: #1A1A1A !important;*/ -/* font-weight: 700;*/ -/*}*/ - -/*.connectApp .uk-pagination > * > *, .connectApp .uk-pagination > * > *:hover {*/ -/* color: #1a1a1a !important;*/ -/*}*/ - -/*.connectApp .uk-grid-divider>:not(.uk-first-column)::before {*/ -/* border-left: 1px solid #DEDEDE;*/ -/*}*/ - -/*.contactUsBackground {*/ -/* background: transparent linear-gradient(0deg, #FFFFFF 0%, #DCEDF5 0%, #FAFAFA 100%);*/ -/*}*/ - -/*.uk-card.disabled {*/ -/* box-shadow: none;*/ -/* cursor: not-allowed;*/ -/*}*/ - -/*.custom-list {*/ -/* list-style: none;*/ -/* padding-left: 15px;*/ -/* margin: 10px 0;*/ -/*}*/ - -/*.custom-list li {*/ -/* -webkit-column-break-inside: avoid;*/ -/* page-break-inside: avoid;*/ -/* break-inside: avoid;*/ -/* margin-bottom: 4px;*/ -/*}*/ - -/*.connect-image {*/ -/* max-height:100%;*/ -/* border-radius: 0 4px 4px 0;*/ -/*}*/ - -/*.border-top {*/ -/* border-top: 1px solid rgba(0,0,0,0.09);*/ -/*}*/ - -/*!* Custom styles for enermap homepage links *!*/ -/*.icon-wrapper {*/ -/* width: 100px;*/ -/* height: 100px;*/ -/* border-radius: 100%;*/ -/* box-shadow: 15px 15px 25px #0000001A;*/ -/*}*/ -/*.icon-wrapper img {*/ -/* height: 38px;*/ -/* width: auto;*/ -/* margin: auto;*/ -/*}*/ -/*.custom-text {*/ -/* font-size: 14px !important;*/ -/*}*/ -/*.uk-text-bolder {*/ -/* font-weight: 600 !important;*/ -/*}*/ diff --git a/src/assets/connect.less b/src/assets/connect.less new file mode 100644 index 0000000..9587453 --- /dev/null +++ b/src/assets/connect.less @@ -0,0 +1,33 @@ +@import "openaire-theme/less/_import"; +@import "common-assets/less/general"; +@import "common-assets/less/user"; + +/** Global */ +@global-primary-gradient: linear-gradient(110deg, @connect-light-color 0%, @connect-dark-color 100%); + +/** Background*/ +@background-primary-background: @connect-color; +@background-primary-background-gradient: none; + +/** Buttons */ +@button-primary-background: @connect-color; +@button-primary-color: @global-color; +@button-secondary-border: @global-color; +@button-secondary-color: @global-color; +@button-secondary-hover-background: @global-secondary-background; +@button-secondary-hover-background-gradient: none; +@button-secondary-active-background: @global-secondary-background; +@button-secondary-active-background-gradient: none; + +/** Label */ +@label-secondary-color: @connect-color; +@label-secondary-border: @connect-color; + +/** Text */ +@text-primary-color: @connect-color; +@text-background-color: @connect-color; +@text-secondary-color: @primary-color; +@inverse-text-primary-color: @connect-color; + +/* General */ +@general-search-form-background: fade(@global-secondary-background, 20%); diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme index 84d1673..a058794 160000 --- a/src/assets/openaire-theme +++ b/src/assets/openaire-theme @@ -1 +1 @@ -Subproject commit 84d1673acc7f9368d219670c0c170d305b84ef7a +Subproject commit a05879462df531d670cd521f1834ccdc76e11ae0 diff --git a/src/deprecated.css b/src/deprecated.css deleted file mode 100644 index 7173c8b..0000000 --- a/src/deprecated.css +++ /dev/null @@ -1,7 +0,0 @@ -@import "assets/openaire-theme/css/structure/variables.css"; -@import "assets/common-assets/library.css"; - -.connectApp { - /* Search */ - --search-form-background: rgba(var(--secondary-color-rgb), 0.2); -} diff --git a/src/styles.less b/src/styles.less index 0326d04..5ee1d54 100644 --- a/src/styles.less +++ b/src/styles.less @@ -1,3 +1,5 @@ -/* You can add global styles to this file, and also import other style files */ -@import "~src/assets/openaire-theme/less/_import"; -@import "assets/connect-custom"; +/* Import connect */ +//@import "assets/connect"; + +/* Import Community */ +@import "assets/community";