Repository: qpid-dispatch Updated Branches: refs/heads/master 788a2b748 -> e645721c7
DISPATCH-982 Handle small/narrow screens better. Change page menus to be more consistent with Patternfly. Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/e645721c Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/e645721c Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/e645721c Branch: refs/heads/master Commit: e645721c7887320bc4621aa723a1692c39e4b8b5 Parents: 788a2b7 Author: Ernest Allen <eal...@redhat.com> Authored: Mon Apr 30 12:10:09 2018 -0400 Committer: Ernest Allen <eal...@redhat.com> Committed: Mon Apr 30 12:10:09 2018 -0400 ---------------------------------------------------------------------- console/stand-alone/index.html | 29 ++-- console/stand-alone/plugin/html/qdrChord.html | 134 ++++++++++++------- console/stand-alone/plugin/js/chord/qdrChord.js | 26 +++- console/stand-alone/plugin/js/navbar.js | 7 +- 4 files changed, 132 insertions(+), 64 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/index.html ---------------------------------------------------------------------- diff --git a/console/stand-alone/index.html b/console/stand-alone/index.html index d9ec7fd..d912d9a 100644 --- a/console/stand-alone/index.html +++ b/console/stand-alone/index.html @@ -52,8 +52,14 @@ under the License. <body ng-app="QDR" ng-controller="QDR.Core"> -<nav class="navbar navbar-default navbar-pf" role="navigation"> +<nav class="navbar navbar-default navbar-pf navbar-fixed-top" role="navigation"> <div class="navbar-header"> + <button type='button' class='navbar-toggle left page-menu-button' data-toggle="collapse" data-target=".page-menu"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> @@ -87,13 +93,7 @@ under the License. display: none; } </style> -<script> - setTimeout(function () { - var no_npm = document.getElementById('no-npm'); - if (no_npm) - no_npm.style.display = "block"; - }, 1000) -</script> + <!-- Only needed for IE --> <script src="node_modules/bluebird/js/browser/bluebird.js"></script> @@ -153,6 +153,19 @@ under the License. <script type="text/javascript" src="plugin/js/chord/data.js"></script> <script type="text/javascript" src="plugin/js/chord/layout/layout.js"></script> <script type="text/javascript" src="plugin/js/chord/qdrChord.js"></script> +<script> + setTimeout(function () { + var no_npm = document.getElementById('no-npm'); + if (no_npm) + no_npm.style.display = "block"; + }, 1000); + + $(function(){ + $('.nav a').on('click', function(){ + $('.navbar-collapse').collapse('hide'); + }); + }) +</script> </body> </html> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/plugin/html/qdrChord.html ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/html/qdrChord.html b/console/stand-alone/plugin/html/qdrChord.html index ba1e41e..640de43 100644 --- a/console/stand-alone/plugin/html/qdrChord.html +++ b/console/stand-alone/plugin/html/qdrChord.html @@ -48,6 +48,7 @@ padding-right: 1em; opacity: 0; background-color: white; + z-index: 2; } #switches ul { list-style: none; @@ -57,16 +58,14 @@ #switches li { margin-bottom: 1em; } + #legend { - position: absolute; right: 1em; top: 1em; - padding: 0 1em; - border: 1px solid black; - border-radius: 4px; min-width: 10em; background-color: white; } + #legend .legend-color { width: 19.6667px; height: 18.1667px; @@ -145,17 +144,18 @@ fill-opacity: .67; } -#legend ul.addresses li, #legend ul.routers li { +#legend ul.addresses li, #legend ul.routers li, #legend ul.options li { margin-top: 0.5em; + margin-bottom: 1em; } -#legend ul.routers li { - margin-bottom: 0.5em; -} #legend ul.addresses { margin-bottom: 1.5em; } +#legend .panel-body { + padding: 4px 15px; +} .code-branch:before { font-style: normal; font-family: FontAwesome; @@ -168,10 +168,6 @@ z-index: 0; } - div#debugging { - width: 20em; - } - .addresses .btn, #switches .btn { padding: 0px 4px !important; background-image: none; @@ -198,43 +194,89 @@ #noTraffic { position:absolute; } + +.legend-button { + color: black; + background: white; + position: absolute; + left: 0; + top: 0; + z-index: 2; + width: 1em; + padding: 4px 0 0 4px; + margin: 4px 0 0 4px; +} +.legend-button span.icon-bar { + display: block; + color: black; + background-color: black; + height: 4px; + width: 4px; + font-weight: bold; + border-radius: 2px; +} + +.page-menu { + position: absolute; + right: 1em; + top: 1em; + left: auto; + width: auto; +} + +@media (max-width: 768px) { + .navbar-collapse.page-menu { + left: 1em; + right: auto; + } +} + +.navbar-collapse { + padding-right: 0; +} + +.panel-group { + margin-bottom: 0; +} </style> - <div ng-controller="QDR.ChordController"> - <div id="popover-div" ng-bind-html="trustedpopoverContent"></div> - <div id="noTraffic"></div> - <div id="chord"></div> - <div id="legend"> - <div ng-hide="arcColorsEmpty()"> - <h4>Routers</h4> +<div ng-controller="QDR.ChordController"> + <div id="popover-div" ng-bind-html="trustedpopoverContent"></div> + <div id="noTraffic"></div> + <div id="chord"></div> + + <div class="page-menu navbar-collapse collapse"> + <uib-accordion id="legend" close-others="false"> + <div uib-accordion-group class="panel-default" is-open="legend.status.optionsOpen" heading="Options"> + <ul class="options"> + <li> + <checkbox title="Select to show message rates" ng-model="legendOptions.isRate"></checkbox> + <span title="Select to show message rates">Show rates</span> + </li> + <li> + <checkbox title="Select to break out traffic by address" ng-model="legendOptions.byAddress"></checkbox> + <span title="Select to break out traffic by address">Show by address</span> + </li> + </ul> + </div> + <div uib-accordion-group class="panel-default" is-open="legend.status.routersOpen" ng-hide="arcColorsEmpty()" heading="Routers"> <ul class="routers"> - <li ng-repeat="(router, color) in arcColors" class="legend-line" ng-mouseover="enterRouter(router)" ng-mouseleave="leaveLegend()"> - <span class='legend-color' ng-style="{'background-color': color}"></span> - <span class='legend-router' title="{{router}}">{{router | limitTo:15}}{{router.length>15 ? 'â¦' : ''}}</span> - </li> + <li ng-repeat="(router, color) in arcColors" class="legend-line" ng-mouseover="enterRouter(router)" ng-mouseleave="leaveLegend()"> + <span class='legend-color' ng-style="{'background-color': color}"></span> + <span class='legend-router' title="{{router}}">{{router | limitTo:15}}{{router.length>15 ? 'â¦' : ''}}</span> + </li> </ul> </div> - <h4>Addresses</h4> - <ul class="addresses"> - <li ng-repeat="(address, color) in addresses" class="legend-line"> - <checkbox style="background-color: {{chordColors[address]}};" - title="{{address}}" ng-change="addressFilterChanged()" - ng-model="addresses[address]"></checkbox> - <span ng-mouseenter="enterLegend(address)" ng-mouseleave="leaveLegend()" ng-click="addressClick(address)" title="{{address}}">{{address | limitTo : 15}}{{address.length>15 ? 'â¦' : ''}}</span> - </li> - </ul> - </div> - <div id="switches"> - <ul> - <li> - <checkbox title="Select to show message rates" ng-model="legendOptions.isRate"></checkbox> - <span title="Select to show message rates">Show rates</span> - </li> - <li> - <checkbox title="Select to break out traffic by address" ng-model="legendOptions.byAddress"></checkbox> - <span title="Select to break out traffic by address">Show by address</span> - </li> - </ul> - </div> + <div uib-accordion-group class="panel-default" is-open="legend.status.addressesOpen" heading="Addresses"> + <ul class="addresses"> + <li ng-repeat="(address, color) in addresses" class="legend-line"> + <checkbox style="background-color: {{chordColors[address]}};" + title="{{address}}" ng-change="addressFilterChanged()" + ng-model="addresses[address]"></checkbox> + <span ng-mouseenter="enterLegend(address)" ng-mouseleave="leaveLegend()" ng-click="addressClick(address)" title="{{address}}">{{address | limitTo : 15}}{{address.length>15 ? 'â¦' : ''}}</span> + </li> + </ul> + </div> + </uib-accordion> </div> - <div ng-init="loaded=true"></div> +</div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/plugin/js/chord/qdrChord.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/chord/qdrChord.js b/console/stand-alone/plugin/js/chord/qdrChord.js index 4e6b94f..5ce7aa1 100644 --- a/console/stand-alone/plugin/js/chord/qdrChord.js +++ b/console/stand-alone/plugin/js/chord/qdrChord.js @@ -34,6 +34,8 @@ var QDR = (function (QDR) { const DOUGHNUT = '#chord svg .empty'; const ERROR_RENDERING = 'Error while rendering '; const ARCPADDING = .06; + const SMALL_OFFSET = 210; + const MIN_RADIUS = 200; // flag to show/hide the router section of the legend $scope.noValues = true; @@ -45,6 +47,7 @@ var QDR = (function (QDR) { $scope.chordColors = {}; $scope.arcColors = {}; + $scope.legend = {status: {addressesOpen: true, routersOpen: true, optionsOpen: true}}; // get notified when the byAddress checkbox is toggled let switchedByAddress = false; $scope.$watch('legendOptions.byAddress', function (newValue, oldValue) { @@ -163,7 +166,7 @@ var QDR = (function (QDR) { b = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || b.clientWidth, y = w.innerHeight|| e.clientHeight|| b.clientHeight; - return Math.max(Math.floor((Math.min(x, y) * 0.9) / 2), 300); + return Math.max(Math.floor((Math.min(x, y) * 0.9) / 2), MIN_RADIUS); }; // diagram sizes that change when browser is resized @@ -178,6 +181,14 @@ var QDR = (function (QDR) { }; setSizes(); + $scope.navbutton_toggle = function () { + let legendPos = $('#legend').position(); + console.log(legendPos); + if (legendPos.left === 0) + setTimeout(windowResized, 10); + else + $('#switches').css({left: -legendPos.left, opacity: 1}); + }; // TODO: handle window resizes //let updateWindow = function () { //setSizes(); @@ -188,7 +199,8 @@ var QDR = (function (QDR) { let legendPos = $('#legend').position(); let switches = $('#switches'); let outerWidth = switches.outerWidth(); - switches.css({left: (legendPos.left - outerWidth), opacity: 1}); + if (switches && legendPos) + switches.css({left: (legendPos.left - outerWidth), opacity: 1}); }; window.addEventListener('resize', function () { windowResized(); @@ -249,17 +261,17 @@ var QDR = (function (QDR) { // global pointer to the diagram let svg; - // called once when the page loads and again - // whenever the number of routers that have egressed messages changes + // called once when the page loads let initSvg = function () { d3.select('#chord svg').remove(); + let xtrans = outerRadius === MIN_RADIUS ? SMALL_OFFSET : outerRadius; svg = d3.select('#chord').append('svg') .attr('width', outerRadius * 2) .attr('height', outerRadius * 2) .append('g') .attr('id', 'circle') - .attr('transform', 'translate(' + outerRadius + ',' + outerRadius + ')'); + .attr('transform', 'translate(' + xtrans + ',' + outerRadius + ')'); // mouseover target for when the mouse leaves the diagram svg.append('circle') @@ -413,7 +425,9 @@ var QDR = (function (QDR) { let msg = 'There is no message traffic'; if (addressLen !== 0) msg += ' for the selected addresses'; - $.notify($('#noTraffic'), msg, {clickToHide: false, autoHide: false, arrowShow: false, className: 'Warning'}); + let autoHide = outerRadius === MIN_RADIUS; + $.notify($('#noTraffic'), msg, {clickToHide: autoHide, autoHide: autoHide, arrowShow: false, className: 'Warning'}); + $('.notifyjs-wrapper').css('z-index', autoHide ? 3 : 0); } }); emptyCircle(); http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/plugin/js/navbar.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/navbar.js b/console/stand-alone/plugin/js/navbar.js index c127e85..c17cd77 100644 --- a/console/stand-alone/plugin/js/navbar.js +++ b/console/stand-alone/plugin/js/navbar.js @@ -26,7 +26,7 @@ var QDR = (function (QDR) { QDR.breadcrumbs = [ { - content: '<i class="icon-cogs"></i> Connect', + content: '<i class="icon-power"></i> Connect', title: 'Connect to a router', isValid: function () { return true; }, href: '#/connect', @@ -47,7 +47,7 @@ var QDR = (function (QDR) { name: 'Entities' }, { - content: '<i class="icon-star-empty"></i> Topology', + content: '<i class="code-branch"></i> Topology', title: 'View router network topology', isValid: function (QDRService) { return QDRService.management.connection.is_connected(); }, href: '#/topology', @@ -68,11 +68,10 @@ var QDR = (function (QDR) { name: 'Message Flow' }, { - content: '<i class="icon-align-left"></i> Schema', + content: '<i class="icon-schema"></i> Schema', title: 'View dispatch schema', isValid: function (QDRService) { return QDRService.management.connection.is_connected(); }, href: '#/schema', - right: true, name: 'Schema' } ]; --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@qpid.apache.org For additional commands, e-mail: commits-h...@qpid.apache.org