ignite-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From dpav...@apache.org
Subject [ignite-teamcity-bot] branch master updated: IGNITE-10125 Uniform style for buttons - Fixes #58.
Date Sat, 03 Nov 2018 19:54:21 GMT
This is an automated email from the ASF dual-hosted git repository.

dpavlov pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ignite-teamcity-bot.git


The following commit(s) were added to refs/heads/master by this push:
     new c66c816  IGNITE-10125 Uniform style for buttons - Fixes #58.
c66c816 is described below

commit c66c816767c5a1146d721628630bd17d5c005321
Author: zzzadruga <zzzadruga@gmail.com>
AuthorDate: Sat Nov 3 22:54:12 2018 +0300

    IGNITE-10125 Uniform style for buttons - Fixes #58.
    
    Signed-off-by: Dmitriy Pavlov <dpavlov@apache.org>
---
 .../src/main/webapp/comparison.html                | 30 +++++---
 .../src/main/webapp/css/style-1.5.css              | 89 ++++++++++++----------
 ignite-tc-helper-web/src/main/webapp/js/prs-1.0.js |  5 +-
 .../src/main/webapp/js/testfails-2.1.js            | 13 ++--
 ignite-tc-helper-web/src/main/webapp/pr.html       |  3 +-
 ignite-tc-helper-web/src/main/webapp/prs.html      |  2 +
 6 files changed, 83 insertions(+), 59 deletions(-)

diff --git a/ignite-tc-helper-web/src/main/webapp/comparison.html b/ignite-tc-helper-web/src/main/webapp/comparison.html
index 82cf096..b8d5b70 100644
--- a/ignite-tc-helper-web/src/main/webapp/comparison.html
+++ b/ignite-tc-helper-web/src/main/webapp/comparison.html
@@ -34,7 +34,7 @@
         <td style="text-align: center;" id="info2"></td>
     </tr>
     <tr><td class="field">DURATION</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphDuration"
src='/img/browser.png'><span>show graph</span></p></td>
+        <td class="icon"><button id="clickGraphDuration" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="Duration1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="Duration2" data-allow-highlight="true"></td>
     </tr>
@@ -45,7 +45,7 @@
     </tr><tr></tr>
     <tr><td class="section">TESTS</td><td></td><td class="mmm
title 1"></td><td class="mmm title 2"></td></tr>
     <tr><td class="field">COUNT</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphCount" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphCount" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="Count1" data-allow-highlight="false"></td>
         <td class="mmm data 2" id="Count2" data-allow-highlight="false"></td>
     </tr>
@@ -55,7 +55,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphCount2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">PASSED</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphPassed" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphPassed" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="Passed1" data-allow-highlight="false"></td>
         <td class="mmm data 2" id="Passed2" data-allow-highlight="false"></td>
     </tr>
@@ -65,7 +65,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphPassed2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">FAILED</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphFailed" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphFailed" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="Failed1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="Failed2" data-allow-highlight="true"></td>
     </tr>
@@ -75,7 +75,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphFailed2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">IGNORED</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphIgnored" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphIgnored" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="Ignored1" data-allow-highlight="false"></td>
         <td class="mmm data 2" id="Ignored2" data-allow-highlight="false"></td>
     </tr>
@@ -85,7 +85,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphIgnored2"
width="500" height="200"></svg></td>
     </tr>
     <tr><td class="field">MUTED</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphMuted" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphMuted" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="Muted1" data-allow-highlight="false"></td>
         <td class="mmm data 2" id="Muted2" data-allow-highlight="false"></td></tr>
     <tr id="showGraphMuted" style="display: none;"><td></td>
@@ -96,7 +96,7 @@
     <tr><td class="section">PROBLEMS</td><td></td><td class="mmm
title 1"></td><td class="mmm title 2"></td></tr>
     <tr style="display: none;"><td></td><td></td><td></td></tr>
     <tr><td class="field">TOTAL</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphTT" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphTT" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="TT1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="TT2" data-allow-highlight="true"></td></tr>
     <tr id="showGraphTT" style="display: none;"><td></td>
@@ -105,7 +105,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphTT2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">EXECUTION TIMEOUT</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphET" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphET" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="ET1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="ET2" data-allow-highlight="true"></td>
     </tr>
@@ -115,7 +115,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphET2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">JVM CRASH</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphJC" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphJC" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="JC1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="JC2" data-allow-highlight="true"></td>
     </tr>
@@ -125,7 +125,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphJC2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">OOME</td>
-        <td class="icon"></td>
+        <td class="icon"><button id="clickGraphOO" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="OO1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="OO2" data-allow-highlight="true"></td>
     </tr>
