Ticket #3628 - Timeline: Remove gray line and everything related to it.

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -1649,6 +1649,8 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                     }
         }
 
+        $sIcon = !empty($aEvent['icon']) ? $aEvent['icon'] : $CNF['ICON'];
+
         $aTmplVars = array (
             'style_prefix' => $sStylePrefix,
             'js_object' => $sJsObject,
@@ -1665,7 +1667,7 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                 'condition' => $bTmplVarsOwnerActions,
                 'content' => $aTmplVarsOwnerActions
             ),
-            'item_icon' => !empty($aEvent['icon']) ? $aEvent['icon'] : $CNF['ICON'],
+            'item_icon' => $sIcon,
             'item_owner_url' => $sAuthorUrl,
             'item_owner_title' => bx_html_attribute($sAuthorName),
             'item_owner_name' => $sAuthorName .' '. $sAuthorBadges,
@@ -1698,6 +1700,7 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                 'condition' => $this->_oConfig->isSystem($aEvent['type'], $aEvent['action']) || $bTmplVarsTimelineOwner,
                 'content' => array(
                     'style_prefix' => $sStylePrefix,
+                    'item_icon' => $sIcon,
                     'item_owner_action' => $sAuthorAction,
                     'bx_if:show_timeline_owner' => array(
                         'condition' => $bTmplVarsTimelineOwner,

modules/boonex/timeline/install/sql/enable.sql

@@ -205,10 +205,10 @@ INSERT INTO `sys_menu_sets`(`set_name`, `module`, `title`, `deletable`) VALUES
 ('bx_timeline_menu_item_counters', 'bx_timeline', '_bx_timeline_menu_set_title_item_counters', 0);
 
 INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `submenu_object`, `submenu_popup`, `visible_for_levels`, `active`, `copyable`, `editable`, `order`) VALUES
-('bx_timeline_menu_item_counters', 'bx_timeline', 'item-vote', '_bx_timeline_menu_item_title_system_item_vote', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 0, 0, 1, 0),
-('bx_timeline_menu_item_counters', 'bx_timeline', 'item-reaction', '_bx_timeline_menu_item_title_system_item_reaction', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 1, 0, 1, 10),
-('bx_timeline_menu_item_counters', 'bx_timeline', 'item-score', '_bx_timeline_menu_item_title_system_item_score', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 0, 0, 1, 20),
-('bx_timeline_menu_item_counters', 'bx_timeline', 'item-view', '_bx_timeline_menu_item_title_system_item_view', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 0, 0, 1, 30),
+('bx_timeline_menu_item_counters', 'bx_timeline', 'item-view', '_bx_timeline_menu_item_title_system_item_view', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 0, 0, 1, 0),
+('bx_timeline_menu_item_counters', 'bx_timeline', 'item-vote', '_bx_timeline_menu_item_title_system_item_vote', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 0, 0, 1, 10),
+('bx_timeline_menu_item_counters', 'bx_timeline', 'item-reaction', '_bx_timeline_menu_item_title_system_item_reaction', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 1, 0, 1, 20),
+('bx_timeline_menu_item_counters', 'bx_timeline', 'item-score', '_bx_timeline_menu_item_title_system_item_score', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 0, 0, 1, 30),
 ('bx_timeline_menu_item_counters', 'bx_timeline', 'item-comment', '_bx_timeline_menu_item_title_system_item_comment', '', 'javascript:void(0)', '', '', '', '', '', 0, 2147483647, 1, 0, 1, 40);
 
 -- MENU: Item Meta Info

modules/boonex/timeline/js/view.js

@@ -68,9 +68,6 @@ BxTimelineView.prototype.init = function(bForceInit)
         //-- Check content to show 'See More'
         this.initSeeMore(this.oView, true);
 
-        //--- Hide timeline Events which are outside the viewport
-        this.hideEvents(this.oView.find('.' + this.sClassItem), this._fOutsideOffset);
-
         //--- Init Video Autoplay
         if(this._sVideosAutoplay != 'off') {
             this.initVideosAutoplay(this.oView);
@@ -270,59 +267,6 @@ BxTimelineView.prototype.initVideosAutoplay = function(oParent)
     });
 };
 
