Skip to content

Commit

Permalink
feat: Add Page Applications Default Style - MEED-7130 - Meeds-io/MIPs…
Browse files Browse the repository at this point in the history 
…#144 (#141)
  • Loading branch information
@boubaker @SaraBoutej
boubaker authored and SaraBoutej committed Aug 29, 2024
1 parent 878251c commit d6d77e8
Show file tree
Hide file tree
Showing 15 changed files with 372 additions and 161 deletions.
136 changes: 98 additions & 38 deletions layout-service/src/main/java/io/meeds/layout/rest/model/LayoutModel.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
import com.fasterxml.jackson.annotation.JsonProperty.Access;

import org.exoplatform.portal.config.model.Application;
import org.exoplatform.portal.config.model.ApplicationBackgroundStyle;
import org.exoplatform.portal.config.model.ApplicationState;
import org.exoplatform.portal.config.model.ApplicationType;
import org.exoplatform.portal.config.model.CloneApplicationState;
Expand Down Expand Up @@ -87,6 +88,14 @@ public class LayoutModel {

private String boxShadow;

private Integer radiusTopRight;

private Integer radiusTopLeft;

private Integer radiusBottomRight;

private Integer radiusBottomLeft;

private String backgroundColor;

private String backgroundImage;
Expand All @@ -99,6 +108,18 @@ public class LayoutModel {

private String backgroundRepeat;

private String appBackgroundColor;

private String appBackgroundImage;

private String appBackgroundEffect;

private String appBackgroundPosition;

private String appBackgroundSize;

private String appBackgroundRepeat;

private String textTitleColor;

private String textTitleFontSize;
Expand Down Expand Up @@ -181,6 +202,10 @@ private void init(ModelObject model) { // NOSONAR
this.borderColor = cssStyle.getBorderColor();
this.borderSize = cssStyle.getBorderSize();
this.boxShadow = cssStyle.getBoxShadow();
this.radiusTopRight = cssStyle.getRadiusTopRight();
this.radiusTopLeft = cssStyle.getRadiusTopLeft();
this.radiusBottomRight = cssStyle.getRadiusBottomRight();
this.radiusBottomLeft = cssStyle.getRadiusBottomLeft();
this.backgroundColor = cssStyle.getBackgroundColor();
this.backgroundImage = cssStyle.getBackgroundImage();
this.backgroundEffect = cssStyle.getBackgroundEffect();
Expand Down Expand Up @@ -224,6 +249,15 @@ private void init(ModelObject model) { // NOSONAR
this.moveContainersPermissions = container.getMoveContainersPermissions();
this.children = container.getChildren().stream().map(LayoutModel::new).toList();

ApplicationBackgroundStyle appCssStyle = container.getAppBackgroundStyle();
if (appCssStyle != null) {
this.appBackgroundColor = appCssStyle.getBackgroundColor();
this.appBackgroundImage = appCssStyle.getBackgroundImage();
this.appBackgroundEffect = appCssStyle.getBackgroundEffect();
this.appBackgroundPosition = appCssStyle.getBackgroundPosition();
this.appBackgroundSize = appCssStyle.getBackgroundSize();
this.appBackgroundRepeat = appCssStyle.getBackgroundRepeat();
}
if (model instanceof Page page) {
this.editPermission = page.getEditPermission();
this.pageKey = page.getPageKey();
Expand Down Expand Up @@ -278,44 +312,7 @@ public Page toPage() {
}

public static ModelObject toModelObject(LayoutModel layoutModel) { // NOSONAR
ModelStyle cssStyle = null;
boolean hasStyle = StringUtils.isNotBlank(layoutModel.getBorderColor())
|| StringUtils.isNotBlank(layoutModel.getBorderSize())
|| StringUtils.isNotBlank(layoutModel.getBoxShadow())
|| StringUtils.isNotBlank(layoutModel.getBackgroundColor())
|| StringUtils.isNotBlank(layoutModel.getBackgroundImage())
|| StringUtils.isNotBlank(layoutModel.getTextTitleColor())
|| StringUtils.isNotBlank(layoutModel.getTextColor())
|| StringUtils.isNotBlank(layoutModel.getTextHeaderColor())
|| StringUtils.isNotBlank(layoutModel.getTextSubtitleColor());
if (hasStyle) {
cssStyle = new ModelStyle();
cssStyle.setBorderColor(layoutModel.getBorderColor());
cssStyle.setBorderSize(layoutModel.getBorderSize());
cssStyle.setBoxShadow(layoutModel.getBoxShadow());
cssStyle.setBackgroundColor(layoutModel.getBackgroundColor());
cssStyle.setBackgroundImage(layoutModel.getBackgroundImage());
cssStyle.setBackgroundEffect(layoutModel.getBackgroundEffect());
cssStyle.setBackgroundPosition(layoutModel.getBackgroundPosition());
cssStyle.setBackgroundSize(layoutModel.getBackgroundSize());
cssStyle.setBackgroundRepeat(layoutModel.getBackgroundRepeat());
cssStyle.setTextTitleColor(layoutModel.getTextTitleColor());
cssStyle.setTextTitleFontSize(layoutModel.getTextTitleFontSize());
cssStyle.setTextTitleFontWeight(layoutModel.getTextTitleFontWeight());
cssStyle.setTextTitleFontStyle(layoutModel.getTextTitleFontStyle());
cssStyle.setTextHeaderColor(layoutModel.getTextHeaderColor());
cssStyle.setTextHeaderFontSize(layoutModel.getTextHeaderFontSize());
cssStyle.setTextHeaderFontWeight(layoutModel.getTextHeaderFontWeight());
cssStyle.setTextHeaderFontStyle(layoutModel.getTextHeaderFontStyle());
cssStyle.setTextColor(layoutModel.getTextColor());
cssStyle.setTextFontSize(layoutModel.getTextFontSize());
cssStyle.setTextFontWeight(layoutModel.getTextFontWeight());
cssStyle.setTextFontStyle(layoutModel.getTextFontStyle());
cssStyle.setTextSubtitleColor(layoutModel.getTextSubtitleColor());
cssStyle.setTextSubtitleFontSize(layoutModel.getTextSubtitleFontSize());
cssStyle.setTextSubtitleFontWeight(layoutModel.getTextSubtitleFontWeight());
cssStyle.setTextSubtitleFontStyle(layoutModel.getTextSubtitleFontStyle());
}
ModelStyle cssStyle = mapToStyle(layoutModel);

if (StringUtils.isNotBlank(layoutModel.template)) {
Container container = new Container(layoutModel.getStorageId());
Expand All @@ -335,6 +332,7 @@ public static ModelObject toModelObject(LayoutModel layoutModel) { // NOSONAR
container.setMoveAppsPermissions(layoutModel.getMoveAppsPermissions());
container.setMoveContainersPermissions(layoutModel.getMoveContainersPermissions());
container.setCssStyle(cssStyle);
container.setAppBackgroundStyle(mapToAppStyle(layoutModel));
if (layoutModel.getChildren() != null) {
container.setChildren(layoutModel.getChildren()
.stream()
Expand Down Expand Up @@ -381,4 +379,66 @@ public static ModelObject toModelObject(LayoutModel layoutModel) { // NOSONAR
}
}

private static ModelStyle mapToStyle(LayoutModel layoutModel) {
ModelStyle cssStyle = null;
boolean hasStyle = StringUtils.isNotBlank(layoutModel.getBorderColor())
|| layoutModel.getRadiusTopRight() != null
|| StringUtils.isNotBlank(layoutModel.getBorderSize())
|| StringUtils.isNotBlank(layoutModel.getBoxShadow())
|| StringUtils.isNotBlank(layoutModel.getBackgroundColor())
|| StringUtils.isNotBlank(layoutModel.getBackgroundImage())
|| StringUtils.isNotBlank(layoutModel.getTextTitleColor())
|| StringUtils.isNotBlank(layoutModel.getTextColor())
|| StringUtils.isNotBlank(layoutModel.getTextHeaderColor())
|| StringUtils.isNotBlank(layoutModel.getTextSubtitleColor());
if (hasStyle) {
cssStyle = new ModelStyle();
cssStyle.setBorderColor(layoutModel.getBorderColor());
cssStyle.setBorderSize(layoutModel.getBorderSize());
cssStyle.setBoxShadow(layoutModel.getBoxShadow());
cssStyle.setRadiusTopRight(layoutModel.getRadiusTopRight());
cssStyle.setRadiusTopLeft(layoutModel.getRadiusTopLeft());
cssStyle.setRadiusBottomRight(layoutModel.getRadiusBottomRight());
cssStyle.setRadiusBottomLeft(layoutModel.getRadiusBottomLeft());
cssStyle.setBackgroundColor(layoutModel.getBackgroundColor());
cssStyle.setBackgroundImage(layoutModel.getBackgroundImage());
cssStyle.setBackgroundEffect(layoutModel.getBackgroundEffect());
cssStyle.setBackgroundPosition(layoutModel.getBackgroundPosition());
cssStyle.setBackgroundSize(layoutModel.getBackgroundSize());
cssStyle.setBackgroundRepeat(layoutModel.getBackgroundRepeat());
cssStyle.setTextTitleColor(layoutModel.getTextTitleColor());
cssStyle.setTextTitleFontSize(layoutModel.getTextTitleFontSize());
cssStyle.setTextTitleFontWeight(layoutModel.getTextTitleFontWeight());
cssStyle.setTextTitleFontStyle(layoutModel.getTextTitleFontStyle());
cssStyle.setTextHeaderColor(layoutModel.getTextHeaderColor());
cssStyle.setTextHeaderFontSize(layoutModel.getTextHeaderFontSize());
cssStyle.setTextHeaderFontWeight(layoutModel.getTextHeaderFontWeight());
cssStyle.setTextHeaderFontStyle(layoutModel.getTextHeaderFontStyle());
cssStyle.setTextColor(layoutModel.getTextColor());
cssStyle.setTextFontSize(layoutModel.getTextFontSize());
cssStyle.setTextFontWeight(layoutModel.getTextFontWeight());
cssStyle.setTextFontStyle(layoutModel.getTextFontStyle());
cssStyle.setTextSubtitleColor(layoutModel.getTextSubtitleColor());
cssStyle.setTextSubtitleFontSize(layoutModel.getTextSubtitleFontSize());
cssStyle.setTextSubtitleFontWeight(layoutModel.getTextSubtitleFontWeight());
cssStyle.setTextSubtitleFontStyle(layoutModel.getTextSubtitleFontStyle());
}
return cssStyle;
}

private static ApplicationBackgroundStyle mapToAppStyle(LayoutModel layoutModel) {
ApplicationBackgroundStyle cssStyle = null;
if (StringUtils.isNotBlank(layoutModel.getAppBackgroundColor())
|| StringUtils.isNotBlank(layoutModel.getAppBackgroundImage())) {
cssStyle = new ApplicationBackgroundStyle();
cssStyle.setBackgroundColor(layoutModel.getAppBackgroundColor());
cssStyle.setBackgroundImage(layoutModel.getAppBackgroundImage());
cssStyle.setBackgroundEffect(layoutModel.getAppBackgroundEffect());
cssStyle.setBackgroundPosition(layoutModel.getAppBackgroundPosition());
cssStyle.setBackgroundSize(layoutModel.getAppBackgroundSize());
cssStyle.setBackgroundRepeat(layoutModel.getAppBackgroundRepeat());
}
return cssStyle;
}

}
4 changes: 4 additions & 0 deletions layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,3 +343,7 @@ layout.textColorTitle=Title
layout.textColorHeader=Header
layout.textColorBody=Body
layout.textColorSubtitle=Subtitle
layout.color=Color
layout.applicationStyling=Application Styling
layout.globalPageDesign=Global Page Design
layout.globalPageBackground=Page Background
47 changes: 44 additions & 3 deletions layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,9 @@ export function getStyle(container, options) {
}
if (container.borderColor) {
style[options.isApplicationStyle && '--appBorderColor' || 'border-color'] = container.borderColor;
}
if (container.borderSize) {
style[options.isApplicationStyle && '--appBorderSize' || 'border-size'] = `${container.borderSize}px`;
if (container.borderSize) {
style[options.isApplicationStyle && '--appBorderSize' || 'border-size'] = `${container.borderSize}px`;
}
}
if (container.boxShadow === 'true') {
style[options.isApplicationStyle && '--appBoxShadow' || 'box-shadow'] = '0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)';
Expand All @@ -106,13 +106,21 @@ export function getStyle(container, options) {
|| container.backgroundEffect)) {
if (container.backgroundColor) {
style[options.isApplicationBackground && '--appBackgroundColor' || 'background-color'] = container.backgroundColor;
} else if (container.backgroundEffect || container.backgroundImage) {
style[options.isApplicationBackground && '--appBackgroundColor' || 'background-color'] = 'transparent';
}

if (container.backgroundEffect && container.backgroundImage) {
style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = `url(${container.backgroundImage}),${container.backgroundEffect}`;
} else if (container.backgroundImage) {
style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = `url(${container.backgroundImage})`;
} else if (container.backgroundEffect) {
style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = container.backgroundEffect;
} else if (container.backgroundColor) {
style[options.isApplicationBackground && '--appBackgroundImage' || 'background-image'] = 'none';
style[options.isApplicationBackground && '--appBackgroundRepeat' || 'background-repeat'] = 'no-repeat';
style[options.isApplicationBackground && '--appBackgroundSize' || 'background-size'] = 'unset';
style[options.isApplicationBackground && '--appBackgroundPosition' || 'background-position'] = 'unset';
}
if (container.backgroundImage) {
if (container.backgroundRepeat) {
Expand All @@ -126,6 +134,39 @@ export function getStyle(container, options) {
}
}
}
if (container.appBackgroundColor) {
style['--appBackgroundColor'] = container.appBackgroundColor;
}
if (container.appBackgroundEffect && container.appBackgroundImage) {
style['--appBackgroundImage'] = `url(${container.appBackgroundImage}),${container.appBackgroundEffect}`;
} else if (container.appBackgroundImage) {
style['--appBackgroundImage'] = `url(${container.appBackgroundImage})`;
} else if (container.appBackgroundEffect) {
style['--appBackgroundImage'] = container.appBackgroundEffect;
}
if (container.appBackgroundImage) {
if (container.appBackgroundRepeat) {
style['--appBackgroundRepeat'] = container.appBackgroundRepeat;
}
if (container.appBackgroundSize) {
style['--appBackgroundSize'] = container.appBackgroundSize;
}
if (container.appBackgroundPosition) {
style['--appBackgroundPosition'] = container.appBackgroundPosition;
}
}
if (container.radiusTopRight || container.radiusTopRight === 0) {
style['--appBorderRadiusTopRight'] = `${container.radiusTopRight}px`;
}
if (container.radiusTopLeft || container.radiusTopLeft === 0) {
style['--appBorderRadiusTopLeft'] = `${container.radiusTopLeft}px`;
}
if (container.radiusBottomRight || container.radiusBottomRight === 0) {
style['--appBorderRadiusBottomRight'] = `${container.radiusBottomRight}px`;
}
if (container.radiusBottomLeft || container.radiusBottomLeft === 0) {
style['--appBorderRadiusBottomLeft'] = `${container.radiusBottomLeft}px`;
}
return style;
}

Expand Down
2 changes: 1 addition & 1 deletion layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<v-card
:max-width="maxWidth"
:class="parentClass"
class="light-grey-background-color layout-sections-parent singlePageApplication mx-auto"
class="transparent layout-sections-parent singlePageApplication mx-auto"
flat>
<layout-editor-container-extension
:container="pageLayout"
Expand Down
13 changes: 9 additions & 4 deletions ...-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditApplicationDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@
max-width="100%"
class="ma-4"
flat>
<div class="d-flex align-center">
<div class="text-title mb-2">
{{ $t('layout.applicationStyling') }}
</div>
</div>
<layout-editor-margin-input
v-if="initialized"
ref="marginInput"
Expand All @@ -56,7 +61,7 @@
@refresh="refresh++" />
<layout-editor-border-radius-input
v-if="initialized"
ref="borderInput"
ref="borderRadiusInput"
v-model="container"
class="mt-4"
@refresh="refresh++" />
Expand All @@ -69,12 +74,12 @@
@refresh="refresh++" />
<layout-editor-text-input
v-if="initialized"
ref="tectColorInput"
ref="textInput"
v-model="container"
class="mt-4"
@refresh="refresh++" />
<div class="d-flex align-center mt-4">
<div class="subtitle-1 font-weight-bold me-auto mb-2">
<div class="text-title mb-2">
{{ $t('layout.advancedOptions') }}
</div>
</div>
Expand Down Expand Up @@ -234,7 +239,7 @@ export default {
radiusBottomRight: this.container?.radiusBottomRight,
radiusBottomLeft: this.container?.radiusBottomLeft,
borderColor: this.container?.borderColor,
borderSize: this.container?.borderSize || 0,
borderSize: this.container?.borderColor && this.container?.borderSize || null,
boxShadow: this.container?.boxShadow && 'true' || null,
textTitleColor: this.container?.textTitleColor || null,
textTitleFontSize: this.container?.textTitleFontSize || null,
Expand Down
Loading

0 comments on commit d6d77e8

Please sign in to comment.