shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Cleanup icons after change to navbar

Browse Source
This commit is contained in:
Joe Fiorini 2015-04-29 13:04:57 -04:00
parent e75da8f921
commit 324b0250fc
15 changed files with 123 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui/static/img/Credentials.svg
View File

@ -4,9 +4,7 @@
<title>Credentials</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Credentials" sketch:type="MSArtboardGroup" fill="#242424">
<path d="M18.425,10.5 C18.425,5.60538462 22.4972,1.61538462 27.50165,1.61538462 C32.505275,1.61538462 36.575,5.60538462 36.575,10.5 L36.575,20.1923077 L18.425,20.1923077 L18.425,10.5 L18.425,10.5 Z M38.225,20.1923077 L38.225,10.5 C38.225,4.70076923 33.4235,0 27.50165,0 C21.57815,0 16.775,4.70076923 16.775,10.5 L16.775,20.1923077 L11,20.1923077 L11,42 L44,42 L44,20.1923077 L38.225,20.1923077 L38.225,20.1923077 Z" sketch:type="MSShapeGroup"></path>
</g>
<g id="Credentials">
<path d="M18.425,10.5 C18.425,5.60538462 22.4972,1.61538462 27.50165,1.61538462 C32.505275,1.61538462 36.575,5.60538462 36.575,10.5 L36.575,20.1923077 L18.425,20.1923077 L18.425,10.5 L18.425,10.5 Z M38.225,20.1923077 L38.225,10.5 C38.225,4.70076923 33.4235,0 27.50165,0 C21.57815,0 16.775,4.70076923 16.775,10.5 L16.775,20.1923077 L11,20.1923077 L11,42 L44,42 L44,20.1923077 L38.225,20.1923077 L38.225,20.1923077 Z"></path>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 898 B

19
awx/ui/static/js/main-menu/menu-default.partial.html
View File

@ -1,17 +1,28 @@
<a menu-item href="#/projects" title="Projects" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
<img src="/static/img/Projects.svg" class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<aw-icon name="Projects"></aw-icon>
</i>
Projects
</a>
<a menu-item href="#/inventories" title="Inventories" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
<img src="/static/img/CloudSync.svg" class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<aw-icon name="CloudSync"></aw-icon>
</i>
<!-- <img src="/static/img/CloudSync.svg" class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height"> -->
Inventories
</a>
<a menu-item href="#/job_templates" title="Job Templates" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
<img src="/static/img/JobTemplates.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<aw-icon name="JobTemplates"></aw-icon>
</i>
<!-- <img src="/static/img/JobTemplates.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height"> -->
Job Templates
</a>
<a menu-item href="#/jobs" title="Jobs" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
<img src="/static/img/Jobs.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
<aw-icon name="Jobs"></aw-icon>
</i>
<!-- <img src="/static/img/Jobs.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height"> -->
Jobs
</a>
<a href="#/setup" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">

12
awx/ui/static/js/setup-menu/hover-icon.block.less
View File

