From 18da93fa386ee28fda38e1a5c8c7e3a88203d75d Mon Sep 17 00:00:00 2001 From: Zulqarnain Date: Wed, 22 Mar 2023 12:52:12 +0500 Subject: [PATCH] dotCMS/core#24362 working on Create Code UI --- core-web/libs/dojo-theme/css/dotcms.css | 50 ++++--- .../backend/dot-admin/components/_common.scss | 1 + .../components/_file-asset-dropzone.scss | 13 ++ .../libs/dotcms-webcomponents/project.json | 1 + .../dot-file-upload/dot-file-upload.scss | 94 +++++++++++++ .../dot-file-upload.stories.js | 29 ++++ .../dot-file-upload/dot-file-upload.tsx | 128 ++++++++++++++++++ .../src/global/_variables.scss | 4 + .../webapp/html/css/dijit-dotcms/dotcms.css | 14 ++ .../ext/contentlet/field/edit_field.jsp | 14 +- .../ext/contentlet/field/edit_field_js.jsp | 32 +++++ 11 files changed, 363 insertions(+), 17 deletions(-) create mode 100644 core-web/libs/dojo-theme/scss/backend/dot-admin/components/_file-asset-dropzone.scss create mode 100644 core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss create mode 100644 core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js create mode 100644 core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx diff --git a/core-web/libs/dojo-theme/css/dotcms.css b/core-web/libs/dojo-theme/css/dotcms.css index b3181b52fd62..dd5c725d0768 100644 --- a/core-web/libs/dojo-theme/css/dotcms.css +++ b/core-web/libs/dojo-theme/css/dotcms.css @@ -2952,7 +2952,6 @@ body { .toggleOpenIcon, .dijitIconCopy, #dijit-icon, -.required:before, .tagLink.persona:before, .wmaIcon, .wavIcon, @@ -3147,7 +3146,6 @@ body { } #dijit-icon, -.required:before, .tagLink.persona:before, .wmaIcon, .wavIcon, @@ -4588,7 +4586,10 @@ body { .dijitDialogCloseIcon:after { transform: rotate(-45deg); } - +.dijitDialogPaneActionBar, +.dijitDialogPaneContent { + padding: 16px; +} .dijitDialogPaneActionBar { padding-top: 0; } @@ -4601,6 +4602,7 @@ body { font-weight: bold; height: 50px; line-height: 50px; + padding: 0 16px; position: relative; } @@ -7366,7 +7368,6 @@ select[multiple]:hover { #listing-table th, .listingTable th, .dojoxUploaderFileListTable th { - font-weight: bold; background-color: #fafafa; } @@ -10077,7 +10078,7 @@ Styles for commons fields along the backend #label, .fieldName, dl.vertical dt label { - color: #5b5b5b; + color: #161616; display: block; font-size: 12px; margin-bottom: 4px; @@ -10097,13 +10098,10 @@ dl.vertical dt label { margin-right: 4px; } -.required:before { - content: '\f069'; - color: #d0021b; - font-size: 9px; - position: relative; - top: -4px; - left: 2px; +.required::after { + padding-left: 2px; + content: '*'; + color: #cb3927; } #inline-form, @@ -11089,9 +11087,11 @@ a.tag_higlighted { height: 100%; } -.content-search__show-query-dialog .dijitDialogTitleBar { - height: 0px; - z-index: 1; +.content-search__show-query-dialog .dijitDialogPaneContent { + padding: 0; +} +.content-search__show-query-dialog #queryResults { + padding: 16px; } .content-search__key-fields { @@ -12089,6 +12089,20 @@ a.tag_higlighted { right: 0px; } +.file-asset-container { + position: relative; +} + +.file-asset__drop-zone { + width: 100%; + height: 100%; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0px; +} + #iFrameWrapper { position: absolute; left: 0px; @@ -12408,9 +12422,13 @@ Resize Handle border: none; background: none; height: 18px; + padding: 0; } -.dijitDialogTitle { +.dijitDialogTitleBar { + padding: 0; +} +.dijitDialogTitleBar .dijitDialogTitle { padding-left: 16px; } diff --git a/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_common.scss b/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_common.scss index 0ebd68de9869..b599156f2f87 100644 --- a/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_common.scss +++ b/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_common.scss @@ -9,3 +9,4 @@ @import "history"; @import "rules"; @import "wysiwyg-drag-zone"; +@import "file-asset-dropzone"; diff --git a/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_file-asset-dropzone.scss b/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_file-asset-dropzone.scss new file mode 100644 index 000000000000..ed181874c79a --- /dev/null +++ b/core-web/libs/dojo-theme/scss/backend/dot-admin/components/_file-asset-dropzone.scss @@ -0,0 +1,13 @@ +.file-asset-container { + position: relative; +} + +.file-asset__drop-zone { + width: 100%; + height: 100%; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0px; +} diff --git a/core-web/libs/dotcms-webcomponents/project.json b/core-web/libs/dotcms-webcomponents/project.json index 32efe222aeb6..92d3d832737a 100644 --- a/core-web/libs/dotcms-webcomponents/project.json +++ b/core-web/libs/dotcms-webcomponents/project.json @@ -39,6 +39,7 @@ "serve": { "executor": "@nxext/stencil:build", "options": { + "outputPath": "dist/libs/dotcms-webcomponents", "projectType": "library", "configPath": "libs/dotcms-webcomponents/stencil.config.ts", "serve": true, diff --git a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss new file mode 100644 index 000000000000..3208305e6f3e --- /dev/null +++ b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss @@ -0,0 +1,94 @@ +@import "../../global/variables"; + +:host { + @include mwc-dotcms-theme; + + *, + *:after, + *:before { + box-sizing: border-box; + } +} + +dot-file-upload { + mwc-icon { + color: var(--color-grey); + font-size: 24px; + } + + input[type="file"] { + display: none; + } + @mixin box-style($border-style) { + border: 1px $border-style var(--color-main); + border-radius: 4px; + } + .dot-file-upload { + width: 100%; + padding: 16px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + @include box-style(dashed); + } + + .dot-file-upload-drop-message { + mwc-icon { + margin-top: 16px; + } + text-align: center; + p { + margin: 16px 0 8px 0; + font: 400 normal 16px "Roboto"; + color: black; + } + } + + .dot-file-upload-actions { + padding: 16px; + :first-child { + margin-right: 8px; + } + mwc-button { + border: 1.5px solid var(--color-main); + border-radius: 8px; + color: var(--color-main); + } + } + + .dot-file-list { + @include box-style(solid); + margin-top: 10px; + padding: 16px; + .dot-file-list-item { + display: flex; + align-items: center; + margin: 5px; + padding: 14px 16px; + background-color: #f4f4f6; + border-radius: 4px; + :first-child { + margin-right: 8px; + } + :nth-child(2) { + flex-grow: 1; + } + } + + .dot-file-list-cancel-box { + margin-top: 44px; + text-align: right; + } + } + + .dot-file-editor { + @include box-style(solid); + padding: 16px; + + .dot-file-editor-cancel-box { + margin-top: 44px; + text-align: right; + } + } +} diff --git a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js new file mode 100644 index 000000000000..d805a1049d32 --- /dev/null +++ b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js @@ -0,0 +1,29 @@ +import readme from './readme.md'; + +export default { + title: 'Components', + parameters: { + docs: { + page: readme + } + }, + args: { + dropFilesText: 'Drag and Drop or paste a file', + browserButtonText: 'Browse', + writeCodeButtonText: 'Write Code', + cancelButtonText: 'Cancel', + currentState: 'UPLOADFILE' + } +}; + +const Template = (args) => { + const dotFileUpload = document.createElement('dot-file-upload'); + + for (const item in args) { + dotFileUpload[item] = args[item]; + } + + return dotFileUpload; +}; + +export const DotFileUpload = Template.bind({}); diff --git a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx new file mode 100644 index 000000000000..21f4903913a6 --- /dev/null +++ b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx @@ -0,0 +1,128 @@ +import { Component, Host, State, h, Prop, Element, Event, EventEmitter } from '@stencil/core'; +import '@material/mwc-button'; +import '@material/mwc-icon'; + +enum DotFileCurrentStatus { + UPLOADFILE = 'UploadFile', + CODEEDITOR = 'CodeEditor', + FileList = 'FileList' +} + +@Component({ + tag: 'dot-file-upload', + styleUrl: 'dot-file-upload.scss' +}) +export class DotFileUpload { + @Element() el: HTMLElement; + + @State() currentState: DotFileCurrentStatus = DotFileCurrentStatus.UPLOADFILE; + + @Prop() dropFilesText = 'Drag and Drop or paste a file'; + @Prop() browserButtonText = 'Browser'; + @Prop() writeCodeButtonText = 'Write Code'; + @Prop() cancelButtonText = 'Cancel'; + + @Event() fileUploaded: EventEmitter; + + updateCurrentStatus(status: DotFileCurrentStatus) { + this.currentState = status; + } + + fileChangeHandler(event: Event) { + this.fileUploaded.emit(event); + } + getCurrentElement() { + if (this.currentState === DotFileCurrentStatus.UPLOADFILE) { + return ( +
+
+ this.fileChangeHandler(event)} + /> + insert_drive_file +

