This is an automated email from the ASF dual-hosted git repository. dklco pushed a commit to branch SLING-8947-grid-missing-fields in repository https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
commit 3a94480ac0af97719267c2f0bc56d7be19f81079 Author: Dan Klco <[email protected]> AuthorDate: Fri Dec 20 14:12:51 2019 -0500 Adding title and modified date to the grid view --- ui/src/main/frontend/scss/cms.scss | 212 +++++++++++---------- ui/src/main/frontend/scss/editor.scss | 165 ++++++++-------- .../components/cms/contentgrid/contentgrid.jsp | 56 +++--- 3 files changed, 235 insertions(+), 198 deletions(-) diff --git a/ui/src/main/frontend/scss/cms.scss b/ui/src/main/frontend/scss/cms.scss index 069083d..3991b7f 100644 --- a/ui/src/main/frontend/scss/cms.scss +++ b/ui/src/main/frontend/scss/cms.scss @@ -16,248 +16,260 @@ * specific language governing permissions and limitations * under the License. */ - @import 'fonts'; @import 'overrides'; @import "../../../../node_modules/bulma/bulma.sass"; + body.cms { - min-height: 100vh; - @media screen and (min-width: $tablet), print { - background: url(../img/gradient.jpg) no-repeat; - background-attachment: fixed; - } - @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { - padding-left: 2em; - } + min-height: 100vh; + @media screen and (min-width: $tablet), print { + background: url("../img/gradient.jpg") no-repeat; + background-attachment: fixed; + } + @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { + padding-left: 2em; + } } dl { - padding: 1em 0; + padding: 1em 0; } dd { - padding-left: 1em; + padding-left: 1em; } dt { - font-weight: bold; + font-weight: bold; } h1 { - font-size: 200%; + font-size: 200%; } h2 { - font-size: 180%; + font-size: 180%; } h3 { - font-size: 160%; + font-size: 160%; } h4 { - font-size: 140%; + font-size: 140%; } h5 { - font-size: 120%; + font-size: 120%; } .breadcrumb { - display:flex; - justify-content: space-between; -} + display: flex; + justify-content: space-between; +} .card.is-selected { - border: 1px solid $violet; + border: 1px solid $violet; } .card-footer-item { - word-break: break-all; + word-break: break-all; + display: block; + padding: 0.25em; + text-align: center; +} + +small.card-footer-item { + font-size: 12px; } .container { - height: 100vh; - overflow: hidden; - @media screen and (max-width: $tablet - 1px) { - height: 100%; - overflow: visible; - } + height: 100vh; + overflow: hidden; + @media screen and (max-width: $tablet - 1px) { + height: 100%; + overflow: visible; + } } .contentnav-search { - display: flex; - margin-block-end: 0; + display: flex; + margin-block-end: 0; } .has-padding-1 { - padding: .5em; + padding: 0.5em; } .editor-page { - overflow-y: auto; + overflow-y: auto; } + .file-icon { - font-size: xx-large; + font-size: xx-large; } + .file-label { - text-align: center; + text-align: center; } + .form-wrapper { - border: none; + border: none; } .form-wrapper[disabled] .button, .form-wrapper[disabled] .input, -.form-wrapper[disabled] select, -.form-wrapper[disabled] .textarea { - background-color: #f5f5f5; - border-color: #f5f5f5; - box-shadow: none; - color: #7a7a7a; - cursor: not-allowed; +.form-wrapper[disabled] .textarea, +.form-wrapper[disabled] select { + background-color: #f5f5f5; + border-color: #f5f5f5; + box-shadow: none; + color: #7a7a7a; + cursor: not-allowed; } .is-linked { - cursor: pointer; + cursor: pointer; + border: 1px solid rgba(0,0,0,0); } .is-draggable { - position: relative; + position: relative; } .is-selected .is-linked { - border: 1px solid $primary; + border: 1px solid $primary; } .is-vhidden { - position: absolute !important; - top: -9999px !important; - left: -9999px !important; + position: absolute !important; + top: -9999px !important; + left: -9999px !important; } .loader { - margin: auto; - width: 2em; - height: 2em; - border: 2px solid $primary; - border-right-color: transparent; - border-top-color: transparent; + margin: auto; + width: 2em; + height: 2em; + border: 2px solid $primary; + border-right-color: transparent; + border-top-color: transparent; } .menu { - overflow: auto; + overflow: auto; } .menu-label { - text-transform: none; - font-size: 1.25em; - letter-spacing: normal; - display: block; - padding: .25em 0; - color: #363636; + text-transform: none; + font-size: 1.25em; + letter-spacing: normal; + display: block; + padding: 0.25em 0; + color: #363636; } .menu-label:not(:last-child) { - margin: 0; + margin: 0; } .note-group-select-from-files { - display: none; + display: none; } .note-toolbar-wrapper { - height: auto !important; + height: auto !important; } .fixed-box { - max-height: 200px; - overflow: auto; + max-height: 200px; + overflow: auto; } .preview { - max-width: 100%; - padding: 1em; + max-width: 100%; + padding: 1em; } .rte-form { - margin: .5em 0; + margin: 0.5em 0; } .rte-form .buttons { - margin: .5em 0; + margin: 0.5em 0; } .rte-toolbar .jam:before { - font-size: x-large; + font-size: x-large; } .rte-toolbar .level { - margin-bottom: .5em; + margin-bottom: 0.5em; } .scroll-container { - overflow-y: auto; - height: calc(100vh - 205px); - overflow-x: hidden; - padding: 2px; - @media screen and (max-width: $tablet - 1px) { - height: 100%; - overflow: visible; - padding: 0px; - } + overflow-y: auto; + height: calc(100vh - 205px); + overflow-x: hidden; + padding: 2px; + @media screen and (max-width: $tablet - 1px) { + height: 100%; + overflow: visible; + padding: 0; + } } .scroll-container .scroll-container { - height: auto; - overflow: visible; - padding: 0px; + height: auto; + overflow: visible; + padding: 0; } .scroll-container > .is-ancestor { - flex-wrap: wrap; + flex-wrap: wrap; } #search-results .box { - overflow: hidden; + overflow: hidden; } #search-results .tile { - flex-wrap: wrap; - padding: .5em; + flex-wrap: wrap; + padding: 0.5em; } .table__wrapper { - overflow: auto; + overflow: auto; } table thead .sorting:after, table thead .sorting_asc:after, -table thead .sorting_desc:after, table thead .sorting_asc_disabled:after, +table thead .sorting_desc:after, table thead .sorting_desc_disabled:after { - font-family: 'jam-icons'; + font-family: 'jam-icons'; } table thead .sorting:after { - content: "\e943" + content: "\e943"; } table thead .sorting_asc:after { - content: "\e93f" + content: "\e93f"; } table thead .sorting_desc:after { - content: "\e92a" + content: "\e92a"; } -.table tr.is-selected, .menu .is-selected { - background-color: lighten($gray, 50%); - color: $grey-darker; +.menu .is-selected, +.table tr.is-selected { + background-color: lighten($gray, 50%); + color: $grey-darker; } .wysihtml-sandbox { - width: 100% !important; - max-height: 600px !important; - min-height: 300px !important; + width: 100% !important; + max-height: 600px !important; + min-height: 300px !important; } diff --git a/ui/src/main/frontend/scss/editor.scss b/ui/src/main/frontend/scss/editor.scss index 1722697..cd26fb9 100644 --- a/ui/src/main/frontend/scss/editor.scss +++ b/ui/src/main/frontend/scss/editor.scss @@ -17,89 +17,102 @@ * under the License. */ .sling-cms-editor { - @import 'fonts'; - @import 'overrides'; - @import "../../../../node_modules/bulma/sass/utilities/_all.sass"; - @import "../../../../node_modules/bulma/sass/base/_all.sass"; - @import "../../../../node_modules/bulma/sass/elements/box.sass"; - @import "../../../../node_modules/bulma/sass/elements/button.sass"; - @import "../../../../node_modules/bulma/sass/form/_all.sass"; - @import "../../../../node_modules/bulma/sass/elements/icon.sass"; - @import "../../../../node_modules/bulma/sass/components/level.sass"; - @import "../../../../node_modules/bulma/sass/components/modal.sass"; - font-family: "Open Sans",sans-serif; - * { - box-sizing: border-box; - } - [draggable] { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; - /* Required to make elements draggable in old WebKit */ - -khtml-user-drag: element; - -webkit-user-drag: element; - } - .is-draggable { - position: relative; - } - .is-vhidden { - position: absolute !important; - top: -9999px !important; - left: -9999px !important; - } - .level { - padding: .5em; - } - .modal-body { - padding: .5em; - height: 500px; - } - .modal-frame { - width: 100%; - height: 100%; - border: none; - } - .modal-title { - font-size: 180%; - cursor: move; - } - .page-wrapper-frame { - position: fixed; - top: 44px; - left: 0px; - bottom: 0px; - right: 0px; - width: 100%; - height: 100%; - border: none; - margin: 0; - padding: 0; - padding-top: 0px; - overflow: hidden; - z-index: 998; - padding-top: 8px; - @media screen and (max-width: $tablet) { - top: 104px; - } - } - .sling-cms-logo { - height: 25px; + @import 'fonts'; + @import 'overrides'; + @import "../../../../node_modules/bulma/sass/utilities/_all.sass"; + @import "../../../../node_modules/bulma/sass/base/_all.sass"; + @import "../../../../node_modules/bulma/sass/elements/box.sass"; + @import "../../../../node_modules/bulma/sass/elements/button.sass"; + @import "../../../../node_modules/bulma/sass/form/_all.sass"; + @import "../../../../node_modules/bulma/sass/elements/icon.sass"; + @import "../../../../node_modules/bulma/sass/components/level.sass"; + @import "../../../../node_modules/bulma/sass/components/modal.sass"; + font-family: "Open Sans",sans-serif; + + * { + box-sizing: border-box; + } + + [draggable] { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + /* Required to make elements draggable in old WebKit */ + -khtml-user-drag: element; + -webkit-user-drag: element; + } + + .is-draggable { + position: relative; + } + + .is-vhidden { + position: absolute !important; + top: -9999px !important; + left: -9999px !important; + } + + .level { + padding: 0.5em; + } + + .modal-body { + padding: 0.5em; + height: 500px; + } + + .modal-frame { + width: 100%; + height: 100%; + border: none; + } + + .modal-title { + font-size: 180%; + cursor: move; + } + + .page-wrapper-frame { + position: fixed; + top: 44px; + left: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + border: none; + margin: 0; + padding: 0; + overflow: hidden; + z-index: 998; + padding-top: 8px; + @media screen and (max-width: $tablet) { + top: 104px; } + } + + .sling-cms-logo { + height: 25px; + } } + .sling-cms-component { - border: 1px solid rgba(0,0,0,0.0); + border: 1px solid rgba(0,0,0,0.0); } + .sling-cms-component__is-active { - border-color: hsl(0, 0%, 86%); + border-color: hsl(0, 0%, 86%); } + .sling-cms-droptarget__is-active { - height: 2em; - border: 1px solid hsl(0, 0%, 71%); - background-color: hsl(0, 0%, 96%); + height: 2em; + border: 1px solid hsl(0, 0%, 71%); + background-color: hsl(0, 0%, 96%); } + .sling-cms-droptarget__is-over { - height: 2em; - border: 1px solid hsl(0, 0%, 96%); - background-color: hsl(0, 0%, 71%); + height: 2em; + border: 1px solid hsl(0, 0%, 96%); + background-color: hsl(0, 0%, 71%); } diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp index afa41bd..c99214a 100644 --- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp +++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/contentgrid/contentgrid.jsp @@ -29,7 +29,7 @@ <c:if test="${showCard}"> <div class="tile is-parent is-3 contentnav__item"> <div class="tile is-child"> - <div class="card is-linked " data-value="${child.path}"> + <div class="card is-linked" title="${sling:encode(child.name,'HTML_ATTR')}" data-value="${child.path}"> <div class="card-image"> <figure class="image is-5by4"> <c:choose> @@ -60,7 +60,7 @@ </figure> <div class="is-vhidden cell-actions"> <sling:getResource base="${resource}" path="types/${child.valueMap['jcr:primaryType']}/columns/actions" var="colConfig" /> - + <c:forEach var="actionConfig" items="${sling:listChildren(colConfig)}"> <c:choose> <c:when test="${actionConfig.valueMap.modal}"> @@ -83,35 +83,47 @@ </c:otherwise> </c:choose> </c:forEach> - - <c:choose> - <c:when test="${sling:getRelativeResource(child,'jcr:content').valueMap.published}"> - <a class="button Fetch-Modal" href="/cms/shared/unpublish.html${child.path}" title="Content Published" data-title="Unpublish" data-path=".Main-Content form"> - <i class="jam jam-check"> - <span class="is-vhidden">Content Published</span> - </i> - </a> - </c:when> - <c:otherwise> - <a class="button Fetch-Modal" href="/cms/shared/publish.html${child.path}" title="Content Not Published" data-title="Publish" data-path=".Main-Content form"> - <i class="jam jam-close"> - <span class="is-vhidden">Content Not Published</span> - </i> - </a> - </c:otherwise> - </c:choose> </div> </div> <footer class="card-footer"> <sling:getResource base="${resource}" path="types/${child.valueMap['jcr:primaryType']}/columns/name" var="nameConfig" /> <c:choose> - <c:when test="${child.resourceType == 'sling:Site' || child.resourceType == 'sling:OrderedFolder' || child.resourceType == 'sling:Folder' || child.resourceType == 'nt:folder' || child.resourceType == 'sling:Page'}"> - <a href="${nameConfig.valueMap.prefix}${child.path}" class="card-footer-item item-link">${child.name}</a> + <c:when test="${not empty child.valueMap['jcr:content/jcr:title']}"> + <c:set var="title" value="${child.valueMap['jcr:content/jcr:title']}" /> </c:when> <c:otherwise> - <span class="card-footer-item">${child.name}</span> + <c:set var="title" value="${child.name}" /> </c:otherwise> </c:choose> + <div class="card-footer-item"> + <c:choose> + <c:when test="${child.resourceType == 'sling:Site' || child.resourceType == 'sling:OrderedFolder' || child.resourceType == 'sling:Folder' || child.resourceType == 'nt:folder' || child.resourceType == 'sling:Page'}"> + <a href="${nameConfig.valueMap.prefix}${child.path}" class="item-link">${sling:encode(title,'HTML')}</a><br/> + </c:when> + <c:otherwise> + ${sling:encode(title,'HTML')}<br/> + </c:otherwise> + </c:choose> + <small> + <c:choose> + <c:when test="${sling:getRelativeResource(child,'jcr:content').valueMap.published}"> + <a class="Fetch-Modal has-text-success" href="/cms/shared/unpublish.html${child.path}" title="Content Published" data-title="Unpublish" data-path=".Main-Content form"> + <i class="jam jam-check"> + <span class="is-vhidden">Content Published</span> + </i> + </a> + </c:when> + <c:otherwise> + <a class="has-text-warning Fetch-Modal" href="/cms/shared/publish.html${child.path}" title="Content Not Published" data-title="Publish" data-path=".Main-Content form"> + <i class="jam jam-close"> + <span class="is-vhidden">Content Not Published</span> + </i> + </a> + </c:otherwise> + </c:choose> + <fmt:formatDate type="both" dateStyle="long" timeStyle="long" value = "${child.valueMap['jcr:content/jcr:lastModified'].time}" /> + </small> + </div> </footer> </div> </div>
