Skip to content

Commit 39565a5

Browse files
jcenturionjcenturion
committed
Rewrite tabs
1 parent d953f15 commit 39565a5

File tree

6 files changed

+402
-78
lines changed

6 files changed

+402
-78
lines changed

‎dist/scripts/api-console.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -938,9 +938,10 @@
938938

939939
// If the response fails because of CORS, responseText is null
940940
var editorHeight = 50;
941+
941942
if (jqXhr.responseText) {
942943
var lines = jqXhr.responseText.split('\n').length;
943-
var editorHeight = lines > 100 ? 2000 : 25*lines;
944+
editorHeight = lines > 100 ? 2000 : 25*lines;
944945
}
945946

946947
$scope.editorStyle = {
@@ -4907,8 +4908,7 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
49074908
$templateCache.put('directives/method-list.tpl.html',
49084909
"<div class=\"raml-console-tab-list\">\n" +
49094910
" <div class=\"raml-console-tab\" ng-repeat=\"method in resource.methods\" ng-click=\"showResource($event, $index)\">\n" +
4910-
" <span class=\"raml-console-tab-label\">{{method.method.toLocaleUpperCase()}}</span>\n" +
4911-
" <div class=\"raml-console-tab-box raml-console-tab-{{method.method}}\"></div>\n" +
4911+
" <span class=\"raml-console-tab-label raml-console-tab-{{method.method}}\">{{method.method.toLocaleUpperCase()}}</span>\n" +
49124912
" </div>\n" +
49134913
"</div>\n"
49144914
);

‎dist/styles/api-console-dark-theme.css‎

Lines changed: 135 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1505,84 +1505,192 @@ th {
15051505
}
15061506
}
15071507

