External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

Wraps long names of devices in the network UI at 25 characters

Browse Source
This commit is contained in:
Ben Thomasson 2018-07-10 10:25:06 -04:00
parent 3b3ae9f7f5
commit 45cece8f57
No known key found for this signature in database
GPG Key ID: 1CF3F568D230D784
6 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui/client/src/network-ui/default.partial.svg
View File

@ -49,8 +49,10 @@
filter="url(#background)"
text-anchor="middle"
x="0"
y="73"> {{item.name}}
y="73"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
<text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">
<tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
<text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>

8
awx/ui/client/src/network-ui/host.partial.svg
View File

@ -77,13 +77,15 @@
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
</g>
</g>
<g>
<g ng-show="item.icon || current_scale > 0.5">
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__host-text--selected' : 'NetworkUI--hidden'}}"
filter="url(#background)"
text-anchor="middle"
x="0"
y="50"> {{item.name}}
y="50"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
<text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">
<tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
<text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>

6
awx/ui/client/src/network-ui/network.ui.app.js
View File

@ -19,6 +19,7 @@ var inventoryToolbox = require('./inventory.toolbox.directive.js');
var debug = require('./debug.directive.js');
var test_results = require('./test_results.directive.js');
var awxNetworkUI = require('./network.ui.directive.js');
var util = require('./util.js');
export default
angular.module('networkUI', [
@ -27,6 +28,11 @@ export default
networkDetailsDirective.name,
networkZoomWidget.name
])
.filter('chunk', function () {
return function(input, size) {
return util.chunkSubstr(input, size);
};
})
.controller('NetworkUIController', NetworkUIController.NetworkUIController)
.directive('awxNetCursor', cursor.cursor)
.directive('awxNetDebug', debug.debug)

7
awx/ui/client/src/network-ui/router.partial.svg
View File

@ -75,7 +75,10 @@
filter="url(#background)"
text-anchor="middle"
x="0"
y="70"> {{item.name}}</text>
<text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
y="70"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
<text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">
<tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
</g>
</g>

7
awx/ui/client/src/network-ui/switch.partial.svg
View File

@ -77,7 +77,10 @@
filter="url(#background)"
text-anchor="middle"
x="0"
y="70"> {{item.name}}</text>
<text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
y="70"> <tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
<text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">
<tspan x="0" dy="20" ng-repeat="chunk in item.name|chunk:25">{{chunk}}</tspan>
</text>
</g>
</g>

12
awx/ui/client/src/network-ui/util.js
View File

@ -180,3 +180,15 @@ function pCase(x, y, x1, y1, x2, y2) {
return param;
}
exports.pCase = pCase;
function chunkSubstr(str, size) {
const numChunks = Math.ceil(str.length / size);
const chunks = new Array(numChunks);
for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
chunks[i] = str.substr(o, size);
}
return chunks;
}
exports.chunkSubstr = chunkSubstr;