@@ -135,7 +135,7 @@
         <td style="text-align: center;"><svg class="graph 2" id="graphOO2" width="500"
height="200"></svg></td>
     </tr>
     <tr><td class="field">EXIT CODE</td>
-        <td class="icon"><p class="tooltips"><img id="clickGraphEC" src='/img/browser.png'><span>show
graph</span></p></td>
+        <td class="icon"><button id="clickGraphEC" class="more white short"><i
class="fas fa-caret-down"></i></button></td>
         <td class="mmm data 1" id="EC1" data-allow-highlight="true"></td>
         <td class="mmm data 2" id="EC2" data-allow-highlight="true"></td>
     </tr>
@@ -663,7 +663,13 @@
     function graphSpoiler(fieldName) {
         $("#clickGraph" + fieldName).click(function() {
             let element = $('#showGraph' + fieldName);
-            element.css('display') === 'none' ? element.css('display', '') : element.css('display',
'none');
+            if (element.css('display') === 'none') {
+                element.css('display', '');
+                $(this).html("<i class='fas fa-caret-up'></i>");
+            } else {
+                element.css('display', 'none');
+                $(this).html("<i class='fas fa-caret-down'></i>");
+            }
         });
     }
 
diff --git a/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css b/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css
index 1c20db8..c591c54 100644
--- a/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css
+++ b/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css
@@ -117,6 +117,54 @@ input[type=button]:hover, input[type=submit]:hover, button:hover {
     transition: ease-in 0.175s;
 }
 