{this.dropFilesText}

+
+
+ this.fileInput.click()} outlined> + {this.browserButtonText} + + + this.updateCurrentStatus(DotFileCurrentStatus.CODEEDITOR) + } + outlined + > + {this.writeCodeButtonText} + +
+
+ ); + } else if (this.currentState === DotFileCurrentStatus.FileList) { + return ( +
+
+
+ insert_drive_file +
+
File12345
+
+ delete +
+
+ +
+ + this.updateCurrentStatus(DotFileCurrentStatus.UPLOADFILE) + } + outlined + > + {this.cancelButtonText} + +
+
+ ); + } else if (this.currentState === DotFileCurrentStatus.CODEEDITOR) { + return ( +
+ +
+ + this.updateCurrentStatus(DotFileCurrentStatus.UPLOADFILE) + } + outlined + > + {this.cancelButtonText} + +
+
+ ); + } else { + return ( +
+
+ insert_drive_file +

{this.dropFilesText}

+
+
+ {this.browserButtonText} + {this.writeCodeButtonText} +
+
+ ); + } + } + + private fileInput: HTMLInputElement; + + componentDidLoad(): void { + this.fileInput = this.el.querySelector('.dot-file-upload input'); + } + + render() { + return {this.getCurrentElement()}; + } +} diff --git a/core-web/libs/dotcms-webcomponents/src/global/_variables.scss b/core-web/libs/dotcms-webcomponents/src/global/_variables.scss index f9daab8b8cff..1039b3952b90 100644 --- a/core-web/libs/dotcms-webcomponents/src/global/_variables.scss +++ b/core-web/libs/dotcms-webcomponents/src/global/_variables.scss @@ -2,3 +2,7 @@ --mdc-theme-primary: var(--color-main); --mdc-theme-secondary: var(--color-sec); } + +// Border Color + +$border-color: #b3b1b8; diff --git a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css index 797e6bff6428..867111bb91f0 100644 --- a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css +++ b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css @@ -11467,6 +11467,20 @@ a.category_higlighted, a.tag_higlighted { right: 0px; } +.file-asset-container { + position: relative; +} + +.file-asset__drop-zone { + width: 100%; + height: 100%; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0px; +} + #iFrameWrapper { position: absolute; left: 0px; diff --git a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp index 7e63e66457cf..24d62b6e94f7 100644 --- a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp +++ b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp @@ -791,7 +791,20 @@ licenseLevel="<%=LicenseUtil.getLevel() %>" accept="<%=accept %>" > +
+ + +
+ + + + +