[Rt-commit] rt branch, 4.6-theme-trunk, updated. rt-4.4.4-175-gd3c438a8c

? sunnavy sunnavy at bestpractical.com
Fri Apr 5 16:11:43 EDT 2019


The branch, 4.6-theme-trunk has been updated
       via  d3c438a8c8b01aec0d3d406740d2d349819c2d03 (commit)
      from  65a2b8e72b4cb760d68fd77a8408dc55fd0452d7 (commit)

Summary of changes:
 share/html/Ticket/Elements/DelayShowHistory |   2 +-
 share/html/Ticket/Update.html               |   4 +-
 share/html/Widgets/TitleBoxEnd              |   1 +
 share/html/Widgets/TitleBoxStart            |  13 +++-
 share/static/css/base-responsive/ticket.css |  14 ----
 share/static/css/elevator-light/boxes.css   | 105 +++++++++++--------------
 share/static/css/elevator-light/ticket.css  | 114 ----------------------------
 share/static/js/titlebox-state.js           |  14 +++-
 share/static/js/util.js                     |  12 +++
 9 files changed, 80 insertions(+), 199 deletions(-)

- Log -----------------------------------------------------------------
commit d3c438a8c8b01aec0d3d406740d2d349819c2d03
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Fri Apr 5 12:36:50 2019 +0800

    Switch to bootstrap card for titleboxes
    
    As old themes stick to old rollup implementation, we need a convenient
    way in js to distinguish new themes from old ones. For now, we check if
    jQuery(e).collapse is defined, and to make it really work, we need to
    exclude bootstrap js library from old themes, which will be in a
    separate commit.

diff --git a/share/html/Ticket/Elements/DelayShowHistory b/share/html/Ticket/Elements/DelayShowHistory
index d6eccd1c3..7c181235a 100644
--- a/share/html/Ticket/Elements/DelayShowHistory
+++ b/share/html/Ticket/Elements/DelayShowHistory
@@ -60,7 +60,7 @@ jQuery(function(){
                 window.location.hash = "";  // trick the browser into a "change"
                 window.location.hash = hash;
             }
-        });
+        }).css('display', ''); // Remove display style so card's collapse mechanism could work
     });
 });
 </script>
