diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts index 9bc1512..63e9b91 100644 --- a/src/app/pages/customization/Color.component.ts +++ b/src/app/pages/customization/Color.component.ts @@ -8,14 +8,23 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
-
{{label}}
-
Contrast ratio may be too low.
- ` +
Contrast ratio may be too low.
+ `, + styles:[ + ` + .color-input{ + width:15px; + height:8px; + border-radius:3px; + border:0.10000000149011612px solid #707070; + }` + ] }) export class ColorComponent implements OnInit { diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts index 3b7fda8..a17bb3e 100644 --- a/src/app/pages/customization/background-upload.component.ts +++ b/src/app/pages/customization/background-upload.component.ts @@ -46,7 +46,7 @@ declare var UIkit;
-
Image position
+
Image position
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html index 56be2d1..c33c6fc 100644 --- a/src/app/pages/customization/customization.component.html +++ b/src/app/pages/customization/customization.component.html @@ -1,99 +1,112 @@ - + - - -
+ + +
+
+ +
+
+
+ +
Customization + (Unsaved changes)
- -
Customization (Unsaved changes)
-
-
-
- - -
-
-
-
-
Quick look - + +
+ +
Identity + +
- - +
+ + +
+
+ Custom style + + +
+
+
+
+ Colors + +
+ + +
+ +
+
Background + +
-
- -
Backgrounds & Buttons - -
+
+
Custom style - - - + + +
-
Backgrounds and buttons are set in the default values. -
+
--> -
-
Backgrounds
-
Colors
+
+ +
Colors + + +
-
Form background image
+
+ Image + + +
-
Buttons
- -
    -
  • - -
    • -
  • - -
    • -
+ [oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"> +
- - +
Buttons + + +
+
+ + + +
    +
  • + +
    • +
  • + +
    • +
+
- - -
-
- -
-
-
Quick look -
-
- -
+
+
+
+ + +
-
- -
Identity -
- -
-
- Custom style - - +
+
+ + +
+
+
Backgrounds
+
Note: Custom background style settings will override any identity settings that effect the visualisation of a background.
+ + +
Quick look + +
+ +
-
- Identity is set in the default values. + +
+
+
+
Buttons
+
Note: Custom background style settings will override any identity settings that effect the visualisation of a background.
+ +
Quick look + +
+ +
+
- -
- - -
-
- -
-
Preview
-
-
-
-
-
- + +
+
+ +
Identity
+
Note: Custom identity style settings will effect the visualisation of the whole gateway. That + includes buttons, links, tabs, backgrounds, etc.
+ + + +
+
+ +
+
See a preview
+
+
+
+
+
+
+
+ +
+
Style has been changed.
+
Click to refresh the view.
+
+
+
+ +
-
Style has been changed.
-
Click to refresh the view.
- - +
- +
-
-
-
-
+ diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts index 9d6dcee..2d15145 100644 --- a/src/app/pages/customization/customization.component.ts +++ b/src/app/pages/customization/customization.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, OnInit} from '@angular/core'; +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; @@ -12,6 +12,7 @@ import {LayoutService} from '../../openaireLibrary/services/layout.service'; import {properties} from '../../../environments/environment'; import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; import {Subscription} from 'rxjs'; +import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component"; declare var UIkit; @@ -19,6 +20,12 @@ declare var UIkit; selector: 'customization', templateUrl: './customization.component.html', styles:[` + + .functionalities-panel{ + border-left: 1px solid #EAEAEA; + padding: 5px 10px; + margin: 25px 0px; + } .refresh-indicator { background-color: rgba(0, 0, 0, 0.50); border-radius: 4px; @@ -26,14 +33,25 @@ declare var UIkit; color: white; } iframe, .refresh-indicator{ - height:900px; + height:100% } + #ipadcontainer{ + background-image: url('/assets/iPad Pro.svg'); + background-size: contain; + background-repeat: no-repeat; + height: 900px; + + } + #iframecontainer{ + height: 64%; + width: 73%; + } `] }) export class CustomizationComponent implements OnInit { - menuSelected = 'identity'; + menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home'; color = 'white'; defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions(); publishedLayout: Layout = null; @@ -42,17 +60,12 @@ export class CustomizationComponent implements OnInit { appliedCustomizationOptions: CustomizationOptions = null; previewUrl = null; previewCustomization = null; - - public showLoading = true; - - public communityId = null; - public properties: EnvProperties = null; private subscriptions: any[] = []; - public enabled = true; + // @ViewChild('fsModal', { static: true }) fullscreen: FullScreenModalComponent; constructor(private element: ElementRef, private route: ActivatedRoute, @@ -75,6 +88,13 @@ export class CustomizationComponent implements OnInit { }); } ngOnInit() { +/* console.log(" open") + + this.fullscreen.title = "Search and Add Projects"; + this.fullscreen.okButtonText = "Done"; + this.fullscreen.okButton = true; + this.fullscreen.open(); + console.log(this.fullscreen)*/ this.properties = properties; if (!Session.isLoggedIn()) { this._router.navigate(['/user-info'], { @@ -232,5 +252,11 @@ export class CustomizationComponent implements OnInit { copyObject(obj) { return JSON.parse(JSON.stringify(obj)); } - + + changeMenu( menuSelected: 'home' | 'identity' | 'backgrounds' | 'buttons' = 'home'){ + this.menuSelected = (this.menuSelected == menuSelected)?'home':menuSelected; + } + close(){ + this._router.navigate(["../info/profile"], {relativeTo:this.route}); + } } diff --git a/src/app/pages/customization/customization.module.ts b/src/app/pages/customization/customization.module.ts index 0f5efea..317fbee 100644 --- a/src/app/pages/customization/customization.module.ts +++ b/src/app/pages/customization/customization.module.ts @@ -26,10 +26,11 @@ import {refresh, reset} from '../../openaireLibrary/utils/icons/icons'; import {BackgroundComponent} from './background.component'; import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module'; import {BackgroundUploadComponent} from "./background-upload.component"; +import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module"; @NgModule({ imports: [ - CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule + CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule, FullScreenModalModule ], declarations: [ CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent diff --git a/src/app/pages/customization/quickLook-backgrounds.component.ts b/src/app/pages/customization/quickLook-backgrounds.component.ts index 8690b30..9393508 100644 --- a/src/app/pages/customization/quickLook-backgrounds.component.ts +++ b/src/app/pages/customization/quickLook-backgrounds.component.ts @@ -6,60 +6,52 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust @Component({ selector: 'quick-look-backgrounds', template: ` - -
Dark background
- -
-
-

Heading

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.
- Link +
+
+
Dark background
+ +
+
+

Heading

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.
+ Link +
+
-
- -
Light background
-
-
+
+ +
Light background
+
+

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.
Link
-
+ +
+
`, styles:[` .darkBackground{ background-color: var(--background-dark-color); + border-radius: 6px; } .lightBackground{ background-color: var(--background-low-color); + border-radius: 6px; } - .searchForm { - background: var(--svgURL) transparent no-repeat center bottom; - - background-size: auto; - background-size: cover !important; - height: inherit; - } `] }) @@ -72,6 +64,7 @@ export class QuickLookBackgroundsComponent { @Input() formBackgroundColor; @Input() buttonsOnDark:ButtonsCustomization; @Input() buttonsOnLight:ButtonsCustomization; + @Input() buttonView: boolean = false; constructor( private sanitizer: DomSanitizer) { }