1508-
.raml-console-tab-get {
1508+
.raml-console-tab-get::before {
15091509
background: #0B88B9;
1510+
content: '';
1511+
height: 31px;
1512+
border-radius: 4px;
1513+
margin: 0 10px 0;
1514+
-webkit-transform: perspective(45px) rotateX(30deg);
1515+
-moz-transform: perspective(45px) rotateX(30deg);
1516+
-ms-transform: perspective(45px) rotateX(30deg);
1517+
width: 108px;
1518+
position: absolute;
1519+
margin-left: -40px;
1520+
z-index: -1;
1521+
top: 0px;
15101522
}
15111523

1512-
.raml-console-tab-put {
1524+
.raml-console-tab-put::before {
15131525
background: #87538f;
1526+
content: '';
1527+
height: 31px;
1528+
border-radius: 4px;
1529+
margin: 0 10px 0;
1530+
-webkit-transform: perspective(45px) rotateX(30deg);
1531+
-moz-transform: perspective(45px) rotateX(30deg);
1532+
-ms-transform: perspective(45px) rotateX(30deg);
1533+
width: 108px;
1534+
position: absolute;
1535+
margin-left: -40px;
1536+
z-index: -1;
1537+
top: 0px;
15141538
}
15151539

1516-
.raml-console-tab-delete {
1540+
.raml-console-tab-delete::before {
15171541
background: #d14956;
1542+
content: '';
1543+
height: 31px;
1544+
border-radius: 4px;
1545+
margin: 0 10px 0;
1546+
-webkit-transform: perspective(45px) rotateX(30deg);
1547+
-moz-transform: perspective(45px) rotateX(30deg);
1548+
-ms-transform: perspective(45px) rotateX(30deg);
1549+
width: 108px;
1550+
position: absolute;
1551+
margin-left: -28px;
1552+
z-index: -1;
1553+
top: 0px;
15181554
}
15191555

1520-
.raml-console-tab-post {
1556+
.raml-console-tab-post::before {
15211557
background: #1EA18D;
1558+
content: '';
1559+
height: 31px;
1560+
border-radius: 4px;
1561+
margin: 0 10px 0;
1562+
-webkit-transform: perspective(45px) rotateX(30deg);
1563+
-moz-transform: perspective(45px) rotateX(30deg);
1564+
-ms-transform: perspective(45px) rotateX(30deg);
1565+
width: 108px;
1566+
position: absolute;
1567+
margin-left: -36px;
1568+
z-index: -1;
1569+
top: 0px;
15221570
}
15231571

1524-
.raml-console-tab-patch {
1572+
.raml-console-tab-patch::before {
15251573
background: #02B0E2;
1574+
content: '';
1575+
height: 31px;
1576+
border-radius: 4px;
1577+
margin: 0 10px 0;
1578+
-webkit-transform: perspective(45px) rotateX(30deg);
1579+
-moz-transform: perspective(45px) rotateX(30deg);
1580+
-ms-transform: perspective(45px) rotateX(30deg);
1581+
width: 108px;
1582+
position: absolute;
1583+
margin-left: -32px;
1584+
z-index: -1;
1585+
top: 0px;
15261586
}
15271587

1528-
.raml-console-tab-connect {
1588+
.raml-console-tab-connect::before {
15291589
background: #E48F0A;
1590+
content: '';
1591+
height: 31px;
1592+
border-radius: 4px;
1593+
margin: 0 10px 0;
1594+
-webkit-transform: perspective(45px) rotateX(30deg);
1595+
-moz-transform: perspective(45px) rotateX(30deg);
1596+
-ms-transform: perspective(45px) rotateX(30deg);
1597+
width: 108px;
1598+
position: absolute;
1599+
margin-left: -19px;
1600+
z-index: -1;
1601+
top: 0px;
15301602
}
15311603

1532-
.raml-console-tab-head {
1604+
.raml-console-tab-head::before {
15331605
background: #8A45A2;
1606+
content: '';
1607+
height: 31px;
1608+
border-radius: 4px;
1609+
margin: 0 10px 0;
1610+
-webkit-transform: perspective(45px) rotateX(30deg);
1611+
-moz-transform: perspective(45px) rotateX(30deg);
1612+
-ms-transform: perspective(45px) rotateX(30deg);
1613+
width: 108px;
1614+
position: absolute;
1615+
margin-left: -34px;
1616+
z-index: -1;
1617+
top: 0px;
15341618
}
15351619

1536-
.raml-console-tab-options {
1620+
.raml-console-tab-options::before {
15371621
background: #1EBD77;
1622+
content: '';
1623+
height: 31px;
1624+
border-radius: 4px;
1625+
margin: 0 10px 0;
1626+
-webkit-transform: perspective(45px) rotateX(30deg);
1627+
-moz-transform: perspective(45px) rotateX(30deg);
1628+
-ms-transform: perspective(45px) rotateX(30deg);
1629+
width: 108px;
1630+
position: absolute;
1631+
margin-left: -21px;
1632+
z-index: -1;
1633+
top: 0px;
15381634
}
15391635

1540-
.raml-console-tab-trace {
1636+
.raml-console-tab-trace::before {
15411637
background: #98B805;
1638+
content: '';
1639+
height: 31px;
1640+
border-radius: 4px;
1641+
margin: 0 10px 0;
1642+
-webkit-transform: perspective(45px) rotateX(30deg);
1643+
-moz-transform: perspective(45px) rotateX(30deg);
1644+
-ms-transform: perspective(45px) rotateX(30deg);
1645+
width: 108px;
1646+
position: absolute;
1647+
margin-left: -31px;
1648+
z-index: -1;
1649+
top: 0px;
15421650
}
15431651

1544-
.raml-console-tab:hover .raml-console-tab-get,
1545-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-get {
1652+
.raml-console-tab:hover .raml-console-tab-get::before,
1653+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-get::before {
15461654
background: #5F9ACA;
15471655
}
15481656

1549-
.raml-console-tab:hover .raml-console-tab-put,
1550-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-put {
1657+
.raml-console-tab:hover .raml-console-tab-put::before,
1658+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-put::before {
15511659
background: #B16DBB;
15521660
}
15531661

1554-
.raml-console-tab:hover .raml-console-tab-delete,
1555-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-delete {
1662+
.raml-console-tab:hover .raml-console-tab-delete::before,
1663+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-delete::before {
15561664
background: #EC5D5E;
15571665
}
15581666

1559-
.raml-console-tab:hover .raml-console-tab-post,
1560-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-post {
1667+
.raml-console-tab:hover .raml-console-tab-post::before,
1668+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-post::before {
15611669
background: #77C5A2;
15621670
}
15631671

1564-
.raml-console-tab:hover .raml-console-tab-patch,
1565-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-patch {
1672+
.raml-console-tab:hover .raml-console-tab-patch::before,
1673+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-patch::before {
15661674
background: #96e7fe;
15671675
}
15681676

1569-
.raml-console-tab:hover .raml-console-tab-connect,
1570-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-connect {
1677+
.raml-console-tab:hover .raml-console-tab-connect::before,
1678+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-connect::before {
15711679
background: #f8ba58;
15721680
}
15731681

1574-
.raml-console-tab:hover .raml-console-tab-head,
1575-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-head {
1682+
.raml-console-tab:hover .raml-console-tab-head::before,
1683+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-head::before {
15761684
background: #b680c9;
15771685
}
15781686

1579-
.raml-console-tab:hover .raml-console-tab-options,
1580-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-options {
1687+
.raml-console-tab:hover .raml-console-tab-options::before,
1688+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-options::before {
15811689
background: #59e5a7;
15821690
}
15831691

1584-
.raml-console-tab:hover .raml-console-tab-trace,
1585-
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-trace {
1692+
.raml-console-tab:hover .raml-console-tab-trace::before,
1693+
.raml-console-resource:not(.raml-console-is-active) .raml-console-tab.raml-console-is-hovered .raml-console-tab-trace::before {
15861694
background: #c7f107;
15871695
}
15881696

0 commit comments

Comments
 (0)