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

Adjust theme, add testing

Browse Source
This commit is contained in:
gconsidine 2017-04-26 22:13:44 -04:00
parent 90b3378725
commit 9d51576e89
11 changed files with 110 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
awx/ui/client/components/_common.less
View File

@ -1,17 +0,0 @@
.at-Button(@bg, @bg-hover: @bg, @color, @color-hover: @color) {
color: @color;
background-color: @bg;
padding: @at-padding-xs @at-padding-md;
padding-bottom: @at-padding-xs + 1;
&:hover {
color: @color-hover;
background-color: @bg-hover;
}
}
.at-Button--success { .at-Button(@at-success, @at-success-dark, @at-white) }
.at-Button--link { .at-Button(@at-link, @at-link-dark, @at-white) }
.at-Button--danger { .at-Button(@at-danger, @at-danger, @at-white) }
.at-Button--light { .at-Button(@at-white, @at-gray-light, @at-gray-dark) }

1
awx/ui/client/components/_index.less
View File

@ -1,4 +1,3 @@
@import '_common';
@import 'badge/_index';
@import 'input/_index';
@import 'panel/_index';

19
awx/ui/client/components/input/_index.less
View File

@ -1,29 +1,12 @@
.at-InputSearch {
}
.at-InputSearch-field {
.at-placeholder;
.at-placeholder(@at-gray-dark);
border-color: @at-gray-light;
background-color: @at-white;
font-size: @at-font-md;
@include placeholder(@at-gray);
}
.at-InputSearch-field:focus {
border-color: @at-gray-light;
}
.at-Input-searchButton {
.at-buttonColor;
padding: 4px 10px;
padding-bottom: 5px;
font-size: @at-font-lg;
}
.at-Input-searchButton:hover {
.at-buttonColorHover;
}

2
awx/ui/client/components/input/search.partial.html
View File

@ -3,7 +3,7 @@
class="form-control at-InputSearch-field"
placeholder="{{ config.placeholder }}" />
<div class="input-group-btn">
<button class="btn btn-default at-Input-searchButton" type="button">
<button class="btn at-Button--default at-Button--icon" type="button">
<span class="fa fa-search"></span>
</button>
</div>

7
awx/ui/client/test/index.js Normal file
View File

@ -0,0 +1,7 @@
import 'angular';
import 'angular-mocks';
import '../components/index.js';
import './panel.spec.js';

42
awx/ui/client/test/karma.conf.js
View File

@ -1,18 +1,46 @@
let path = require('path');
module.exports = config => {
config.set({
basePath: '..',
basePath: '',
singleRun: true,
autoWatch: true,
autoWatch: false,
colors: true,
frameworks: ['jasmine'],
browsers: ['PhantomJS'],
reporters: ['mocha'],
reporters: ['progress'],
files: [
'components/**/*.js',
'test/*.spec.js'
'./index.js',
'../components/**/*.html'
],
plugins: [
'karma-jasmine'
'karma-mocha-reporter'
'karma-webpack',
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'../components/index.js': 'webpack',
'../components/**/*.html': 'ng-html2js',
'./index.js': 'webpack'
},
ngHtml2JsPreprocessor: {
moduleName: 'at.test.templates',
prependPrefix: '/'
},
webpack: {
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}
]
}
},
webpackMiddleware: {
noInfo: 'errors-only'
}
});
};

23
awx/ui/client/test/panel.spec.js
View File

@ -1,20 +1,25 @@
describe('Components | panel', () => {
var $compile,
$rootScope;
let $compile;
let $rootScope;
beforeEach(module('at.components'));
beforeEach(done => {
angular.mock.module('at.components')
angular.mock.module('at.test.templates');
beforeEach(inject((_$compile_, _$rootScope_) => {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
inject((_$compile_, _$rootScope_) => {
$compile = _$compile_;
$rootScope = _$rootScope_;
done();
});
});
it('should load the navigation partial', function() {
console.log($rootScope);
var element = $compile('<at-panel></at-panel>')($rootScope);
$rootScope.$digest();
console.log(element.html());
//expect(element.html()).toContain('<nav class="navbar navbar-default" role="navigation">');
expect(element.html()).toContain('<nav class="navbar navbar-default" role="navigation">');
});
});

36
awx/ui/client/theme/_common.less
View File

@ -1,3 +1,13 @@
/**
* For styles that are used in more than one place throughout the application.
*
* 1. Content
* 2. Buttons
*
*/
// 1. Content
// ------------------------------------------------------------------------------------------------
.at-Title-row {
align-items: center;
flex: 1 0 auto;
@ -12,3 +22,29 @@
text-transform: uppercase;
}
// 2. Buttons
// ------------------------------------------------------------------------------------------------
.at-Button--success {
.at-Button(@at-success, @at-white);
}
.at-Button--link {
.at-Button(@at-link, @at-white);
}
.at-Button--danger {
.at-Button(@at-danger, @at-white);
}
.at-Button--default {
.at-Button(@at-white, @at-gray);
border-color: @at-gray-light;
&:hover {
background: @at-gray-lightest;
}
}
.at-Button--icon {
padding: @at-padding-xxs @at-padding-sm;
font-size: @at-font-lg;
}

25
awx/ui/client/theme/_mixins.less
View File

@ -1,23 +1,22 @@
.at-placeholder {
.at-placeholder(@color) {
&:-moz-placeholder {
color: @at-gray-dark;
color: @color;
}
&:-ms-input-placeholder {
color: @at-gray-dark;
color: @color;
}
&::-webkit-input-placeholder {
color: @at-gray-dark;
color: @color;
}
}
.at-buttonColor () {
background-color: @at-white;
border-color: @at-gray-light;
color: @at-gray;
}
.at-Button(@bg, @color) {
color: @color;
background-color: @bg;
padding: @at-padding-xs @at-padding-md;
.at-buttonColorHover () {
background-color: @at-gray-lighter;
border-color: @at-gray-light;
color: @at-gray;
&:hover {
color: @color;
background-color: '@{bg}-dark';
}
}

5
awx/ui/client/theme/_variables.less
View File

@ -1,7 +1,7 @@
@at-white: #ffffff;
@at-gray-lightest: #f6f6f6;
@at-gray-lighter: #fafafa;
@at-gray-lightest: #fafafa;
@at-gray-lighter: #f6f6f6;
@at-gray-light: #b7b7b7;
@at-gray: #848992;
@at-gray-dark: #707070;
@ -18,6 +18,7 @@
@at-font-md: 14px;
@at-font-lg: 16px;
@at-padding-xxs: 5px;
@at-padding-xs: 6px;
@at-padding-sm: 10px;
@at-padding-md: 20px;

1
awx/ui/package.json
View File

@ -67,6 +67,7 @@
"karma-html2js-preprocessor": "^1.0.0",
"karma-jasmine": "^1.1.0",
"karma-junit-reporter": "^1.2.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sauce-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",