diff --git a/share/html/Ticket/Update.html b/share/html/Ticket/Update.html
index 5216a402f..4169b8003 100644
--- a/share/html/Ticket/Update.html
+++ b/share/html/Ticket/Update.html
@@ -219,7 +219,7 @@ jQuery( function() {
 
        var payload = jQuery('form[name=TicketUpdate]').serializeArray();
 
-       jQuery('#recipients div.titlebox-content').load( '<% RT->Config->Get('WebPath')%>/Helpers/ShowSimplifiedRecipients',
+       jQuery('#recipients div.titlebox-content div.card-body').load( '<% RT->Config->Get('WebPath')%>/Helpers/ShowSimplifiedRecipients',
            payload,
            function() {
                jQuery('#recipients div.titlebox-content').removeClass('refreshing');
@@ -233,7 +233,7 @@ jQuery( function() {
            }
        );
 
-       jQuery('#previewscrips div.titlebox-content').load( '<% RT->Config->Get('WebPath')%>/Helpers/PreviewScrips',
+       jQuery('#previewscrips div.titlebox-content div.card-body').load( '<% RT->Config->Get('WebPath')%>/Helpers/PreviewScrips',
            payload,
            function() {
                jQuery('#previewscrips div.titlebox-content').removeClass('refreshing');
diff --git a/share/html/Widgets/TitleBoxEnd b/share/html/Widgets/TitleBoxEnd
index 843443ddd..3a03826a7 100644
--- a/share/html/Widgets/TitleBoxEnd
+++ b/share/html/Widgets/TitleBoxEnd
@@ -46,6 +46,7 @@
 %#
 %# END BPS TAGGED BLOCK }}}
     <hr class="clear" />
+    </div>
   </div>
 </div>
 
diff --git a/share/html/Widgets/TitleBoxStart b/share/html/Widgets/TitleBoxStart
index 723cb057d..2d7935bb4 100644
--- a/share/html/Widgets/TitleBoxStart
+++ b/share/html/Widgets/TitleBoxStart
@@ -45,10 +45,14 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="titlebox<% $class ? " $class " : '' %><% $rolledup ? " rolled-up" : ""%>" id="<% $id %>">
-  <div class="titlebox-title<% $title_class ? " $title_class" : ''%>">
+<div class="titlebox card<% $class ? " $class " : '' %><% $rolledup ? " rolled-up" : ""%>" id="<% $id %>">
+  <div class="titlebox-title card-header<% $title_class ? " $title_class" : ''%>">
 % if ($hideable) {
-    <span class="widget"><a href="#" onclick="return rollup(<%$tid|n,j%>);" title="Toggle visibility"></a></span>
+% if ( RT->Config->Get('WebDefaultStylesheet', $session{CurrentUser}) =~ /^elevator-/ ) {
+    <span class="toggle <% $rolledup ? " collapsed" : ""%>" data-toggle="collapse" data-target="#<%$tid|n%>" title="<% loc('Toggle visibility') %>"></span>
+% } else {
+    <span class="widget"><a href="#" onclick="return rollup(<%$tid|n,j%>);" title="<% loc('Toggle visibility') %>"></a></span>
+% }
 % }
     <span class="left"><%
             $title_href ? qq[<a href="$title_href">] : '' | n
@@ -58,7 +62,8 @@
         <% $titleright  %><% $titleright_raw |n%><% $titleright_href ? "</a>" : '' |n%>\
     </span>
   </div>
-  <div class="titlebox-content <% $bodyclass %><% $rolledup ? " hidden" : ""%>" id="<% $tid %>">
+  <div class="titlebox-content collapse<% $bodyclass %><% $rolledup ? " hidden" : " show"%>" id="<% $tid %>">
+    <div class="card-body">
 <%ARGS>
 $class => ''
 $bodyclass => ''
diff --git a/share/static/css/base-responsive/ticket.css b/share/static/css/base-responsive/ticket.css
index e3ab273cb..059b8f998 100644
--- a/share/static/css/base-responsive/ticket.css
+++ b/share/static/css/base-responsive/ticket.css
@@ -64,20 +64,6 @@
     font-style: normal;
 }
 
-/* Color the titlebox tabs */
-.ticket-info-cfs .titlebox .titlebox-title .left { background-color: #b32; color: #fff;}
-.ticket-info-basics .titlebox .titlebox-title .left { background-color: #b32;  color: #fff;}
-.ticket-info-people .titlebox .titlebox-title .left { background-color: #48c;  color: #fff;}
-.ticket-info-requestor .titlebox .titlebox-title .left { white-space: nowrap; background-color: #48c;  color: #fff;}
-.ticket-info-links .titlebox .titlebox-title .left { background-color: #316531;  color: #fff;}
-.ticket-info-merge .titlebox .titlebox-title .left { background-color: #8b4513;  color: #fff;}
-.ticket-info-reminders .titlebox .titlebox-title .left { background-color: #369;  color: #fff;}
-.ticket-info-dates .titlebox .titlebox-title .left { background-color: #633063;  color: #fff;}
-.ticket-info-attachments .titlebox .titlebox-title .left { background-color: #993366;  color: #fff;}
-.ticket-info-generic .titlebox .titlebox-title .left { background-color: #547ccc;  color: #fff;}
-
-.ticket-summary .titlebox .titlebox-title .left a, .ticket-summary .titlebox .titlebox-title .left a:visited { color: #fff;}
-
 .unread-messages .titlebox-content :link {
     text-decoration: underline;
 }
diff --git a/share/static/css/elevator-light/boxes.css b/share/static/css/elevator-light/boxes.css
index 21948f959..29d33e4b8 100644
--- a/share/static/css/elevator-light/boxes.css
+++ b/share/static/css/elevator-light/boxes.css
@@ -3,36 +3,6 @@
     margin-bottom: 2em;
 }
 
-.titlebox .titlebox-content {
-    padding: 1em;
-    border-top: 2px solid #aaa;
-    border-bottom: 1px solid #eee;
-}
-
-.titlebox.fullwidth > .titlebox-content {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-* html .titlebox {
-    border-top: none;
-    border-left: none;
-}
-
-.titlebox .titlebox {
-    margin-top: 1em;
-}
-
-.titlebox .titlebox .titlebox-content {
-
-}
-
-.titlebox {
-    margin-left: 0em;
-    margin-right: 0em;
-    min-height: 1.25em;
-}
-
 .titlebox .titlebox-title {
     position: relative;
     background-color: transparent;
@@ -47,24 +17,9 @@
     text-decoration: underline
 }
 
-.titlebox.rolled-up  .titlebox-title .left,
-.titlebox.rolled-up  .titlebox-title .left a {
-    color: #ccc;
-    line-height: 1.6em;
-}
-
-.titlebox.rolled-up .titlebox-title {
-    border-bottom: 1px solid #ccc
-}
-
-.titlebox.rolled-up .titlebox-title .right {
-    display: none
-}
-
 .titlebox .titlebox-title .left {
     font-weight: bold;
     background: transparent;
-    margin-left: 1em;
     padding: 0.5em 1.25em 0.25em 1.25em;
     line-height: 1.4em;
     font-size: 1.1em;
@@ -109,23 +64,6 @@
     color: #000
 }
 
-.titlebox .titlebox-title .widget a {
-    display: block;
-    margin: 0;
-    width: 20px;
-    background: url(../../../static/images/css/rollup-arrow.gif) no-repeat;
-    background-position: center 0;
-    position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-    padding: 7px 0 0 0;
-    overflow: hidden;
-}
-
-.titlebox.rolled-up .titlebox-title .widget a {
-    background-image: url(../../../static/images/css/rolldown-arrow.gif)
-}
-
 div.results .titlebox .titlebox-content {
     border: none;
     -moz-border-radius: 0.5em;
@@ -143,3 +81,46 @@ div.results .titlebox .titlebox-content {
 .results .titlebox-title {
     display: none
 }
+
+.results .card-body {
+    padding: 0;
+}
+
+.titlebox .titlebox-content,
+.titlebox .card-header {
+    border: none;
+}
+
+.titlebox .card-header {
+    font-size: larger;
+}
+
+.titlebox .card-body {
+    padding-top: 0;
+}
+
+.titlebox .card-header span.toggle:hover {
+    cursor: pointer;
+}
+
+.titlebox .card-header span.toggle:before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin-right: 15px;
+    border: solid #B0B3BC;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(-135deg);
+    -ms-transform: rotate(-135deg);
+    transform: rotate(-135deg);
+    transition: transform .25s;
+    position: absolute;
+    top: 1.2em;
+}
+
+.titlebox .card-header span.toggle.collapsed:before {
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
diff --git a/share/static/css/elevator-light/ticket.css b/share/static/css/elevator-light/ticket.css
index 56acd9511..e69de29bb 100644
--- a/share/static/css/elevator-light/ticket.css
+++ b/share/static/css/elevator-light/ticket.css
@@ -1,114 +0,0 @@
-.titlebox-title.inverse .widget a,
-.ticket-info-cfs .titlebox-title .widget a,
-.ticket-info-basics .titlebox-title .widget a,
-.ticket-info-people .titlebox-title .widget a,
-.ticket-info-requestor .titlebox-title .widget a,
-.ticket-info-links .titlebox-title .widget a,
-.ticket-info-merge .titlebox-title .widget a,
-.ticket-info-reminders .titlebox-title .widget a,
-.ticket-info-dates .titlebox-title .widget a,
-.ticket-info-attachments .titlebox-title .widget a {
-    background-position: center -7px
-}
-
-.titlebox-title.inverse,
-.ticket-info-cfs .titlebox-title,
-.ticket-info-basics .titlebox-title,
-.ticket-info-people .titlebox-title,
-.ticket-info-requestor .titlebox-title,
-.ticket-info-links .titlebox-title,
-.ticket-info-merge .titlebox-title,
-.ticket-info-reminders .titlebox-title,
-.ticket-info-dates .titlebox-title,
-.ticket-info-attachments .titlebox-title {
-    margin-left: 1em
-}
-
-.titlebox-title.inverse  .left,
-.ticket-info-cfs .titlebox-title  .left,
-.ticket-info-basics .titlebox-title  .left,
-.ticket-info-people .titlebox-title  .left,
-.ticket-info-requestor .titlebox-title  .left,
-.ticket-info-links .titlebox-title  .left,
-.ticket-info-merge .titlebox-title  .left,
-.ticket-info-reminders .titlebox-title  .left,
-.ticket-info-dates .titlebox-title  .left,
-.ticket-info-attachments .titlebox-title  .left {
-    padding-left: 2.25em;
-    margin-left: 0;
-    padding-bottom: 4px;
-    margin-bottom: 8px;
-    -webkit-border-top-left-radius: 0.3em;
-    -webkit-border-top-right-radius: 0.3em;
-    -moz-border-radius-topleft: 0.3em;
-    -moz-border-radius-topright: 0.3em;
-    border-radius: 0.3em 0.3em 0 0;
-}
-
-.titlebox-title.inverse .left,
-.titlebox-title.inverse .left a {
-    color: #fff;
-}
-
-.titlebox.ticket-info-reminders table {
-    width: 100%
-}
-
-.titlebox.ticket-info-reminders table form {
-    display: inline-block;
-    width: 100%;
-}
-
- at media (max-width: 800px) {
-    .messagedetails .fields,
-    .messagedetails .fields .field,
-    .messagedetails .fields .field .label,
-    .messagedetails .fields .field .value {
-        display: block;
-    }
-
-    .messagedetails .fields .field .label {
-        text-align: left;
-    }
-
-    .messagedetails .fields .field + .field {
-        margin-top: 1em;
-    }
-
-    .messagedetails .fields .label.empty {
-        display: none;
-    }
-}
-
-/* don't put a background on the outer titlebox */
-
-.summary>div>.titlebox>.titlebox-content {
-    background: none
-}
-
-tr.edit-custom-field.cftype-IPAddress input,
-tr.edit-custom-field.cftype-IPAddressRange input {
-    width: 24em;
-}
-
-tr.edit-custom-field.cftype-IPAddress textarea,
-tr.edit-custom-field.cftype-IPAddressRange textarea {
-    width: 24em;
-}
-
-#requestor-accordion .details {
-    margin-left: 0;
-    padding-left: 0;
-}
-
-#requestor-accordion .user-summary {
-    margin-right: 1em;
-}
-
-#requestor-accordion .details .comments-about-user,
-#requestor-accordion .details .ui-tabs-nav,
-#requestor-accordion .details .ui-tabs-panel .label,
-#requestor-accordion .details .more-about-user-groups {
-    margin-left: 1em;
-    margin-right: 1em;
-}
diff --git a/share/static/js/titlebox-state.js b/share/static/js/titlebox-state.js
index d4053390b..6289d17a6 100644
--- a/share/static/js/titlebox-state.js
+++ b/share/static/js/titlebox-state.js
@@ -25,10 +25,20 @@ function loadTitleBoxStates() {
                 var e2  = e.parentNode;
     
                 if (c[1] != 0) {
-                    set_rollup_state(e,e2,'shown');
+                    if ( jQuery(e).collapse ) {
+                        jQuery(e).collapse('show');
+                    }
+                    else {
+                        set_rollup_state(e,e2,'shown');
+                    }
                 }
                 else {
-                    set_rollup_state(e,e2,'hidden');
+                    if ( jQuery(e).collapse ) {
+                        jQuery(e).collapse('hide');
+                    }
+                    else {
+                        set_rollup_state(e,e2,'hidden');
+                    }
                 }
             }
         }
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 98f9f08b7..3f0a99c3a 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -574,6 +574,18 @@ jQuery(function() {
             showModal
         );
     });
+
+    jQuery(".card .toggle").each(function() {
+        var e = jQuery(jQuery(this).attr('data-target'));
+        e.on('hide.bs.collapse', function () {
+            createCookie(e.attr('id'),0,365);
+            e.closest('div.titlebox').find('div.card-header span.right').addClass('invisible');
+        });
+        e.on('show.bs.collapse', function () {
+            createCookie(e.attr('id'),1,365);
+            e.closest('div.titlebox').find('div.card-header span.right').removeClass('invisible');
+        });
+    });
 });
 
 // focus jquery object in window, only moving the screen when necessary

-----------------------------------------------------------------------


More information about the rt-commit mailing list