Skip to content

Commit

Permalink
IVYPORTAL-17306 Welcome Widget Dark Mode Support
Browse files Browse the repository at this point in the history 
- Update GUI Test
  • Loading branch information
@chnam-axonivy
chnam-axonivy committed Jan 15, 2025
1 parent 5020885 commit e123732
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 122 deletions.
2 changes: 1 addition & 1 deletion ...ium-test/src_test/com/axonivy/portal/selenium/page/WelcomeEditWidgetNewDashboardPage.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ public SelenideElement getConfigurationDialog() {
}

public void waitForDialogLoaded() {
getConfigurationDialog().$("input[id$=':welcome-text-color']")
getConfigurationDialog().$("input[id$=':welcome-text-color-light-mode']")
.shouldBe(getClickableCondition(), DEFAULT_TIMEOUT)
.click();
getConfigurationDialog().$(".user-filter__header").shouldBe(appear, DEFAULT_TIMEOUT).click();
Expand Down
4 changes: 0 additions & 4 deletions ...vyPortal/portal/src/ch/ivy/addon/portal/generic/bean/DashboardDetailModificationBean.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,10 +573,6 @@ private void updateWelcomeWidget(DashboardWidget widget) {
tempImageFileDarkMode.delete();
}
}
if (!welcomeWidget.isGreeting()) {
welcomeWidget.setWelcomeTexts(new ArrayList<>());
welcomeWidget.setWelcomeText("");
}
}

