Improves realtime widget (matomo-org#12884)

* Improves realtime widget * readds provider information to flag tooltip * do not show visitor id & rearange visitor profile icon * show visitorid in tooltip * fix icon align & size * Tweak to have consistent padding
InfinityVoid · Oct 11, 2018 · 0cd2aa9 · 0cd2aa9
1 parent 0b538ef
commit 0cd2aa9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less
@@ -1,6 +1,5 @@
 #visitsLive {
     text-align: left;
-    font-size: 90%;
     color: @theme-color-text-light;
     border-top: 1px solid @color-silver-l90;
 
@@ -59,6 +58,27 @@
     background: #F9FAFA none repeat scroll 0 0;
 }
 
+#visitsLive .visits-live-launch-visitor-profile {
+  color: @theme-color-text;
+  line-height: 200%;
+
+  span {
+    display: block;
+    vertical-align: middle;
+
+    &.icon-visitor-profile {
+      display: inline;
+      font-size: 16px;
+      line-height: 16px;
+      vertical-align: middle;
+    }
+  }
+
+  .icon-visitor-profile {
+    font-size: 120%;
+  }
+}
+
 .visitsLiveFooter img {
     vertical-align: middle;
 }
@@ -374,6 +394,10 @@ a.visitor-log-visitor-profile-link {
     }
 }
 
+#visitsLive .visitorReferrer {
+    padding-top: 0;
+}
+
 .segmentedlog {
   margin: 8px;
   display: block;
@@ -386,6 +410,10 @@ a.visitor-log-visitor-profile-link {
 
 #widgetLivewidget {
   .visitorLogIcons {
+    &:before {
+      content: " ";
+      display: block;
+    }
     display: inline;
   }
 

diff --git a/plugins/Live/templates/_visitorDetails.twig b/plugins/Live/templates/_visitorDetails.twig
@@ -7,7 +7,8 @@
 {% endif %}{% if visitInfo.getColumn('idVisit') is not empty %}
 {{ 'General_Visit'|translate }} ID: {{ visitInfo.getColumn('idVisit') }}
 {% endif %}{% if visitInfo.getColumn('latitude') or visitInfo.getColumn('longitude') %}{{ visitInfo.getColumn('location') }}
-GPS (lat/long): {{ visitInfo.getColumn('latitude') }},{{ visitInfo.getColumn('longitude') }}{% endif %}">
+GPS (lat/long): {{ visitInfo.getColumn('latitude') }},{{ visitInfo.getColumn('longitude') }}{% endif %}{% if visitInfo.getColumn('providerName') %}
+{{ 'Provider_ColumnProvider'|translate }}: {{ visitInfo.getColumn('providerName') }}{% endif %}">
     IP: {{ visitInfo.getColumn('visitIp') }}
     <br />
     {% if visitInfo.getColumn('location') != 'General_Unknown'|translate %}<span><img width="16" class="flag" src="{{ visitInfo.getColumn('countryFlag') }}"/>&nbsp;

diff --git a/plugins/Live/templates/_visitorLogIcons.twig b/plugins/Live/templates/_visitorLogIcons.twig
@@ -21,6 +21,10 @@
                 {% if visitor.getColumn('region') %}<li>{{ 'UserCountry_Region'|translate }}: {{ visitor.getColumn('region') }}</li>{% endif %}
                 {% if visitor.getColumn('city') %}<li>{{ 'UserCountry_City'|translate }}: {{ visitor.getColumn('city') }}</li>{% endif %}
                 {% if visitor.getColumn('language') %}<li>{{ 'UserLanguage_BrowserLanguage'|translate }}: {{ visitor.getColumn('language') }}</li>{% endif %}
+                {% if visitor.getColumn('providerName') %}<li>{{ 'Provider_ColumnProvider'|translate }}: {{ visitor.getColumn('providerName') }}</li>{% endif %}
+                <li>{{ 'General_IP'|translate }}: {{ visitor.getColumn('visitIp') }}</li>
+                {% if visitor.getColumn('visitorId') is not empty %}<li>{{ 'General_VisitorID'|translate }}: {{ visitor.getColumn('visitorId') }}</li>{% endif %}
+
             </ul>
         </span>
     {% endif %}

diff --git a/plugins/Live/templates/getLastVisitsStart.twig b/plugins/Live/templates/getLastVisitsStart.twig
@@ -10,16 +10,16 @@
                 {{ postEvent('Live.visitorLogWidgetViewBeforeVisitInfo', visitor) }}
                 {% set year = visitor.getColumn('serverTimestamp')|date('Y') %}
                 <span class="realTimeWidget_datetime">{{ visitor.getColumn('serverDatePretty')|replace({(year): ' '}) }} - {{ visitor.getColumn('serverTimePretty') }} {% if visitor.getColumn('visitDuration') > 0 %}({{ visitor.getColumn('visitDurationPretty')|raw }}){% endif %}</span>
-                {% if visitor.getColumn('visitorId')|default(false) is not empty %}
+                {% if visitor.getColumn('userId')|default(false) is not empty %}
                   &nbsp;  <a class="visits-live-launch-visitor-profile rightLink" title="{{ 'Live_ViewVisitorProfile'|translate }} {% if visitor.getColumn('userId') is not empty %}{{ visitor.getColumn('userId')|raw }}{% endif %}" data-visitor-id="{{ visitor.getColumn('visitorId') }}">
-                        {% if visitor.getColumn('userId') is not empty %}<br/>{% endif %}
-                        <img src="plugins/Live/images/visitorProfileLaunch.png"/>
-                        {{ visitor.getColumn('userId')|default('')|raw }}
+                        <span>{{ visitor.getColumn('userId') }}</span>
                     </a>
                 {% endif %}
-                <br />
 
                 {{ postEvent('Live.renderVisitorIcons', visitor) }}
+                <a class="visits-live-launch-visitor-profile rightLink" title="{{ 'Live_ViewVisitorProfile'|translate }} {% if visitor.getColumn('userId') is not empty %}{{ visitor.getColumn('userId')|raw }}{% endif %}" data-visitor-id="{{ visitor.getColumn('visitorId') }}">
+                    <span class="icon-visitor-profile"></span>
+                </a>
 
                 <span class="referrer">
                     {% include "@Referrers/_visitorDetails.twig" with {'visitInfo': visitor} %}