@ -1,5 +1,7 @@
/** @define HoverIcon */
@import 'shared/branding/colors.less';
.HoverIcon {
@media screen and (max-width: 571px) {
&--onlyLarge {
@ -13,6 +15,11 @@
}
&-icon {
width: auto;
&--color {
g, path {
transition: fill 0.15s ease-out;
}
}
&--opacity {
transition: opacity 0.3s ease-out;
opacity: 0;
@ -30,6 +37,11 @@
&--height {
height: 22px;
}
&--color {
path, g {
fill: @ansible-red;
}
}
}
}
}

4
awx/ui/static/js/setup-menu/main.js
View File

@ -1,11 +1,13 @@
import route from './setup.route';
import icon from 'tower/shared/icon/main';
export default
angular.module('setupMenu',
[ 'AboutAnsibleHelpModal',
'LicenseHelper',
'ConfigureTowerHelper',
'CreateCustomInventoryHelper'
'CreateCustomInventoryHelper',
icon.name
])
.config(['$routeProvider', function($routeProvider) {
var url = route.route;

6
awx/ui/static/js/setup-menu/setup-item.block.less
View File

@ -31,15 +31,15 @@
}
&-icon {
// height: 28px;
&--aside {
width: @icon-small-size;
flex: none; // do not let the flex container adjust this width!
align-self: flex-start;
}
width: @icon-large-size;
align-self: center;
img {
width: 100%;
}
}
&--noIcon {

30
awx/ui/static/js/setup-menu/setup-menu.partial.html
View File

@ -1,14 +1,18 @@
<section id="htmlTemplate" class="Container">
<nav class="SetupMenu Container-main">
<a href="#/credentials" class="SetupItem Media">
<i class="SetupItem-icon Media-figure"><img src="/static/img/Credentials.svg"></i>
<a href="#/credentials" class="SetupItem HoverIcon Media">
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
<aw-icon name="Credentials" inline></aw-icon>
</i>
<div class="Media-body">
<h4 class="SetupItem-title">Credentials</h4>
<p class="SetupItem-description">Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.</p>
</div>
</a>
<a href="#/users" class="SetupItem Media">
<i class="SetupItem-icon Media-figure"><img src="/static/img/Users.svg"></i>
<a href="#/users" class="SetupItem HoverIcon Media">
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
<aw-icon name="Users" inline></aw-icon>
</i>
<div class="Media-body">
<h4 class="SetupItem-title">Users</h4>
<p class="SetupItem-description">
@ -16,8 +20,10 @@
</p>
</div>
</a>
<a href="#/teams" class="SetupItem Media">
<i class="SetupItem-icon Media-figure"><img src="/static/img/Teams.svg"></i>
<a href="#/teams" class="SetupItem HoverIcon Media">
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
<aw-icon name="Teams" inline></aw-icon>
</i>
<div class="Media-block">
<h4 class="SetupItem-title">Teams</h4>
<p class="SetupItem-description">
@ -29,8 +35,8 @@
<aside class="Container-aside">
<nav class="SetupMenu Menu Menu--vertical">
<a href="#/organizations" class="SetupItem SetupItem--aside HoverIcon Media">
<i class="SetupItem-icon SetupItem-icon--aside Media-figure">
<img class="Icon HoverIcon-icon HoverIcon-icon--opacity" src="/static/img/Organizations.svg">
<i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
<aw-icon name="Organizations"></aw-icon>
</i>
<div class="Media-block">
<h4 class="SetupItem-title SetupItem-title--aside">Organizations</h4>
@ -40,8 +46,8 @@
</div>
</a>
<button class="SetupItem SetupItem--button SetupItem--aside HoverIcon Media" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
<i class="SetupItem-icon SetupItem-icon--aside Media-figure">
<img class="Icon HoverIcon-icon HoverIcon-icon--opacity" src="/static/img/ManagementJobs.svg">
<i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
<aw-icon name="ManagementJobs"></aw-icon>
</i>
<div class="Media-block">
<h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
@ -51,8 +57,8 @@
</div>
</button>
<button class="SetupItem SetupItem--button SetupItem--aside HoverIcon Media" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
<i class="SetupItem-icon SetupItem-icon--aside Media-figure">
<img class="Icon HoverIcon-icon HoverIcon-icon--opacity" src="/static/img/InventoryScripts.svg">
<i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
<aw-icon name="InventoryScripts"></aw-icon>
</i>
<div class="Media-block">
<h4 class="SetupItem-title SetupItem-title--aside">Inventory Scripts</h4>

7
awx/ui/static/js/shared/icon/icon.block.less Normal file
View File

@ -0,0 +1,7 @@
/** @define Icon */
.Icon {
path, g {
fill: #242424;
}
}

34
awx/ui/static/js/shared/icon/icon.directive.js Normal file
View File

@ -0,0 +1,34 @@
export default function() {
return {
restrict: 'E',
templateUrl: '/static/js/shared/icon/icon.partial.html',
scope: {
isInline: '@inline'
},
link: function(scope, element, attrs) {
var svg = $('svg', element);
var iconPath = '#' + attrs.name;
scope.isInline = scope.isInline === "true";
if(angular.isDefined(attrs.inline)) {
// Make a copy of the <symbol> tag to insert its contents into this
// element's svg tag
var content = $(iconPath).clone();
// Copy classes off the <symbol> so that we preserve any styling
// when we copy the item inline
var classes = $(iconPath).attr('class');
svg.attr('class', classes)
.html(content.contents());
} else {
// Using string concatenation here because <use> needs to be
// generated without a close tag, but jQuery will NOT allow us
// to create it without a closing tag :(
var use = '<use xlink:href="' + iconPath + '">';
svg.html(use);
}
}
};
}

2
awx/ui/static/js/shared/icon/icon.partial.html Normal file
View File

@ -0,0 +1,2 @@
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 55 42" width="100%" height="100%">
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 96 B

12
awx/ui/static/js/shared/icon/include-svg.directive.js Normal file
View File

@ -0,0 +1,12 @@
export default ['$http', function($http) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var path = attrs.href;
$http.get(path).then(function(response) {
element.append(response.data);
});
}
};
}]

7
awx/ui/static/js/shared/icon/main.js Normal file
View File

@ -0,0 +1,7 @@
import icon from './icon.directive';
import includeSvg from './include-svg.directive';
export default
angular.module('awIcon', [])
.directive('awIcon', icon)
.directive('includeSvg', includeSvg);

4
awx/ui/static/js/shared/menu/menu-item.block.less
View File

@ -31,6 +31,10 @@
}
}
&-hoverIcon {
width: 28px;
}
&--active {
flex-direction: column !important;
justify-content: center !important;

2
awx/ui/static/less/ansible-ui.less
View File

@ -1902,8 +1902,6 @@ tr td button i {
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

15
awx/ui/static/lib/nvd3/build/nv.d3.css
View File

@ -3,19 +3,6 @@
*/
svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Trying to get SVG to act like a greedy block in all browsers */
display: block;
width:100%;
height:100%;
}
/********************
Default CSS for an svg element nvd3 used
*/
@ -642,4 +629,4 @@ Interactive Layer
}
.nvd3 line.nv-guideline {
stroke: #ccc;
}
}

2
awx/ui/templates/ui/index.html
View File

@ -28,6 +28,8 @@
</head>
<body>
<include-svg href="{{ STATIC_URL }}img/icons.svg"></include-svg>
<main-menu
menu-style="portalMode ? 'minimal' : 'default'">
</main-menu>