private void updateCaseWidget(DashboardWidget widget) {
Expand Down
49 changes: 11 additions & 38 deletions ...l/generic/dashboard/component/WelcomeWidgetConfiguration/WelcomeWidgetConfiguration.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<h:outputScript name="welcome-widget.js" library="js" />
<c:set var="widget" value="#{cc.attrs.widget}" />
<f:event listener="#{dashboardWelcomeWidgetConfigurationBean.init()}" type="preRenderComponent" />

<!-- Configuration -->
<h:panelGroup id="user-filter" layout="block" styleClass="card dashboard-card welcome-widget-configuration-panel">
<div class="user-filter ui-g">
Expand Down Expand Up @@ -48,7 +49,6 @@
<div class="w-full">
<p:fileUpload id="image-upload-panel"
widgetVar="ImageLightUpload"
styleClass="hidden"
listener="#{dashboardWelcomeWidgetConfigurationBean.handleFileUpload}"
chooseIcon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
auto="true"
Expand All @@ -60,19 +60,7 @@
invalidFileMessage="#{ivy.cms.co('/Dialogs/components/CaseDocument/invalidFileMessage')}"
sizeLimit="#{dashboardWelcomeWidgetConfigurationBean.uploadFileLimit}"
oncomplete="PF('new-widget-configuration-dialog').initPosition(); updateAll();"
dropZone="image-light-upload-file-panel"
onvalidationfailure="handleUploadFileFail();"/>
</div>
<div class="ui-g-12">
<p:outputPanel id="image-light-upload-file-panel" styleClass="ui-welcome-upload-file-panel">
<span class="ui-document-upload-file-label">
<i class="si si-file-code-upload-1" id="image-light-upload-file-icon" />
<p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskDetails/addDocumentHelpText')}">
<p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/uploadHere')}"
onclick="PF('ImageLightUpload').show();return false" />
</p:outputLabel>
</span>
</p:outputPanel>
/>
</div>

<div class="ui-g-3 ui-md-4">
Expand Down Expand Up @@ -110,7 +98,6 @@
<div class="w-full">
<p:fileUpload id="image-dark-mode-upload-panel"
widgetVar="ImageDarkUpload"
styleClass="hidden"
listener="#{dashboardWelcomeWidgetConfigurationBean.handleFileUploadDarkMode}"
chooseIcon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
auto="true"
Expand All @@ -122,19 +109,7 @@
invalidFileMessage="#{ivy.cms.co('/Dialogs/components/CaseDocument/invalidFileMessage')}"
sizeLimit="#{dashboardWelcomeWidgetConfigurationBean.uploadFileLimit}"
oncomplete="PF('new-widget-configuration-dialog').initPosition(); updateAll();"
dropZone="image-dark-upload-file-panel"
onvalidationfailure="handleUploadFileFail();"/>
</div>
<div class="ui-g-12">
<p:outputPanel id="image-dark-upload-file-panel" styleClass="ui-welcome-upload-file-panel">
<span class="ui-document-upload-file-label">
<i class="si si-file-code-upload-1" id="image-dark-upload-file-icon" />
<p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskDetails/addDocumentHelpText')}">
<p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/uploadHere')}"
onclick="PF('ImageDarkUpload').show();return false" />
</p:outputLabel>
</span>
</p:outputPanel>
/>
</div>

<div class="ui-g-3 ui-md-4">
Expand Down Expand Up @@ -212,27 +187,25 @@
<f:selectItem itemValue="#{false}" itemLabel="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/no')}" />
</p:selectOneRadio>
</div>
<h:panelGroup id="welcome-text-input-container" layout="block" rendered="#{dashboardWelcomeWidgetConfigurationBean.widget.isGreeting()}"
<h:panelGroup id="welcome-text-input-container" layout="block"
styleClass="ui-g-12 u-no-padding-left u-no-padding-right ui-g u-padding-0">
<ui:repeat id="welcome-text-list" var="text"
value="#{dashboardWelcomeWidgetConfigurationBean.widget.welcomeTexts}" varStatus="status">
<c:set var="isApplicationDefaultEmailLanguage"
value="#{dashboardWelcomeWidgetConfigurationBean.isApplicationDefaultEmailLanguage(text.locale.toLanguageTag())}" />
<h:panelGroup id="welcome-text-input-panel" styleClass="ui-g-12"
layout="block" >
<div class="ui-g-3 ui-md-4">
<p:outputLabel
value="#{text.locale.getDisplayName()} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/WelcomeWidget/DisplayedText')}"
for="welcome-text-input" styleClass="welcome-text-label" />
</div>
<div class="ui-g-9 ui-md-8 welcome-text-input-panel">
<div class="ui-g-3 ui-md-4">
<p:outputLabel
value="#{text.locale.getDisplayName()} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/WelcomeWidget/DisplayedText')}"
for="welcome-text-input" styleClass="welcome-text-label" />
</div>
<h:panelGroup id="welcome-text-input-panel" styleClass="ui-g-9 ui-md-8 welcome-text-input-panel"
layout="block">
<h:outputText value="#{dashboardWelcomeWidgetConfigurationBean.generateGreetingText(text.locale)}"
rendered="#{dashboardWelcomeWidgetConfigurationBean.widget.greeting}"
styleClass="js-greeting-text greeting-text #{isApplicationDefaultEmailLanguage ? 'language-to-preview' : ''}" />
<p:inputText id="welcome-text-input" value="#{text.value}"
styleClass="#{isApplicationDefaultEmailLanguage ? 'language-to-preview' : ''} js-welcome-text-input welcome-text-input"
onkeyup="#{isApplicationDefaultEmailLanguage ? 'WelcomeWidgetConfiguration.updatePreviewText();' : ''}" />
</div>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
Expand Down
13 changes: 1 addition & 12 deletions AxonIvyPortal/portal/webContent/resources/css/module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5633,18 +5633,7 @@ a.dashboard-action-container label {
display: flex;
}

.ui-welcome-upload-file-panel {
width: 100%;
border: 1px solid var(--process-list-item-border-color);
background-color: var(--ui-fileupload-buttonbar-background-color);
border-radius: 10px;
height: 8em;
align-items: center;
display: flex;

}

.ui-external-link-preview-image-panel > .ui-external-link-preview-image-label, .ui-dashboard-upload-file-panel > .ui-dashboard-upload-file-label, .ui-document-upload-file-panel > .ui-document-upload-file-label, .ui-welcome-upload-file-panel > .ui-document-upload-file-label {
.ui-external-link-preview-image-panel > .ui-external-link-preview-image-label, .ui-dashboard-upload-file-panel > .ui-dashboard-upload-file-label, .ui-document-upload-file-panel > .ui-document-upload-file-label {
width: 42%;
display: block;
text-align: center;
Expand Down
127 changes: 60 additions & 67 deletions AxonIvyPortal/portal/webContent/resources/js/welcome-widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ WelcomeWidgetConfiguration = {
updatePreviewText : function(isGreeting) {
var previewDialog = $('#new-widget-configuration-dialog');
var welcomeText = '';
var findWelcomeText = previewDialog.find('.js-welcome-text-input.language-to-preview');
if (findWelcomeText != undefined && findWelcomeText.get(0) != undefined){
welcomeText = findWelcomeText.get(0).value;
}
var findWelcomeText = previewDialog.find('.js-welcome-text-input.language-to-preview');
if (findWelcomeText != undefined && findWelcomeText.get(0) != undefined){
welcomeText = findWelcomeText.get(0).value;
}

if (isGreeting == 'true' || (isGreeting == undefined && $('.js-greeting-text').length != 0)) {
var findGreeting = previewDialog.find('.js-greeting-text.language-to-preview')
if (findGreeting != undefined && findGreeting.get(0) != undefined){
welcomeText = findGreeting.get(0).innerHTML + welcomeText;
}
var findGreeting = previewDialog.find('.js-greeting-text.language-to-preview')
if (findGreeting != undefined && findGreeting.get(0) != undefined){
welcomeText = findGreeting.get(0).innerHTML + welcomeText;
}

}
var findPreviewText = $('#new-widget-configuration-dialog').find('.js-preview-text');
Expand Down Expand Up @@ -67,7 +67,7 @@ WelcomeWidgetConfiguration = {
previewText.removeClass('bottom top left right').addClass('center');
}

var previewTextDarkMode = previewDialog.find('.js-preview-text-dark-mode');
var previewTextDarkMode = previewDialog.find('.js-preview-text-dark-mode');
if (selectedPosition == 'BOTTOM_LEFT') {
previewTextDarkMode.removeClass('top right center').addClass('bottom left');
}
Expand All @@ -89,44 +89,44 @@ updatePreviewImageFit : function() {
var previewDialog = $('#new-widget-configuration-dialog');
var selectedFit = previewDialog.find('input[id $="selected-welcome-image-fit"]').get(0).value;
var images = previewDialog.find('.js-preview-image');
for (var i = 0; i < images.length;i ++){
var currentImage = images[i];
$(currentImage).removeClass (function (index, className) {
return (className.match (/(^|\s)welcome-image-fit-\S+/g) || []).join(' ');
});
if (selectedFit == 'COVER') {
$(currentImage).addClass('welcome-image-fit-cover');
} else if (selectedFit == 'FILL') {
$(currentImage).addClass('welcome-image-fit-fill');
} else if (selectedFit == 'NONE') {
$(currentImage).addClass('welcome-image-fit-none');
} else if (selectedFit == 'CONTAIN') {
$(currentImage).addClass('welcome-image-fit-contain');
}
}
for (var i = 0; i < images.length;i ++){
var currentImage = images[i];
$(currentImage).removeClass (function (index, className) {
return (className.match (/(^|\s)welcome-image-fit-\S+/g) || []).join(' ');
});
if (selectedFit == 'COVER') {
$(currentImage).addClass('welcome-image-fit-cover');
} else if (selectedFit == 'FILL') {
$(currentImage).addClass('welcome-image-fit-fill');
} else if (selectedFit == 'NONE') {
$(currentImage).addClass('welcome-image-fit-none');
} else if (selectedFit == 'CONTAIN') {
$(currentImage).addClass('welcome-image-fit-contain');
}
}
},

updatePreviewTextColor : function() {
var previewDialog = $('#new-widget-configuration-dialog');
var findSelectedColor = previewDialog.find('.js-welcome-text-color');
if (findSelectedColor != undefined){
var selectedColor = findSelectedColor.get(0).value;
var findPreviewText = previewDialog.find('.js-preview-text');
if (findPreviewText != undefined){
findPreviewText.css({'color': selectedColor});
}
var selectedColor = findSelectedColor.get(0).value;
var findPreviewText = previewDialog.find('.js-preview-text');
if (findPreviewText != undefined){
findPreviewText.css({'color': selectedColor});
}
}
},

updatePreviewTextColorDarkMode : function() {
var previewDialog = $('#new-widget-configuration-dialog');
var findSelectedColorDarkMode = previewDialog.find('.js-welcome-text-color-dark-mode');
if (findSelectedColorDarkMode != undefined){
var selectedColorDarkMode = findSelectedColorDarkMode.get(0).value;
var findPreviewTextDarkMode = previewDialog.find('.js-preview-text-dark-mode');
if (findPreviewTextDarkMode != undefined){
findPreviewTextDarkMode.css({'color': selectedColorDarkMode});
}
var selectedColorDarkMode = findSelectedColorDarkMode.get(0).value;
var findPreviewTextDarkMode = previewDialog.find('.js-preview-text-dark-mode');
if (findPreviewTextDarkMode != undefined){
findPreviewTextDarkMode.css({'color': selectedColorDarkMode});
}
}

},
Expand All @@ -135,28 +135,28 @@ updatePreviewImageFit : function() {
var previewDialog = $('#new-widget-configuration-dialog');
var selectedTextSize = previewDialog.find('input[id $="selected-welcome-text-size"]').get(0).value;
var previewText = previewDialog.find('.js-preview-text');
var previewTextDarkMode = previewDialog.find('.js-preview-text-dark-mode');
var previewTextDarkMode = previewDialog.find('.js-preview-text-dark-mode');
if (selectedTextSize == 'NORMAL_TEXT') {
previewText.removeClass('HEADING_1 HEADING_2 HEADING_3').addClass('NORMAL_TEXT');
previewTextDarkMode.removeClass('HEADING_1 HEADING_2 HEADING_3').addClass('NORMAL_TEXT');
previewTextDarkMode.removeClass('HEADING_1 HEADING_2 HEADING_3').addClass('NORMAL_TEXT');
return;
}
if (selectedTextSize == 'HEADING_1') {
previewText.removeClass('HEADING_2 HEADING_3 NORMAL_TEXT').addClass('HEADING_1');
previewTextDarkMode.removeClass('HEADING_2 HEADING_3 NORMAL_TEXT').addClass('HEADING_1');
previewTextDarkMode.removeClass('HEADING_2 HEADING_3 NORMAL_TEXT').addClass('HEADING_1');
return;
}
if (selectedTextSize == 'HEADING_2') {
previewText.removeClass('HEADING_1 HEADING_3 NORMAL_TEXT').addClass('HEADING_2');
previewTextDarkMode.removeClass('HEADING_1 HEADING_3 NORMAL_TEXT').addClass('HEADING_2');
previewTextDarkMode.removeClass('HEADING_1 HEADING_3 NORMAL_TEXT').addClass('HEADING_2');
return;
}
if (selectedTextSize == 'HEADING_3') {
previewText.removeClass('HEADING_1 HEADING_2 NORMAL_TEXT').addClass('HEADING_3');
previewTextDarkMode.removeClass('HEADING_1 HEADING_2 NORMAL_TEXT').addClass('HEADING_3');
return;
}

},

updateStyleClasses : function() {
Expand All @@ -178,7 +178,7 @@ updatePreviewImageFit : function() {
this.oldTextStyleClass = welcomeText.attr('class');
}
welcomeText.attr('class', this.oldTextStyleClass + ' ' + textStyleClass);
welcomeTextDarkMode.attr('class', this.oldTextStyleClass + ' ' + textStyleClass);
welcomeTextDarkMode.attr('class', this.oldTextStyleClass + ' ' + textStyleClass);
}
}

Expand All @@ -195,7 +195,7 @@ WelcomeWidget = {
welcomeText.css({
'color' : welcomeTextColor,
});

switch(welcomeTextPosition) {
case 'BOTTOM_LEFT':
welcomeText.addClass('bottom').addClass('left');
Expand All @@ -217,8 +217,8 @@ WelcomeWidget = {
}

welcomeText.addClass(welcomeTextSize);
var welcomeTextDarkMode = widget.find('[id $= "welcome-text-dark-mode"]');

var welcomeTextDarkMode = widget.find('[id $= "welcome-text-dark-mode"]');
welcomeTextDarkMode.css({
'color' : welcomeTextColorDarkMode,
});
Expand Down Expand Up @@ -249,24 +249,24 @@ WelcomeWidget = {
updateImageFit: function(widgetId, welcomeImageFit) {
var widget = $('div.grid-stack-item[gs-id = ' + widgetId + ']');
var images = widget.find('.js-welcome-image');

for (var i = 0; i < images.length; i++){
var currentImage = images[i];
$(currentImage).removeClass (function (index, className) {
return (className.match (/(^|\s)welcome-image-fit-\S+/g) || []).join(' ');
});
if (welcomeImageFit == 'COVER') {
$(currentImage).addClass('welcome-image-fit-cover');
} else if (welcomeImageFit == 'FILL') {
$(currentImage).addClass('welcome-image-fit-fill');
} else if (welcomeImageFit == 'NONE') {
$(currentImage).addClass('welcome-image-fit-none');
} else if (welcomeImageFit == 'CONTAIN') {
$(currentImage).addClass('welcome-image-fit-contain');
}
}


for (var i = 0; i < images.length; i++){
var currentImage = images[i];
$(currentImage).removeClass (function (index, className) {
return (className.match (/(^|\s)welcome-image-fit-\S+/g) || []).join(' ');
});
if (welcomeImageFit == 'COVER') {
$(currentImage).addClass('welcome-image-fit-cover');
} else if (welcomeImageFit == 'FILL') {
$(currentImage).addClass('welcome-image-fit-fill');
} else if (welcomeImageFit == 'NONE') {
$(currentImage).addClass('welcome-image-fit-none');
} else if (welcomeImageFit == 'CONTAIN') {
$(currentImage).addClass('welcome-image-fit-contain');
}
}


},

updateImageInlineStyle: function(widgetId, imageInlineStyle) {
Expand All @@ -277,10 +277,3 @@ WelcomeWidget = {
}
}
}

function handleUploadFileFail() {
let errorMessageElement = document.getElementById('widget-configuration-form:new-widget-configuration-component:config-welcome-widget-message');
let uploadErrorElement = document.getElementsByClassName('ui-messages ui-widget ui-helper-hidden ui-fileupload-messages')[0];
errorMessageElement.style.display = 'block';
errorMessageElement.appendChild(uploadErrorElement);
}

0 comments on commit e123732

Please sign in to comment.