Skip to content

Commit

Permalink
feat(ui) show full screen when it is the only thing on the tab
Browse files Browse the repository at this point in the history 
ref: #26222
  • Loading branch information
@wezell
wezell committed Sep 21, 2023
1 parent 3f7f5ce commit 144772c
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 20 deletions.
5 changes: 0 additions & 5 deletions core-web/libs/dotcms-scss/jsp/css/dotcms.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 9 additions & 4 deletions dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css
View file
Expand Up @@ -5942,7 +5942,6 @@ hr {
.dijitTextBox,
.dijitSelect {
width: 100%;
max-width: 1100px;
}

.dijitComboBox {
Expand Down Expand Up @@ -8795,7 +8794,6 @@ Styles for commons fields along the backend
}

.editor-toolbar {
max-width: 1100px;
width: 100%;
}

Expand All @@ -8810,7 +8808,6 @@ Styles for commons fields along the backend

.wysiwyg-wrapper {
width: 100%;
max-width: 1100px;
}

.key-value-form {
Expand Down Expand Up @@ -9655,7 +9652,6 @@ a.category_higlighted, a.tag_higlighted {

.aceText {
border: 1px solid #afb3c0;
max-width: 1100px;
width: 100%;
height: 100%;
min-height: 200px;
Expand Down Expand Up @@ -11183,3 +11179,12 @@ body {
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}

.edit-content-full-screen{

width:100% !important;
max-width:100% !important;
margin:0px;
border:1px solid red;
min-height: fit-content;
}
138 changes: 130 additions & 8 deletions dotCMS/src/main/webapp/html/portlet/ext/contentlet/edit_contentlet.jsp
View file
@@ -1,7 +1,103 @@
<%!
public boolean isFullScreenField(ContentType type, com.dotcms.contenttype.model.field.Field fieldIn) {
try {
com.dotcms.contenttype.model.field.Field field = fieldIn;
if (!(field instanceof WysiwygField ||
field instanceof StoryBlockField ||
field instanceof TextAreaField ||
field instanceof CustomField ||
field instanceof JSONField
)) {
return false;
}
boolean showFullScreen = Try.of(() -> Boolean.parseBoolean(field.fieldVariablesMap().get("showFullScreen").value())).getOrElse(true);
if (!showFullScreen) {
return false;
}
List<com.dotcms.contenttype.model.field.Field> fieldsWithColumns = type.fields().stream().filter(f -> {
return !(f instanceof RowField || f instanceof LineDividerField);
}).collect(Collectors.toList());
com.dotcms.contenttype.model.field.Field previousField = Try.of(() -> fieldsWithColumns.get(fieldsWithColumns.indexOf(field) - 1)).getOrNull();
com.dotcms.contenttype.model.field.Field nextField = Try.of(() -> fieldsWithColumns.get(fieldsWithColumns.indexOf(field) + 1)).getOrNull();
// we are in a multi column field
if (previousField instanceof ColumnField && nextField instanceof ColumnField) {
return false;
}
List<com.dotcms.contenttype.model.field.Field> fields = fieldsWithColumns.stream().filter(f -> {
return !(f instanceof ColumnField);
}).collect(Collectors.toList());
int fieldOrder = fields.indexOf(field);
previousField = Try.of(() -> fields.get(fieldOrder - 1)).getOrNull();
nextField = Try.of(() -> fields.get(fieldOrder + 1)).getOrNull();
// is first field and then nextField is TabDividerField or no other field
if (fieldOrder == 0
&& (nextField instanceof TabDividerField || nextField == null)) {
return true;
}
// Previous field a TabDividerField and nextField a TabDividerField or no other field
if (fieldOrder > 0 && previousField instanceof TabDividerField
&& (nextField instanceof TabDividerField || nextField == null)) {
return true;
}
} catch (Exception e) {
return false;
}
return false;
}
public boolean isFullScreenField(Structure structure, Field oldField) {
try{
return isFullScreenField(new StructureTransformer(structure).from(),LegacyFieldTransformer.from(oldField));
}
catch(Exception e){
return false;
}
}
public boolean isNextFieldFullScreen(Structure structure, Field oldField) {
try{
ContentType type = new StructureTransformer(structure).from();
com.dotcms.contenttype.model.field.Field fieldIn = LegacyFieldTransformer.from(oldField);
com.dotcms.contenttype.model.field.Field field = type.fields().subList(type.fields().indexOf(fieldIn), type.fields().size()).stream().filter(f->!(f instanceof RowField || f instanceof ColumnField || f instanceof TabDividerField)).findFirst().get();
return isFullScreenField(type,field);
}
catch(Exception e){
return false;
}
}
%>

<%@page import="com.dotmarketing.portlets.structure.model.Field"%>
<%@page import="com.dotcms.contenttype.model.field.ColumnField"%>
<%@page import="com.dotcms.contenttype.model.field.RowField"%>
<%@page import="com.dotcms.contenttype.transform.field.LegacyFieldTransformer"%>
<%@page import="com.dotmarketing.business.LayoutAPI"%>
<%@page import="com.dotmarketing.beans.Host"%>
Expand All @@ -12,7 +108,7 @@
<%@page import="com.dotmarketing.portlets.categories.business.CategoryAPI"%>
<%@page import="com.dotmarketing.business.APILocator"%>
<%@page import="com.dotmarketing.portlets.containers.model.Container"%>
<%@page import="com.dotmarketing.portlets.contentlet.struts.ContentletForm"%>
<%@page import="com.dotmarketing.portlets.contentlet.struts.ContentletForm"%>
<%@page import="com.dotmarketing.portlets.structure.model.ContentletRelationships"%>
<%@page import="com.dotmarketing.portlets.structure.model.ContentletRelationships.ContentletRelationshipRecords"%>
<%@page import="com.dotmarketing.portlets.categories.model.Category"%>
Expand All @@ -31,6 +127,14 @@
<%@page import="com.dotmarketing.portlets.contentlet.business.ContentletAPI"%>
<%@ page import="com.dotmarketing.portlets.htmlpageasset.model.IHTMLPage"%>
<%@ page import="com.dotmarketing.db.DbConnectionFactory" %>
<%@ page import="com.dotcms.contenttype.model.type.ContentType" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.stream.Collectors" %>
<%@ page import="com.dotcms.contenttype.model.field.*" %>
<%@ page import="io.vavr.control.Try" %>
<%@ page import="com.dotcms.contenttype.transform.contenttype.StructureTransformer" %>
<%@ page import="org.apache.poi.ss.usermodel.Row" %>
<%@ page import="com.dotcms.contenttype.transform.field.FieldTransformer" %>
<!DOCTYPE html>
<script type='text/javascript' src='/dwr/interface/LanguageAjax.js'></script>

Expand All @@ -46,7 +150,7 @@
</style>

<!--
<!--
Uncomment this when we are ready to use the new content fields
<script src="/html/contenttype-fields.js"></script>
-->
Expand Down Expand Up @@ -182,7 +286,10 @@
request.setAttribute(com.dotmarketing.util.WebKeys.PERMISSIONABLE_EDIT, contentlet);
request.setAttribute(com.dotmarketing.util.WebKeys.PERMISSIONABLE_EDIT_BASE, structure);
boolean fullScreenField = isNextFieldFullScreen(structure, fields.get(0));
String fullScreenClass= fullScreenField ? "edit-content-full-screen": "";
boolean fullScreenNextField = isNextFieldFullScreen(structure, fields.get(0));
String fullScreenNextClass= fullScreenNextField ? "edit-content-full-screen": "";
List<Structure> structures = StructureFactory.getStructuresByUser(user, "", "name", 100, 0,"asc");
/*### DRAW THE DYNAMIC FIELDS ###*/
Expand Down Expand Up @@ -278,7 +385,7 @@
<%}%>

<!-- START EDIT CONTENT FORM -->
<div class="content-edit__form">
<div class="content-edit__form <%=fullScreenNextClass%>" >
<% if(widgetUsageField != null && UtilMethods.isSet(widgetUsageField.getValues())){ %>
<div class="fieldWrapper">
<div class="fieldName">
Expand All @@ -295,7 +402,7 @@
</div>
<% } %>

<div class="editcontentlet__row">
<div>
<span class="editcontentlet__col">

<%-- Begin Looping over fields --%>
Expand All @@ -307,9 +414,24 @@
boolean rowOpen = true;
boolean columnOpen = true;
for (; i < fields.size(); i++) {
Field f = fields.get(i);
com.dotcms.contenttype.model.field.Field newField = new LegacyFieldTransformer(f).from();
fullScreenField = isFullScreenField(structure,f);
fullScreenNextField = isNextFieldFullScreen(structure, f);
fullScreenClass=fullScreenField ? "edit-content-full-screen": "";
fullScreenNextClass=fullScreenNextField ? "edit-content-full-screen": "";
request.setAttribute("DOT_FULL_SCREEN_FIELD",fullScreenField );
request.setAttribute("DOT_FULL_SCREEN_NEXT_FIELD",fullScreenNextField );
if (fieldSetOpen &&
(f.getFieldType().equals(Field.FieldType.LINE_DIVIDER.toString()) ||
Expand Down Expand Up @@ -349,7 +471,7 @@
</div>

<div id="tab_<%=f.getVelocityVarName()%>" class="custom-tab" dojoType="dijit.layout.ContentPane" title="<%=f.getFieldName()%>">
<div class="content-edit__advaced-form">
<div class="content-edit__advaced-form <%=fullScreenNextClass%> <%=fullScreenClass%>">

<%}else if(f.getFieldType().equals(Field.FieldType.CATEGORIES_TAB.toString()) && !categoriesTabFieldExists) {
categoriesTabFieldExists = true;%>
Expand Down
18 changes: 15 additions & 3 deletions dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp
View file
Expand Up @@ -59,8 +59,18 @@
String counter = (String) request.getAttribute("counter");
boolean fullScreenField = Try.of(()->(boolean)request.getAttribute("DOT_FULL_SCREEN_FIELD")).getOrElse(false);
String fullScreenClass=fullScreenField ? "edit-content-full-screen": "";
%>
<div class="fieldWrapper">

<div class="fieldWrapper" >


fullscreen: <%=fullScreenField%>



<div class="fieldName" id="<%=field.getVelocityVarName()%>_tag">
<% if (hint != null) {%>
Expand Down Expand Up @@ -329,8 +339,8 @@
<%} %>
});
</script>
<div id="aceTextArea_<%=field.getVelocityVarName()%>" class="classAce"></div>
<textarea <%= isReadOnly?"readonly=\"readonly\" style=\"background-color:#eeeeee;\"":"" %> dojoType="dijit.form.SimpleTextarea" <%=isWidget?"style=\"overflow:auto;min-height:362px;max-height: 400px\"":"style=\"overflow:auto;min-height:100px;max-height: 600px\""%>
<div id="aceTextArea_<%=field.getVelocityVarName()%>" class="classAce" style="width:100%"></div>
<textarea <%= isReadOnly?"readonly=\"readonly\" style=\"background-color:#eeeeee;\"":"" %> style="width:100%" dojoType="dijit.form.SimpleTextarea" <%=isWidget?"style=\"overflow:auto;min-height:362px;max-height: 400px\"":"style=\"overflow:auto;min-height:100px;max-height: 600px\""%>
name="<%=field.getFieldContentlet()%>"
id="<%=field.getVelocityVarName()%>" class="editTextAreaField" onchange="emmitFieldDataChange(true)"><%= UtilMethods.htmlifyString(textValue) %></textarea>
<%
Expand Down Expand Up @@ -409,6 +419,8 @@
}
}
%>


<div class="wysiwyg-wrapper">
<div id="<%=field.getVelocityVarName()%>aceEditor" class="classAce aceTall" style="display: none"></div>

Expand Down

0 comments on commit 144772c

Please sign in to comment.