-BxTimelineView.prototype.hideEvents = function(oEvents, fOffset)
-{
-    var $this = this;
-
-    oEvents.each(function(iIndex, oEvent) {
-        $this.hideEvent($(oEvent), fOffset, iIndex, false);
-    });
-
-    //--- on scolling, show/animate timeline Events when enter the viewport
-    $(window).on('scroll', function() {
-        if(!window.requestAnimationFrame) 
-            setTimeout(function() {
-                $this.showEvents(oEvents, $this._fOutsideOffset);
-            }, 100);
-        else
-            window.requestAnimationFrame(function() {
-                $this.showEvents(oEvents, $this._fOutsideOffset);
-            });
-    });
-};
-
-BxTimelineView.prototype.hideEvent = function(oEvent, fOffset, iIndex, bInitAutoShow)
-{
-    var $this = this;
-
-    iIndex >=3 && oEvent.offset().top > ($(window).scrollTop() + $(window).height() * fOffset) && oEvent.find('.bx-tl-item-type, .bx-tl-item-cnt').addClass('is-hidden');
-
-    if(bInitAutoShow)
-        $(window).on('scroll', function() {
-            if(!window.requestAnimationFrame) 
-                setTimeout(function() {
-                    $this.showEvent(oEvent, $this._fOutsideOffset);
-                }, 100);
-            else
-                window.requestAnimationFrame(function() {
-                    $this.showEvent(oEvent, $this._fOutsideOffset);
-                });
-        });
-};
-
-BxTimelineView.prototype.showEvents = function(oEvents, fOffset)
-{
-    var $this = this;
-    oEvents.each(function() {
-        $this.showEvent($(this), fOffset);
-    });
-};
-
-BxTimelineView.prototype.showEvent = function(oEvent, fOffset)
-{
-    oEvent.offset().top <= ($(window).scrollTop() + $(window).height() * fOffset) && oEvent.find('.bx-tl-item-type').hasClass('is-hidden') && oEvent.find('.bx-tl-item-type, .bx-tl-item-cnt').removeClass('is-hidden').addClass('bounce-in');
-};
-
 BxTimelineView.prototype.autoplayVideos = function(oView, fOffsetStart, fOffsetStop)
 {
     var $this = this;

modules/boonex/timeline/template/css/view-media-desktop.css

@@ -1,4 +1,3 @@
-
 /*--- View Block Style ---*/
 .bx-media-desktop .bx-tl-grid-sizer {
     width: 33.3%;
@@ -20,233 +19,4 @@
 }
 .bx-media-desktop .bx-layout-column-thin .bx-tl-grid-item-sizer {
     width: 100%;
-}
-
-/*--- Timeline Item Style ---*/
-.bx-media-desktop div.bx-tl-view-timeline div.bx-tl-item-cnt {
-    position: relative;
-
-    margin: 0px 0px 0px 48px;
-    margin: 0px 0px 0px 3.0rem;
-}
-.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-items::before {
-    left: 50%;
-    margin-left: -2px;
-} 
-.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item div.bx-tl-item-type {
-    left: 50%;
-    margin-left: -16px;
-} 
-.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item div.bx-tl-item-cnt {
-    width: 45%;
-}
-.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item:nth-child(2n + 1) div.bx-tl-item-cnt {
-    margin: 0px 48px 0px 0p;
-    margin: 0px 3.0rem 0px 0px;
-}
-.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item:nth-child(2n) div.bx-tl-item-cnt {
-    float: right;
-
-    margin: 0px 0px 0px 48px;
-    margin: 0px 0px 0px 3.0rem;
-}
-
-/*--- Animation ---*/
-.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-type.is-hidden {
-    visibility: hidden;
-}
-.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-type.bounce-in {
-    visibility: visible;
-    -webkit-animation: cd-bounce-1 0.6s;
-    -moz-animation: cd-bounce-1 0.6s;
-    animation: cd-bounce-1 0.6s;
-}
-.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-cnt.is-hidden {
-    visibility: hidden;
-}
-.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-cnt.bounce-in {
-    visibility: visible;
-    -webkit-animation: cd-bounce-2 0.6s;
-    -moz-animation: cd-bounce-2 0.6s;
-    animation: cd-bounce-2 0.6s;
-}
-/* inverse bounce effect on even content blocks */
-.bx-media-desktop.cssanimations .bx-layout-column-fullwidth div.bx-tl-view-timeline .bx-tl-item:nth-child(even) .bx-tl-item-cnt.bounce-in {
-    -webkit-animation: cd-bounce-2-inverse 0.6s;
-    -moz-animation: cd-bounce-2-inverse 0.6s;
-    animation: cd-bounce-2-inverse 0.6s;
-}
-
-/*--- Animation ---*/
-@-webkit-keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(1.2);
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-  }
-}
-@-moz-keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -moz-transform: scale(0.5);
-  }
-
-  60% {
-    opacity: 1;
-    -moz-transform: scale(1.2);
-  }
-
-  100% {
-    -moz-transform: scale(1);
-  }
-}
-@keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    -moz-transform: scale(0.5);
-    -ms-transform: scale(0.5);
-    -o-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(1.2);
-    -moz-transform: scale(1.2);
-    -ms-transform: scale(1.2);
-    -o-transform: scale(1.2);
-    transform: scale(1.2);
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@-webkit-keyframes cd-bounce-2 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(20px);
-  }
-
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-@-moz-keyframes cd-bounce-2 {
-  0% {
-    opacity: 0;
-    -moz-transform: translateX(-100px);
-  }
-
-  60% {
-    opacity: 1;
-    -moz-transform: translateX(20px);
-  }
-
-  100% {
-    -moz-transform: translateX(0);
-  }
-}
-@keyframes cd-bounce-2 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100px);
-    -moz-transform: translateX(-100px);
-    -ms-transform: translateX(-100px);
-    -o-transform: translateX(-100px);
-    transform: translateX(-100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(20px);
-    -moz-transform: translateX(20px);
-    -ms-transform: translateX(20px);
-    -o-transform: translateX(20px);
-    transform: translateX(20px);
-  }
-
-  100% {
-    -webkit-transform: translateX(0);
-    -moz-transform: translateX(0);
-    -ms-transform: translateX(0);
-    -o-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-@-webkit-keyframes cd-bounce-2-inverse {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(-20px);
-  }
-
-  100% {
-    -webkit-transform: translateX(0);
-  }
-}
-@-moz-keyframes cd-bounce-2-inverse {
-  0% {
-    opacity: 0;
-    -moz-transform: translateX(100px);
-  }
-
-  60% {
-    opacity: 1;
-    -moz-transform: translateX(-20px);
-  }
-
-  100% {
-    -moz-transform: translateX(0);
-  }
-}
-@keyframes cd-bounce-2-inverse {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(100px);
-    -moz-transform: translateX(100px);
-    -ms-transform: translateX(100px);
-    -o-transform: translateX(100px);
-    transform: translateX(100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(-20px);
-    -moz-transform: translateX(-20px);
-    -ms-transform: translateX(-20px);
-    -o-transform: translateX(-20px);
-    transform: translateX(-20px);
-  }
-
-  100% {
-    -webkit-transform: translateX(0);
-    -moz-transform: translateX(0);
-    -ms-transform: translateX(0);
-    -o-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
+}

modules/boonex/timeline/template/css/view.css

@@ -617,16 +617,6 @@ div.bx-tl-item div.bx-tl-item-activity:not(.bx-tl-ia-counters) .bx-menu-custom.b
 
 
 /*--- Item Style: Timeline ---*/
-div.bx-tl-view-timeline div.bx-tl-items:before {
-    content: '';
-    position: absolute;
-    top: 0px;
-    left: 0.875rem;
-    width: 4px;
-    height: 100%;
-
-    background: #dddddd;
-}
 div.bx-tl-view-timeline div.bx-tl-items,
 div.bx-tl-view-search div.bx-tl-items,
 div.bx-tl-view-item div.bx-tl-items {

modules/boonex/timeline/template/item_timeline.html

@@ -1,10 +1,12 @@
 <div id="__html_id__" class="__style_prefix__-item __class__ bx-def-thumb-size-min-height bx-def-padding-bottom bx-clearfix">
     <a name="timeline-event-__id__"></a>
+    <!--
     <div class="__style_prefix__-item-type bx-def-media-phone-hide">
         <div class="__style_prefix__-item-circle">
             <i class="sys-icon __item_icon__"></i>
         </div>
     </div>
+    -->
     <div class="__style_prefix__-item-cnt bx-def-box bx-def-padding-topbottom bx-def-round-corners __class_content__">
         <div class="__style_prefix__-blink-plate"></div>
         <bx_if:show_note>
@@ -59,7 +61,7 @@
         </div>
         <bx_if:show_item_action>
             <div class="__style_prefix__-item-action bx-def-margin-lefttopright bx-def-font-middle bx-def-font-grayed">
-                <span>__item_owner_action__&nbsp;</span>
+                <span>__item_owner_action__&nbsp;<i class="sys-icon __item_icon__"></i>&nbsp;</span>
                 <bx_if:show_timeline_owner>
                     <span><bx_text:_bx_timeline_txt_to />&nbsp;</span> 
                     <span class="__style_prefix__-timeline-owner-name">