+button.more {
+	display: inline-block;
+	font-size: 12px;
+	border-radius: 4px;
+	padding-bottom: 2px;
+	padding-right: 5px;
+	padding-left: 5px;
+	text-align: center;
+}
+
+button.more.full {
+	width: 70px;
+}
+
+button.more.short {
+	width: 27px;
+
+}
+
+button.more.white {
+	border: 2px solid #12AD5E;
+	color: #12AD5E;
+	background: white;
+}
+
+button.more.white:hover {
+	background: #eeeeee;
+}
+
+button.more.green {
+	background: #12AD5E;
+	color: #FFF;
+	border: 2px solid #FFF;
+}
+
+button.more.green:hover {
+	background: #128c46;
+}
+
+button.more > b {
+	padding-right:5px;
+}
+
+button.more > i {
+	padding-left: 1px;
+	padding-right:1px;
+}
+
 form, .formgroup {
 	margin: 0px auto;
 	padding: 5px;
@@ -299,6 +347,7 @@ form li:after
 td.details-control {
 	//background: url('../resources/details_open.png') no-repeat center center;
 	cursor: pointer;
+	text-align: center;
 	//content: "+&#x2796";
 }
 tr.shown td.details-control {
@@ -472,43 +521,3 @@ div.tooltip {
 	transition: transform .25s;
 	display: inline-block;
 }
-
-.testClass:hover > i {
-	transform: scale(1.2) translateX(0.8em) translateY(1px);
-}
-
-p.tooltips {
-	position: relative;
-	display: inline;
-}
-p.tooltips span {
-	position: absolute;
-	width:100px;
-	color: #FFFFFF;
-	background: #000000;
-	height: 30px;
-	line-height: 30px;
-	text-align: center;
-	visibility: hidden;
-	border-radius: 5px;
-}
-p.tooltips span:after {
-	content: '';
-	position: absolute;
-	top: 50%;
-	right: 100%;
-	margin-top: -8px;
-	width: 0; height: 0;
-	border-right: 8px solid #000000;
-	border-top: 8px solid transparent;
-	border-bottom: 8px solid transparent;
-}
-p:hover.tooltips span {
-	visibility: visible;
-	opacity: 0.8;
-	left: 100%;
-	top: 50%;
-	margin-top: -15px;
-	margin-left: 15px;
-	z-index: 999;
-}
diff --git a/ignite-tc-helper-web/src/main/webapp/js/prs-1.0.js b/ignite-tc-helper-web/src/main/webapp/js/prs-1.0.js
index 4e96144..a72e05a 100644
--- a/ignite-tc-helper-web/src/main/webapp/js/prs-1.0.js
+++ b/ignite-tc-helper-web/src/main/webapp/js/prs-1.0.js
@@ -66,7 +66,8 @@ function showContributionsTable(result, srvId, suiteId) {
                 "defaultContent": "",
                 "render": function (data, type, row, meta) {
                     if (type === 'display') {
-                        return "<button>&#x2714; Inspect</button>";
+                        return "<button class='more full green' type='button' id='button_"
+ row.prNumber +"'>" +
+                            "<b>ᴍᴏʀᴇ</b><i class='fas fa-caret-down'></i></button>";
                     }
                 }
             },
@@ -142,11 +143,13 @@ function showContributionsTable(result, srvId, suiteId) {
         if (row.child.isShown()) {
             // This row is already open - close it
             row.child.hide();
+            $("#button_" + row.data().prNumber).html("<b>ᴍᴏʀᴇ</b><i
class='fas fa-caret-down'></i>");
             tr.removeClass('shown');
         }
         else {
             // Open this row
             row.child(formatContributionDetails(row.data(), srvId, suiteId)).show();
+            $("#button_" + row.data().prNumber).html("<b>ʟᴇss&nbsp;</b><i
class='fas fa-caret-up'></i>");
             tr.addClass('shown');
         }
     });
diff --git a/ignite-tc-helper-web/src/main/webapp/js/testfails-2.1.js b/ignite-tc-helper-web/src/main/webapp/js/testfails-2.1.js
index 4342d60..037a720 100644
--- a/ignite-tc-helper-web/src/main/webapp/js/testfails-2.1.js
+++ b/ignite-tc-helper-web/src/main/webapp/js/testfails-2.1.js
@@ -3,6 +3,9 @@
 //triggerConfirm & triggerDialog element should be provided on page (may be hidden)
 var g_initMoreInfoDone = false;
 
+var more = "<button class='more white short'><i class='fas fa-caret-down'></i></button>";
+var less = "<button class='more white short'><i class='fas fa-caret-up'></i></button>";
+
 /** Object used to notify git. See ChainAtServerCurrentStatus Java class. */
 var g_srv_to_notify_git;
 
@@ -159,7 +162,7 @@ function showChainCurrentStatusData(server, settings) {
 
     if(!isDefinedAndFilled(findGetParameter("reportMode"))) {
         res += "<span class='container'>";
-        res += " <a href='javascript:void(0);' class='header'>More &gt;&gt;</a>";
+        res += " <a href='javascript:void(0);' class='header'>" + more + "</a>";
         res += "<div class='content'>" + mInfo + "</div></span>";
     }
 
@@ -646,7 +649,7 @@ function showSuiteData(suite, settings) {
 
     if(!isDefinedAndFilled(findGetParameter("reportMode"))) {
         res += "<span class='container'>";
-        res += " <a href='javascript:void(0);' class='header'>More &gt;&gt;</a>";
+        res += " <a href='javascript:void(0);' class='header'>" + more + "</a>";
         res += "<div class='content'>" + mInfo + "</div></span>";
     }
 
@@ -891,7 +894,7 @@ function showTestFailData(testFail, isFailureShown, settings) {
     if (isDefinedAndFilled(testFail.warnings) && testFail.warnings.length > 0
         && !isDefinedAndFilled(findGetParameter("reportMode"))) {
         res += "<span class='container'>";
-        res += " <a href='javascript:void(0);' class='header'>More &gt;&gt;</a>";
+        res += " <a href='javascript:void(0);' class='header'>" + more + "</a>";
 
         res += "<div class='content'>";
 
@@ -986,9 +989,9 @@ function initMoreInfo() {
         $content.slideToggle(500, function() {
             //execute this after slideToggle is done
             //change text of header based on visibility of content div
-            $header.text(function() {
+            $header.html(function() {
                 //change text based on condition
-                return $content.is(":visible") ? "Hide <<" : "More >>";
+                return $content.is(":visible") ? less : more;
             });
         });
     });
diff --git a/ignite-tc-helper-web/src/main/webapp/pr.html b/ignite-tc-helper-web/src/main/webapp/pr.html
index e7851e5..6f667ca 100644
--- a/ignite-tc-helper-web/src/main/webapp/pr.html
+++ b/ignite-tc-helper-web/src/main/webapp/pr.html
@@ -4,7 +4,8 @@
     <link rel="icon" href="img/leaf-icon-png-7066.png">
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="css/style-1.5.css">
-
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
+          integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="js/common-1.6.js"></script>
diff --git a/ignite-tc-helper-web/src/main/webapp/prs.html b/ignite-tc-helper-web/src/main/webapp/prs.html
index 668d3e3..5ebd3dc 100644
--- a/ignite-tc-helper-web/src/main/webapp/prs.html
+++ b/ignite-tc-helper-web/src/main/webapp/prs.html
@@ -14,6 +14,8 @@
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
     <script src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.js"></script>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
+          integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous">
 
     <script src="js/common-1.6.js"></script>
     <script src="js/testfails-2.1.js"></script>


Mime
View raw message