You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@sling.apache.org by dk...@apache.org on 2019/12/23 18:02:28 UTC
[sling-org-apache-sling-app-cms] 01/04: Adding title and modified
date to the grid view
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 <dk...@apache.org>
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>