FALCON-790 Falcon UI to enable entity/process/feed edits and management. Contributed by Armando Reyna/Kenneth Ho
Project: http://git-wip-us.apache.org/repos/asf/falcon/repo Commit: http://git-wip-us.apache.org/repos/asf/falcon/commit/c4df0a5e Tree: http://git-wip-us.apache.org/repos/asf/falcon/tree/c4df0a5e Diff: http://git-wip-us.apache.org/repos/asf/falcon/diff/c4df0a5e Branch: refs/heads/master Commit: c4df0a5e919884804eef7596f524e17c3c23c1d2 Parents: adf53c8 Author: Srikanth Sundarrajan <[email protected]> Authored: Wed Apr 1 16:39:58 2015 +0530 Committer: Srikanth Sundarrajan <[email protected]> Committed: Wed Apr 1 16:39:58 2015 +0530 ---------------------------------------------------------------------- .gitignore | 7 +- CHANGES.txt | 3 + LICENSE.txt | 9 + docs/license/grunt-cli-LICENCE.txt | 22 + docs/license/node-LICENCE.txt | 18 + docs/license/npm-LICENCE.txt | 17 + falcon-ui/Gruntfile.js | 268 ++ falcon-ui/Installation-steps.txt | 47 + falcon-ui/app/SpecRunner.html | 58 + falcon-ui/app/config/loginData.js | 5 + falcon-ui/app/css/bootstrap/less/.csscomb.json | 297 ++ falcon-ui/app/css/bootstrap/less/.csslintrc | 19 + falcon-ui/app/css/bootstrap/less/alerts.less | 68 + falcon-ui/app/css/bootstrap/less/badges.less | 55 + falcon-ui/app/css/bootstrap/less/bootstrap.less | 50 + .../app/css/bootstrap/less/breadcrumbs.less | 26 + .../app/css/bootstrap/less/button-groups.less | 240 ++ falcon-ui/app/css/bootstrap/less/buttons.less | 157 ++ falcon-ui/app/css/bootstrap/less/carousel.less | 243 ++ falcon-ui/app/css/bootstrap/less/close.less | 33 + falcon-ui/app/css/bootstrap/less/code.less | 68 + .../bootstrap/less/component-animations.less | 31 + falcon-ui/app/css/bootstrap/less/dropdowns.less | 215 ++ falcon-ui/app/css/bootstrap/less/forms.less | 540 ++++ .../app/css/bootstrap/less/glyphicons.less | 233 ++ falcon-ui/app/css/bootstrap/less/grid.less | 84 + .../app/css/bootstrap/less/input-groups.less | 166 ++ falcon-ui/app/css/bootstrap/less/jumbotron.less | 48 + falcon-ui/app/css/bootstrap/less/labels.less | 64 + .../app/css/bootstrap/less/list-group.less | 131 + falcon-ui/app/css/bootstrap/less/media.less | 56 + falcon-ui/app/css/bootstrap/less/mixins.less | 39 + .../app/css/bootstrap/less/mixins/alerts.less | 14 + .../less/mixins/background-variant.less | 8 + .../bootstrap/less/mixins/border-radius.less | 18 + .../app/css/bootstrap/less/mixins/buttons.less | 50 + .../css/bootstrap/less/mixins/center-block.less | 7 + .../app/css/bootstrap/less/mixins/clearfix.less | 22 + .../app/css/bootstrap/less/mixins/forms.less | 81 + .../css/bootstrap/less/mixins/gradients.less | 59 + .../bootstrap/less/mixins/grid-framework.less | 91 + .../app/css/bootstrap/less/mixins/grid.less | 122 + .../css/bootstrap/less/mixins/hide-text.less | 21 + .../app/css/bootstrap/less/mixins/image.less | 34 + .../app/css/bootstrap/less/mixins/labels.less | 12 + .../css/bootstrap/less/mixins/list-group.less | 29 + .../css/bootstrap/less/mixins/nav-divider.less | 10 + .../less/mixins/nav-vertical-align.less | 9 + .../app/css/bootstrap/less/mixins/opacity.less | 8 + .../css/bootstrap/less/mixins/pagination.less | 23 + .../app/css/bootstrap/less/mixins/panels.less | 24 + .../css/bootstrap/less/mixins/progress-bar.less | 10 + .../css/bootstrap/less/mixins/reset-filter.less | 8 + .../app/css/bootstrap/less/mixins/resize.less | 6 + .../less/mixins/responsive-visibility.less | 15 + .../app/css/bootstrap/less/mixins/size.less | 10 + .../css/bootstrap/less/mixins/tab-focus.less | 9 + .../css/bootstrap/less/mixins/table-row.less | 28 + .../bootstrap/less/mixins/text-emphasis.less | 8 + .../bootstrap/less/mixins/text-overflow.less | 8 + .../bootstrap/less/mixins/vendor-prefixes.less | 224 ++ falcon-ui/app/css/bootstrap/less/modals.less | 150 + falcon-ui/app/css/bootstrap/less/navbar.less | 655 +++++ falcon-ui/app/css/bootstrap/less/navs.less | 242 ++ falcon-ui/app/css/bootstrap/less/normalize.less | 425 +++ falcon-ui/app/css/bootstrap/less/pager.less | 55 + .../app/css/bootstrap/less/pagination.less | 88 + falcon-ui/app/css/bootstrap/less/panels.less | 243 ++ falcon-ui/app/css/bootstrap/less/popovers.less | 133 + falcon-ui/app/css/bootstrap/less/print.less | 101 + .../app/css/bootstrap/less/progress-bars.less | 105 + .../css/bootstrap/less/responsive-embed.less | 34 + .../bootstrap/less/responsive-utilities.less | 194 ++ .../app/css/bootstrap/less/scaffolding.less | 150 + falcon-ui/app/css/bootstrap/less/tables.less | 233 ++ falcon-ui/app/css/bootstrap/less/theme.less | 258 ++ .../app/css/bootstrap/less/thumbnails.less | 36 + falcon-ui/app/css/bootstrap/less/tooltip.less | 95 + falcon-ui/app/css/bootstrap/less/type.less | 313 +++ falcon-ui/app/css/bootstrap/less/utilities.less | 57 + falcon-ui/app/css/bootstrap/less/variables.less | 846 ++++++ falcon-ui/app/css/bootstrap/less/wells.less | 29 + falcon-ui/app/css/fonts/entypo.eot | Bin 0 -> 35540 bytes falcon-ui/app/css/fonts/entypo.less | 1190 ++++++++ falcon-ui/app/css/fonts/entypo.svg | 13 + falcon-ui/app/css/fonts/entypo.ttf | Bin 0 -> 35392 bytes falcon-ui/app/css/fonts/entypo.woff | Bin 0 -> 21916 bytes .../css/fonts/glyphicons-halflings-regular.eot | Bin 0 -> 20335 bytes .../css/fonts/glyphicons-halflings-regular.svg | 229 ++ .../css/fonts/glyphicons-halflings-regular.ttf | Bin 0 -> 41280 bytes .../css/fonts/glyphicons-halflings-regular.woff | Bin 0 -> 23320 bytes falcon-ui/app/css/img/ajax-loader.gif | Bin 0 -> 1849 bytes falcon-ui/app/css/img/falcon.png | Bin 0 -> 12349 bytes falcon-ui/app/css/main.css | 1 + falcon-ui/app/css/main.less | 78 + falcon-ui/app/css/styles/common.less | 223 ++ falcon-ui/app/css/styles/entities-list.less | 166 ++ falcon-ui/app/css/styles/form-pages.less | 330 +++ falcon-ui/app/css/styles/mixins.less | 64 + falcon-ui/app/css/styles/nav-header.less | 97 + falcon-ui/app/css/styles/progress-bar.less | 319 +++ falcon-ui/app/css/styles/server-messages.less | 60 + falcon-ui/app/css/variables.less | 864 ++++++ .../html/cluster/clusterFormGeneralStepTpl.html | 201 ++ .../html/cluster/clusterFormSummaryStepTpl.html | 77 + falcon-ui/app/html/cluster/clusterFormTpl.html | 71 + .../app/html/directives/entitiesListDv.html | 98 + .../app/html/directives/entitySummaryDv.html | 42 + falcon-ui/app/html/directives/navDv.html | 50 + .../app/html/directives/serverMessagesDv.html | 31 + .../app/html/directives/timeZoneSelectDv.html | 53 + falcon-ui/app/html/entityDetailsTpl.html | 34 + .../app/html/feed/feedFormClustersStepTpl.html | 152 + .../app/html/feed/feedFormGeneralStepTpl.html | 121 + .../app/html/feed/feedFormLocationStepTpl.html | 105 + .../html/feed/feedFormPropertiesStepTpl.html | 160 ++ .../app/html/feed/feedFormSummaryStepTpl.html | 159 ++ falcon-ui/app/html/feed/feedFormTpl.html | 97 + falcon-ui/app/html/formsTpl.html | 23 + falcon-ui/app/html/mainTpl.html | 39 + .../process/processFormClustersStepTpl.html | 96 + .../html/process/processFormGeneralStepTpl.html | 119 + .../processFormInputsAndOutputsStepTpl.html | 149 + .../process/processFormPropertiesStepTpl.html | 122 + .../html/process/processFormSummaryStepTpl.html | 168 ++ falcon-ui/app/html/process/processFormTpl.html | 95 + falcon-ui/app/index.html | 45 + falcon-ui/app/js/app.js | 141 + .../js/controllers/cluster/cluster-module.js | 306 +++ falcon-ui/app/js/controllers/controllers.js | 32 + .../app/js/controllers/dashboard-controller.js | 143 + .../app/js/controllers/entity/entity-module.js | 48 + .../app/js/controllers/entity/entity-view.js | 221 ++ .../feed/feed-clusters-controller.js | 117 + .../feed/feed-general-information-controller.js | 48 + .../feed/feed-location-controller.js | 44 + .../app/js/controllers/feed/feed-module.js | 34 + .../feed/feed-properties-controller.js | 42 + .../app/js/controllers/feed/feed-root-ctrl.js | 178 ++ .../controllers/feed/feed-summary-controller.js | 48 + .../app/js/controllers/header-controller.js | 59 + .../process/process-clusters-ctrl.js | 71 + .../process/process-general-information-ctrl.js | 66 + .../process/process-inputs-and-outputs-ctrl.js | 76 + .../js/controllers/process/process-module.js | 33 + .../process/process-properties-controller.js | 34 + .../js/controllers/process/process-root-ctrl.js | 117 + .../controllers/process/process-summary-ctrl.js | 83 + falcon-ui/app/js/controllers/root-controller.js | 91 + falcon-ui/app/js/directives/check-name.js | 135 + falcon-ui/app/js/directives/directives.js | 91 + falcon-ui/app/js/directives/entities-list.js | 189 ++ .../js/directives/entity-summary-directive.js | 65 + falcon-ui/app/js/directives/server-messages.js | 31 + .../app/js/directives/validation-message.js | 147 + falcon-ui/app/js/lib/angular-animate.min.js | 32 + falcon-ui/app/js/lib/angular-cookies.min.js | 7 + falcon-ui/app/js/lib/angular-messages.min.js | 9 + falcon-ui/app/js/lib/angular-mocks.js | 2380 ++++++++++++++++ falcon-ui/app/js/lib/angular.min.js | 249 ++ falcon-ui/app/js/lib/checklist-model.js | 99 + falcon-ui/app/js/lib/d3.min.js | 5 + falcon-ui/app/js/lib/jquery-1.11.1.min.js | 4 + .../app/js/lib/ui-bootstrap-tpls-0.11.0.min.js | 10 + falcon-ui/app/js/lib/uirouter.min.js | 8 + falcon-ui/app/js/lib/xml2json.min.js | 578 ++++ falcon-ui/app/js/services/common/falcon-api.js | 128 + falcon-ui/app/js/services/common/file-api.js | 62 + .../app/js/services/common/json-transformer.js | 109 + .../js/services/common/validation-service.js | 128 + .../js/services/common/xml-to-json-service.js | 80 + .../app/js/services/entity/entity-factory.js | 248 ++ .../app/js/services/entity/entity-messages.js | 57 + .../app/js/services/entity/entity-model.js | 155 ++ .../app/js/services/entity/entity-serializer.js | 510 ++++ falcon-ui/app/js/services/services.js | 32 + .../test/controllers/HeaderControllerSpec.js | 66 + .../app/test/controllers/MainControllerSpec.js | 203 ++ .../controllers/cluster/cluster-moduleSpec.js | 336 +++ .../entity/EntityRootControllerSpec.js | 90 + .../FeedGeneralInformationControllerSpec.js | 83 + .../feed/FeedLocationControllerSpec.js | 62 + .../feed/FeedPropertiesControllerSpec.js | 81 + .../test/controllers/feed/FeedRootCtrlSpec.js | 181 ++ .../feed/FeedSummaryControllerSpec.js | 68 + .../process/ProcessClustersCtrlSpec.js | 107 + .../ProcessGeneralInformationCtrlSpec.js | 111 + .../process/ProcessInputsAndOutputsCtrlSpec.js | 52 + .../process/ProcessPropertiesControllerSpec.js | 44 + .../controllers/process/ProcessRootCtrlSpec.js | 136 + .../process/ProcessSummaryCtrlSpec.js | 88 + falcon-ui/app/test/directives/DirectivesSpec.js | 134 + .../directives/EntitySummaryDirectiveSpec.js | 88 + falcon-ui/app/test/e2e/ProcessE2E.js | 95 + falcon-ui/app/test/e2e/protractor.js | 7 + falcon-ui/app/test/lib/jasmine-2.0.2/boot.js | 120 + falcon-ui/app/test/lib/jasmine-2.0.2/console.js | 166 ++ .../app/test/lib/jasmine-2.0.2/jasmine-html.js | 390 +++ .../app/test/lib/jasmine-2.0.2/jasmine.css | 61 + falcon-ui/app/test/lib/jasmine-2.0.2/jasmine.js | 2593 ++++++++++++++++++ .../test/lib/jasmine-2.0.2/jasmine_favicon.png | Bin 0 -> 1486 bytes .../app/test/services/EntityFactorySpec.js | 103 + falcon-ui/app/test/services/EntityModelSpec.js | 51 + .../app/test/services/EntitySerializerSpec.js | 1286 +++++++++ .../app/test/services/FalconServiceSpec.js | 77 + .../app/test/services/JsonTransformerSpec.js | 144 + .../app/test/services/ValdationServiceSpec.js | 70 + falcon-ui/app/test/services/X2jsServiceSpec.js | 128 + falcon-ui/bower.json | 18 + falcon-ui/express-data/mockData.js | 204 ++ falcon-ui/karma.conf.js | 81 + falcon-ui/package.json | 38 + falcon-ui/pom.xml | 108 + falcon-ui/server.js | 143 + pom.xml | 1 + webapp/pom.xml | 36 + 216 files changed, 30097 insertions(+), 1 deletion(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index f823497..35b8256 100644 --- a/.gitignore +++ b/.gitignore @@ -36,4 +36,9 @@ build #log files logs -*.log \ No newline at end of file +*.log + +#Falcon UI NPM files +falcon-ui/dist +falcon-ui/node +falcon-ui/node_modules http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/CHANGES.txt ---------------------------------------------------------------------- diff --git a/CHANGES.txt b/CHANGES.txt index 6f7e992..163b04a 100755 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -5,6 +5,9 @@ Trunk (Unreleased) INCOMPATIBLE CHANGES NEW FEATURES + FALCON-790 Falcon UI to enable entity/process/feed edits and + management. (Armando Reyna/Kenneth Ho via Srikanth Sundarrajan) + FALCON-949 Force update feature (pavan kumar kolamuri via Suhas Vasu) FALCON-822 Add reverse look up API (Ajay Yadava via Suhas Vasu) http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/LICENSE.txt ---------------------------------------------------------------------- diff --git a/LICENSE.txt b/LICENSE.txt index 05eba55..13cb1dc 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -225,3 +225,12 @@ MIT license. For details, see docs/license/dust-helpers-LICENSE.txt This product bundles jquery 1.11.0, which is available under a MIT license. For details, see docs/license/jquery-LICENSE.txt + +This product bundles npm 1.4.3, which is available under a +MIT license. For details, see docs/license/npm-LICENSE.txt + +This product bundles node 0.10.30, which is available under a +MIT license. For details, see docs/license/node-LICENSE.txt + +This product bundles grunt-cli, which is available under a +MIT license. For details, see docs/license/grunt-cli-LICENSE.txt \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/docs/license/grunt-cli-LICENCE.txt ---------------------------------------------------------------------- diff --git a/docs/license/grunt-cli-LICENCE.txt b/docs/license/grunt-cli-LICENCE.txt new file mode 100644 index 0000000..4e51824 --- /dev/null +++ b/docs/license/grunt-cli-LICENCE.txt @@ -0,0 +1,22 @@ +Copyright (c) 2014 Tyler Kellen, contributors + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without +restriction, including without limitation the rights to use, +copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the +Software is furnished to do so, subject to the following +conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/docs/license/node-LICENCE.txt ---------------------------------------------------------------------- diff --git a/docs/license/node-LICENCE.txt b/docs/license/node-LICENCE.txt new file mode 100644 index 0000000..e81b287 --- /dev/null +++ b/docs/license/node-LICENCE.txt @@ -0,0 +1,18 @@ +Copyright Joyent, Inc. and other Node contributors. All rights reserved. +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to +deal in the Software without restriction, including without limitation the +rights to use, copy, modify, merge, publish, distribute, sublicense, and/or +sell copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS +IN THE SOFTWARE. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/docs/license/npm-LICENCE.txt ---------------------------------------------------------------------- diff --git a/docs/license/npm-LICENCE.txt b/docs/license/npm-LICENCE.txt new file mode 100644 index 0000000..ccd72b7 --- /dev/null +++ b/docs/license/npm-LICENCE.txt @@ -0,0 +1,17 @@ +Copyright (c) npm, Inc. and Contributors All rights reserved. + +npm is released under the Artistic License 2.0, subject to additional terms that are listed below. + +The text of the npm License follows and the text of the additional terms follows the Artistic License 2.0 terms: + +The Artistic License 2.0 + +Copyright (c) 2000-2006, The Perl Foundation. + +Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. + +Preamble + +This license establishes the terms under which a given free software Package may be copied, modified, distributed, and/or redistributed. The intent is that the Copyright Holder maintains some artistic control over the development of that Package while still keeping the Package available as open source and free software. + +You are always permitted to make arrangements wholly outside of this license directly with the Copyright Holder of a given Package. If the terms of this license do not permit the full use that you propose to make of the Package, you should contact the Copyright Holder and seek a different licensing arrangement. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/Gruntfile.js ---------------------------------------------------------------------- diff --git a/falcon-ui/Gruntfile.js b/falcon-ui/Gruntfile.js new file mode 100644 index 0000000..1fa44bb --- /dev/null +++ b/falcon-ui/Gruntfile.js @@ -0,0 +1,268 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +(function () { + "use strict"; + + module.exports = function (grunt) { + + grunt.initConfig({ + copy: { + resources: { + cwd: 'app', + src: ['html/**/*.html', 'index.html', 'config/*'], + dest: 'dist/', + expand: true + }, + + dependencies: { + cwd: 'app/', + src: ['css/fonts/*', 'css/img/*'], + dest: 'dist/', + expand: true + }, + + ambariview : { + cwd: 'dist', + src: ['**/*.*'], + dest: '../falcon-ambari-view/src/main/resources/ui/', + expand: true + } + }, + + concat: { + options: { + separator: '\n\n', + banner: '/**************************************************************/\n' + + '/*********Concatenated Vendor minified dependencies ***********/\n' + + '/**************************************************************/\n' + }, + vendor: { + src: [ + 'app/js/lib/jquery-1.11.1.min.js', + 'app/js/lib/angular.min.js', + 'app/js/lib/angular-cookies.min.js', + 'app/js/lib/uirouter.min.js', + 'app/js/lib/ui-bootstrap-tpls-0.11.0.min.js', + 'app/js/lib/d3.min.js', + 'app/js/lib/xml2json.min.js', + 'app/js/lib/angular-mocks.js', + 'app/js/lib/checklist-model.js', + 'app/js/lib/angular-animate.min.js', + 'app/js/lib/angular-messages.min.js' + ], + dest: 'dist/js/vendor.min.js' + } + }, + + uglify: { + options: { + beautify: true, + mangle: true, + compress: { warnings: false }, + preserveComments: false, + drop_console: false, + sourceMap: true, + banner: '/**** Apache Falcon UI ***/' + }, + main: { + files: { + 'dist/js/main.min.js': [ + 'app/js/controllers/**/*-module.js', + 'app/js/controllers/**/*.js', + 'app/js/directives/*.js', + 'app/js/services/**/*.js', + 'app/js/services/services.js', + 'app/js/app.js' + ] + } + } + }, + + jshint: { + options: { + eqeqeq: true, + curly: true, + undef: false, + unused: true, + force: true + }, + target: { + src: [ + 'app/js/app.js', + 'app/js/controllers/**/*.js', + 'app/js/directives/*.js', + 'app/js/services/*.js' + ] + } + }, + + csslint: { + strict: { + src: ['dist/css/*.css'] + } + }, + + datauri: { + 'default': { + options: { + classPrefix: 'data-' + }, + src: [ + 'css/img/*.png', + 'css/img/*.gif', + 'css/img/*.jpg', + 'css/img/*.bmp' + ], + dest: [ + 'tmp/base64Images.css' + ] + } + }, + + less: { + development: { + options: { + compress: true, + yuicompress: false, + optimization: 2, + cleancss: false, + syncImport: false, + strictUnits: false, + strictMath: true, + strictImports: true, + ieCompat: false + }, + files: { + 'dist/css/main.css': 'app/css/main.less' + } + } + }, + + watch: { + less: { + files: ['app/css/*.less', 'app/css/less/*.less', 'app/css/styles/*.less'], + tasks: ['less'], + options: { + nospawn: true, + livereload: true + } + }, + resources: { + options: { + livereload: true + }, + files: ['app/html/**/*.html', 'app/index.html', 'app/css/fonts/*', 'app/config/*'], + tasks: ['resources'] + }, + + source: { + options: { + livereload: true + }, + files: ['app/js/**/*.js', 'app/test/**/*Spec.js'], + tasks: ['jshint', 'uglify', 'karma:unit:run' ] + } + }, + + express: { + server: { + options: { + script: 'server.js' + } + } + }, + + clean: ["dist"], + + scp: { + options: { + host: '127.0.0.1', + username: 'root', + password: 'hadoop', + port: 2222 + }, + + sandbox: { + files: [ + { + cwd: 'dist', + src: '**', + filter: 'isFile', + // path on the server + dest: '/usr/hdp/2.2.0.0-913/falcon/webapp/falcon/public' + } + ] + } + }, + + karma: { + unit: { + configFile: 'karma.conf.js', + singleRun: true, + autoWatch: false + }, + continuous: { + configFile: 'karma.conf.js', + singleRun: false, + autoWatch: false, + background: true, + browsers: ['PhantomJS'] + } + } + + }); + + grunt.registerTask('resources', ['copy:resources']); + grunt.registerTask('dependencies', ['copy:dependencies']); + grunt.registerTask('test', ['karma:continuous']); + grunt.registerTask('build', ['clean', 'concat:vendor', 'uglify', 'less', 'resources', 'dependencies']); + grunt.registerTask('w', ['build', 'karma:unit:start', 'watch']); + grunt.registerTask('server', ['express', 'w']); + grunt.registerTask('default', ['server']); + grunt.registerTask('data64', ['datauri']); + + grunt.registerTask('dev', [ + 'express', 'clean', 'concat:vendor', 'uglify', 'less', 'resources', + 'dependencies', 'karma:unit:start', 'karma:continuous', 'watch' + ]); + + grunt.registerTask('deploy', [ + 'clean', 'concat:vendor', 'uglify', 'less', 'resources', + 'dependencies', 'karma:unit', 'scp' + ]); + + grunt.registerTask('ambariview', [ + 'clean', 'concat:vendor', 'uglify', 'less', 'resources', + 'dependencies', 'karma:unit', 'copy:ambariview']); + + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-contrib-csslint'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-scp'); + grunt.loadNpmTasks('grunt-express-server'); + grunt.loadNpmTasks('grunt-datauri'); + grunt.loadNpmTasks('grunt-karma'); + grunt.loadNpmTasks('grunt-contrib-concat'); + + }; + +}()); http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/Installation-steps.txt ---------------------------------------------------------------------- diff --git a/falcon-ui/Installation-steps.txt b/falcon-ui/Installation-steps.txt new file mode 100644 index 0000000..3f9968d --- /dev/null +++ b/falcon-ui/Installation-steps.txt @@ -0,0 +1,47 @@ +# Licensed to the Apache Software Foundation (ASF) under one +# or more contributor license agreements. See the NOTICE file +# distributed with this work for additional information +# regarding copyright ownership. The ASF licenses this file +# to you under the Apache License, Version 2.0 (the +# "License"); you may not use this file except in compliance +# with the License. You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +A. Building & Installing Falcon-UI +=============================== + +0. Prerequisites +------------------ + +You would need the following installed: + +* JDK 1.7+ +* Maven 3.x+ + +1. Building Falcon +------------------ + +* cd falcon-ui +* mvn clean install + + +2. Deploying Falcon to sandbox +------------------- + +- grunt deploy +This will build and send to the sandbox /usr/hdp/2.2.0.0-913/falcon/webapp/falcon/public/ location the falcon webapp +Then navigate to localhost:15000 + + +3. To test in the express server +------------------- +- grunt dev +This will launch an express server with the falcon-ui to localhost:3000 +(You can test there all UI related behaviours and express will mock all falcon REST calls) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/SpecRunner.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/SpecRunner.html b/falcon-ui/app/SpecRunner.html new file mode 100644 index 0000000..1b4fd12 --- /dev/null +++ b/falcon-ui/app/SpecRunner.html @@ -0,0 +1,58 @@ +<!-- +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +--> +<!DOCTYPE HTML> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <title>Jasmine Spec Runner v2.0.2</title> + + <link rel="shortcut icon" type="image/png" href="test/lib/jasmine-2.0.2/jasmine_favicon.png"> + <link rel="stylesheet" type="text/css" href="test/lib/jasmine-2.0.2/jasmine.css"> + + <script type="text/javascript" src="test/lib/jasmine-2.0.2/jasmine.js"></script> + <script type="text/javascript" src="test/lib/jasmine-2.0.2/jasmine-html.js"></script> + <script type="text/javascript" src="test/lib/jasmine-2.0.2/boot.js"></script> + + <script type="text/javascript" src="js/lib/angular.js"></script> + <script type="text/javascript" src="js/lib/angular-mocks.js"></script> + + <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js"></script> + + <script type="text/javascript" src="js/lib/d3.min.js"></script> + <script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.11.0.min.js"></script> + <script type="text/javascript" src="js/lib/uirouter.min.js"></script> + <script type="text/javascript" src="js/lib/xml2json.min.js"></script> + + <!-- include source files here... --> + <script type="text/javascript" src="js/controllers/controllers.js"></script> + <script type="text/javascript" src="js/controllers/layout.js"></script> + <script type="text/javascript" src="js/services/services.js"></script> + + + <!-- include spec files here... --> + <script type="text/javascript" src="test/controllers/HeaderControllerSpec.js"></script> + <script type="text/javascript" src="test/controllers/ClusterFormControllerSpec.js"></script> + <script type="text/javascript" src="test/services/EntityModelSpec.js"></script> + +</head> + +<body> +</body> +</html> http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/config/loginData.js ---------------------------------------------------------------------- diff --git a/falcon-ui/app/config/loginData.js b/falcon-ui/app/config/loginData.js new file mode 100644 index 0000000..ecd6701 --- /dev/null +++ b/falcon-ui/app/config/loginData.js @@ -0,0 +1,5 @@ +{ + "timeOut": 900000, + "user": "ambari-qa", + "password": "admin" +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/.csscomb.json ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/.csscomb.json b/falcon-ui/app/css/bootstrap/less/.csscomb.json new file mode 100644 index 0000000..8456e41 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/.csscomb.json @@ -0,0 +1,297 @@ +{ + "always-semicolon": true, + "block-indent": 2, + "colon-space": [0, 1], + "color-case": "lower", + "color-shorthand": true, + "combinator-space": true, + "element-case": "lower", + "eof-newline": true, + "leading-zero": false, + "remove-empty-rulesets": true, + "rule-indent": 2, + "stick-brace": " ", + "strip-spaces": true, + "unitless-zero": true, + "vendor-prefix-align": true, + "sort-order": [ + [ + "position", + "top", + "right", + "bottom", + "left", + "z-index", + "display", + "float", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", + "-webkit-appearance", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "overflow", + "overflow-x", + "overflow-y", + "-webkit-overflow-scrolling", + "-ms-overflow-x", + "-ms-overflow-y", + "-ms-overflow-style", + "clip", + "clear", + "font", + "font-family", + "font-size", + "font-style", + "font-weight", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "line-height", + "color", + "text-align", + "-webkit-text-align-last", + "-moz-text-align-last", + "-ms-text-align-last", + "text-align-last", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-decoration", + "text-indent", + "text-justify", + "text-outline", + "-ms-text-overflow", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-shadow", + "text-transform", + "text-wrap", + "-webkit-text-size-adjust", + "-ms-text-size-adjust", + "letter-spacing", + "-ms-word-break", + "word-break", + "word-spacing", + "-ms-word-wrap", + "word-wrap", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "white-space", + "vertical-align", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + "pointer-events", + "cursor", + "visibility", + "zoom", + "flex-direction", + "flex-order", + "flex-pack", + "flex-align", + "table-layout", + "empty-cells", + "caption-side", + "border-spacing", + "border-collapse", + "content", + "quotes", + "counter-reset", + "counter-increment", + "resize", + "-webkit-user-select", + "-moz-user-select", + "-ms-user-select", + "-o-user-select", + "user-select", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "background", + "background-color", + "background-image", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", + "filter:progid:DXImageTransform.Microsoft.gradient", + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", + "filter", + "background-repeat", + "background-attachment", + "background-position", + "background-position-x", + "background-position-y", + "-webkit-background-clip", + "-moz-background-clip", + "background-clip", + "background-origin", + "-webkit-background-size", + "-moz-background-size", + "-o-background-size", + "background-size", + "border", + "border-color", + "border-style", + "border-width", + "border-top", + "border-top-color", + "border-top-style", + "border-top-width", + "border-right", + "border-right-color", + "border-right-style", + "border-right-width", + "border-bottom", + "border-bottom-color", + "border-bottom-style", + "border-bottom-width", + "border-left", + "border-left-color", + "border-left-style", + "border-left-width", + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "-webkit-border-image", + "-moz-border-image", + "-o-border-image", + "border-image", + "-webkit-border-image-source", + "-moz-border-image-source", + "-o-border-image-source", + "border-image-source", + "-webkit-border-image-slice", + "-moz-border-image-slice", + "-o-border-image-slice", + "border-image-slice", + "-webkit-border-image-width", + "-moz-border-image-width", + "-o-border-image-width", + "border-image-width", + "-webkit-border-image-outset", + "-moz-border-image-outset", + "-o-border-image-outset", + "border-image-outset", + "-webkit-border-image-repeat", + "-moz-border-image-repeat", + "-o-border-image-repeat", + "border-image-repeat", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "-webkit-box-shadow", + "-moz-box-shadow", + "box-shadow", + "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", + "opacity", + "-ms-interpolation-mode", + "-webkit-transition", + "-moz-transition", + "-ms-transition", + "-o-transition", + "transition", + "-webkit-transition-delay", + "-moz-transition-delay", + "-ms-transition-delay", + "-o-transition-delay", + "transition-delay", + "-webkit-transition-timing-function", + "-moz-transition-timing-function", + "-ms-transition-timing-function", + "-o-transition-timing-function", + "transition-timing-function", + "-webkit-transition-duration", + "-moz-transition-duration", + "-ms-transition-duration", + "-o-transition-duration", + "transition-duration", + "-webkit-transition-property", + "-moz-transition-property", + "-ms-transition-property", + "-o-transition-property", + "transition-property", + "-webkit-transform", + "-moz-transform", + "-ms-transform", + "-o-transform", + "transform", + "-webkit-transform-origin", + "-moz-transform-origin", + "-ms-transform-origin", + "-o-transform-origin", + "transform-origin", + "-webkit-animation", + "-moz-animation", + "-ms-animation", + "-o-animation", + "animation", + "-webkit-animation-name", + "-moz-animation-name", + "-ms-animation-name", + "-o-animation-name", + "animation-name", + "-webkit-animation-duration", + "-moz-animation-duration", + "-ms-animation-duration", + "-o-animation-duration", + "animation-duration", + "-webkit-animation-play-state", + "-moz-animation-play-state", + "-ms-animation-play-state", + "-o-animation-play-state", + "animation-play-state", + "-webkit-animation-timing-function", + "-moz-animation-timing-function", + "-ms-animation-timing-function", + "-o-animation-timing-function", + "animation-timing-function", + "-webkit-animation-delay", + "-moz-animation-delay", + "-ms-animation-delay", + "-o-animation-delay", + "animation-delay", + "-webkit-animation-iteration-count", + "-moz-animation-iteration-count", + "-ms-animation-iteration-count", + "-o-animation-iteration-count", + "animation-iteration-count", + "-webkit-animation-direction", + "-moz-animation-direction", + "-ms-animation-direction", + "-o-animation-direction", + "animation-direction" + ] + ] +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/.csslintrc ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/.csslintrc b/falcon-ui/app/css/bootstrap/less/.csslintrc new file mode 100644 index 0000000..005b862 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/.csslintrc @@ -0,0 +1,19 @@ +{ + "adjoining-classes": false, + "box-sizing": false, + "box-model": false, + "compatible-vendor-prefixes": false, + "floats": false, + "font-sizes": false, + "gradients": false, + "important": false, + "known-properties": false, + "outline-none": false, + "qualified-headings": false, + "regex-selectors": false, + "shorthand": false, + "text-indent": false, + "unique-headings": false, + "universal-selector": false, + "unqualified-attributes": false +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/alerts.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/alerts.less b/falcon-ui/app/css/bootstrap/less/alerts.less new file mode 100644 index 0000000..df070b8 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/alerts.less @@ -0,0 +1,68 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: @alert-padding; + margin-bottom: @line-height-computed; + border: 1px solid transparent; + border-radius: @alert-border-radius; + + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing @headings-color + color: inherit; + } + // Provide class for links that match alerts + .alert-link { + font-weight: @alert-link-font-weight; + } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: 5px; + } +} + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: (@alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +.alert-success { + .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); +} +.alert-info { + .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); +} +.alert-warning { + .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); +} +.alert-danger { + .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/badges.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/badges.less b/falcon-ui/app/css/bootstrap/less/badges.less new file mode 100644 index 0000000..20624f3 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/badges.less @@ -0,0 +1,55 @@ +// +// Badges +// -------------------------------------------------- + + +// Base class +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: @font-size-small; + font-weight: @badge-font-weight; + color: @badge-color; + line-height: @badge-line-height; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + background-color: @badge-bg; + border-radius: @badge-border-radius; + + // Empty badges collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for badges in buttons + .btn & { + position: relative; + top: -1px; + } + .btn-xs & { + top: 0; + padding: 1px 5px; + } + + // Hover state, but only for links + a& { + &:hover, + &:focus { + color: @badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } + } + + // Account for badges in navs + a.list-group-item.active > &, + .nav-pills > .active > a > & { + color: @badge-active-color; + background-color: @badge-active-bg; + } + .nav-pills > li > a > & { + margin-left: 3px; + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/bootstrap.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/bootstrap.less b/falcon-ui/app/css/bootstrap/less/bootstrap.less new file mode 100644 index 0000000..61b7747 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/bootstrap.less @@ -0,0 +1,50 @@ +// Core variables and mixins +@import "variables.less"; +@import "mixins.less"; + +// Reset and dependencies +@import "normalize.less"; +@import "print.less"; +@import "glyphicons.less"; + +// Core CSS +@import "scaffolding.less"; +@import "type.less"; +@import "code.less"; +@import "grid.less"; +@import "tables.less"; +@import "forms.less"; +@import "buttons.less"; + +// Components +@import "component-animations.less"; +@import "dropdowns.less"; +@import "button-groups.less"; +@import "input-groups.less"; +@import "navs.less"; +@import "navbar.less"; +@import "breadcrumbs.less"; +@import "pagination.less"; +@import "pager.less"; +@import "labels.less"; +@import "badges.less"; +@import "jumbotron.less"; +@import "thumbnails.less"; +@import "alerts.less"; +@import "progress-bars.less"; +@import "media.less"; +@import "list-group.less"; +@import "panels.less"; +@import "responsive-embed.less"; +@import "wells.less"; +@import "close.less"; + +// Components w/ JavaScript +@import "modals.less"; +@import "tooltip.less"; +@import "popovers.less"; +@import "carousel.less"; + +// Utility classes +@import "utilities.less"; +@import "responsive-utilities.less"; http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/breadcrumbs.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/breadcrumbs.less b/falcon-ui/app/css/bootstrap/less/breadcrumbs.less new file mode 100644 index 0000000..cb01d50 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/breadcrumbs.less @@ -0,0 +1,26 @@ +// +// Breadcrumbs +// -------------------------------------------------- + + +.breadcrumb { + padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; + margin-bottom: @line-height-computed; + list-style: none; + background-color: @breadcrumb-bg; + border-radius: @border-radius-base; + + > li { + display: inline-block; + + + li:before { + content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space + padding: 0 5px; + color: @breadcrumb-color; + } + } + + > .active { + color: @breadcrumb-active-color; + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/button-groups.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/button-groups.less b/falcon-ui/app/css/bootstrap/less/button-groups.less new file mode 100644 index 0000000..7021ecd --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/button-groups.less @@ -0,0 +1,240 @@ +// +// Button groups +// -------------------------------------------------- + +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:focus, + &:active, + &.active { + z-index: 2; + } + &:focus { + // Remove focus outline when dropdown JS adds it after closing the menu + outline: 0; + } + } +} + +// Prevent double borders when buttons are next to each other +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + margin-left: -5px; // Offset the first child's margin + &:extend(.clearfix all); + + .btn-group, + .input-group { + float: left; + } + > .btn, + > .btn-group, + > .input-group { + margin-left: 5px; + } +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group > .btn:first-child { + margin-left: 0; + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } +} +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); +} + +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + .border-right-radius(0); + } +} +.btn-group > .btn-group:last-child > .btn:first-child { + .border-left-radius(0); +} + +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { &:extend(.btn-xs); } +.btn-group-sm > .btn { &:extend(.btn-sm); } +.btn-group-lg > .btn { &:extend(.btn-lg); } + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} + +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + .box-shadow(none); + } +} + + +// Reposition the caret +.btn .caret { + margin-left: 0; +} +// Carets in other button sizes +.btn-lg .caret { + border-width: @caret-width-large @caret-width-large 0; + border-bottom-width: 0; +} +// Upside down carets for .dropup +.dropup .btn-lg .caret { + border-width: 0 @caret-width-large @caret-width-large; +} + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + > .btn, + > .btn-group, + > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + &:extend(.clearfix all); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; + } +} + +.btn-group-vertical > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child:not(:last-child) { + border-top-right-radius: @border-radius-base; + .border-bottom-radius(0); + } + &:last-child:not(:first-child) { + border-bottom-left-radius: @border-radius-base; + .border-top-radius(0); + } +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + .border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + .border-top-radius(0); +} + + + +// Justified button groups +// ---------------------- + +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + > .btn, + > .btn-group { + float: none; + display: table-cell; + width: 1%; + } + > .btn-group .btn { + width: 100%; + } + + > .btn-group .dropdown-menu { + left: auto; + } +} + + +// Checkbox and radio options +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot +// use `display: none;` or `visibility: hidden;` as that also hides the popover. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 for more. + +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { + position: absolute; + z-index: -1; + .opacity(0); +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/buttons.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/buttons.less b/falcon-ui/app/css/bootstrap/less/buttons.less new file mode 100644 index 0000000..492bdc6 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/buttons.less @@ -0,0 +1,157 @@ +// +// Buttons +// -------------------------------------------------- + + +// Base styles +// -------------------------------------------------- + +.btn { + display: inline-block; + margin-bottom: 0; // For input.btn + font-weight: @btn-font-weight; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + white-space: nowrap; + .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); + .user-select(none); + + &, + &:active, + &.active { + &:focus { + .tab-focus(); + } + } + + &:hover, + &:focus { + color: @btn-default-color; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + background-image: none; + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; // Future-proof disabling of clicks + .opacity(.65); + .box-shadow(none); + } +} + + +// Alternate buttons +// -------------------------------------------------- + +.btn-default { + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); +} +.btn-primary { + .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); +} +// Success appears as green +.btn-success { + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); +} +// Info appears as blue-green +.btn-info { + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); +} +// Warning appears as orange +.btn-warning { + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); +} + + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link { + color: @link-color; + font-weight: normal; + cursor: pointer; + border-radius: 0; + + &, + &:active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + .box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: underline; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); +} +.btn-sm { + // line-height: ensure proper height of button next to small input + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} +.btn-xs { + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} + + +// Block button +// -------------------------------------------------- + +.btn-block { + display: block; + width: 100%; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/carousel.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/carousel.less b/falcon-ui/app/css/bootstrap/less/carousel.less new file mode 100644 index 0000000..1644ddf --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/carousel.less @@ -0,0 +1,243 @@ +// +// Carousel +// -------------------------------------------------- + + +// Wrapper for the slide container and indicators +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; + + > .item { + display: none; + position: relative; + .transition(.6s ease-in-out left); + + // Account for jankitude on images + > img, + > a > img { + &:extend(.img-responsive); + line-height: 1; + } + } + + > .active, + > .next, + > .prev { + display: block; + } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } + +} + +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: @carousel-control-width; + .opacity(@carousel-control-opacity); + font-size: @carousel-control-font-size; + color: @carousel-control-color; + text-align: center; + text-shadow: @carousel-text-shadow; + // We can't have this transition here because WebKit cancels the carousel + // animation if you trip this while in the middle of another animation. + + // Set gradients for backgrounds + &.left { + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); + } + &.right { + left: auto; + right: 0; + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); + } + + // Hover/focus state + &:hover, + &:focus { + outline: 0; + color: @carousel-control-color; + text-decoration: none; + .opacity(.9); + } + + // Toggles + .icon-prev, + .icon-next, + .glyphicon-chevron-left, + .glyphicon-chevron-right { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + } + .icon-prev, + .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; + } + .icon-next, + .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; + } + .icon-prev, + .icon-next { + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + } + + + .icon-prev { + &:before { + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + } + } + .icon-next { + &:before { + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } + } +} + +// Optional indicator pips +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; + + li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + border: 1px solid @carousel-indicator-border-color; + border-radius: 10px; + cursor: pointer; + + // IE8-9 hack for event handling + // + // Internet Explorer 8-9 does not support clicks on elements without a set + // `background-color`. We cannot use `filter` since that's not viewed as a + // background color by the browser. Thus, a hack is needed. + // + // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we + // set alpha transparency for the best results possible. + background-color: #000 \9; // IE8 + background-color: rgba(0,0,0,0); // IE9 + } + .active { + margin: 0; + width: 12px; + height: 12px; + background-color: @carousel-indicator-active-bg; + } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports +.carousel-caption { + position: absolute; + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: @carousel-caption-color; + text-align: center; + text-shadow: @carousel-text-shadow; + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } +} + + +// Scale up controls for tablets and up +@media screen and (min-width: @screen-sm-min) { + + // Scale up the controls a smidge + .carousel-control { + .glyphicon-chevron-left, + .glyphicon-chevron-right, + .icon-prev, + .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/close.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/close.less b/falcon-ui/app/css/bootstrap/less/close.less new file mode 100644 index 0000000..9b4e74f --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/close.less @@ -0,0 +1,33 @@ +// +// Close icons +// -------------------------------------------------- + + +.close { + float: right; + font-size: (@font-size-base * 1.5); + font-weight: @close-font-weight; + line-height: 1; + color: @close-color; + text-shadow: @close-text-shadow; + .opacity(.2); + + &:hover, + &:focus { + color: @close-color; + text-decoration: none; + cursor: pointer; + .opacity(.5); + } + + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/code.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/code.less b/falcon-ui/app/css/bootstrap/less/code.less new file mode 100644 index 0000000..baa13df --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/code.less @@ -0,0 +1,68 @@ +// +// Code (inline and block) +// -------------------------------------------------- + + +// Inline and block code styles +code, +kbd, +pre, +samp { + font-family: @font-family-monospace; +} + +// Inline code +code { + padding: 2px 4px; + font-size: 90%; + color: @code-color; + background-color: @code-bg; + border-radius: @border-radius-base; +} + +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: @kbd-color; + background-color: @kbd-bg; + border-radius: @border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + box-shadow: none; + } +} + +// Blocks of code +pre { + display: block; + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); + font-size: (@font-size-base - 1); // 14px to 13px + line-height: @line-height-base; + word-break: break-all; + word-wrap: break-word; + color: @pre-color; + background-color: @pre-bg; + border: 1px solid @pre-border-color; + border-radius: @border-radius-base; + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: @pre-scrollable-max-height; + overflow-y: scroll; +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/component-animations.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/component-animations.less b/falcon-ui/app/css/bootstrap/less/component-animations.less new file mode 100644 index 0000000..9400a0d --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/component-animations.less @@ -0,0 +1,31 @@ +// +// Component animations +// -------------------------------------------------- + +// Heads up! +// +// We don't use the `.opacity()` mixin here since it causes a bug with text +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. + +.fade { + opacity: 0; + .transition(opacity .15s linear); + &.in { + opacity: 1; + } +} + +.collapse { + display: none; + + &.in { display: block; } + tr&.in { display: table-row; } + tbody&.in { display: table-row-group; } +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + .transition(height .35s ease); +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/dropdowns.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/dropdowns.less b/falcon-ui/app/css/bootstrap/less/dropdowns.less new file mode 100644 index 0000000..3eb7fc0 --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/dropdowns.less @@ -0,0 +1,215 @@ +// +// Dropdown menus +// -------------------------------------------------- + + +// Dropdown arrow/caret +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: @caret-width-base solid; + border-right: @caret-width-base solid transparent; + border-left: @caret-width-base solid transparent; +} + +// The dropdown wrapper (div) +.dropdown { + position: relative; +} + +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; +} + +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: @zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; // override default ul + list-style: none; + font-size: @font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + background-color: @dropdown-bg; + border: 1px solid @dropdown-fallback-border; // IE8 fallback + border: 1px solid @dropdown-border; + border-radius: @border-radius-base; + .box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; + + // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { + right: 0; + left: auto; + } + + // Dividers (basically an hr) within the dropdown + .divider { + .nav-divider(@dropdown-divider-bg); + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + } +} + +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + background-color: @dropdown-link-hover-bg; + } +} + +// Active state +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: @dropdown-link-active-bg; + } +} + +// Disabled state +// +// Gray out text and ensure the hover/focus state remains gray + +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: @dropdown-link-disabled-color; + } +} +// Nuke hover/focus effects +.dropdown-menu > .disabled > a { + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: not-allowed; + } +} + +// Open state for the dropdown +.open { + // Show the menu + > .dropdown-menu { + display: block; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: @font-size-small; + line-height: @line-height-base; + color: @dropdown-header-color; + white-space: nowrap; // as with > li > a +} + +// Backdrop to catch body clicks on mobile, etc. +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: (@zindex-dropdown - 10); +} + +// Right aligned dropdowns +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? + +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: @caret-width-base solid; + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; + } +} + + +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. + +@media (min-width: @grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + .dropdown-menu-right(); + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + .dropdown-menu-left(); + } + } +} + http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/bootstrap/less/forms.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/bootstrap/less/forms.less b/falcon-ui/app/css/bootstrap/less/forms.less new file mode 100644 index 0000000..2c5e9bf --- /dev/null +++ b/falcon-ui/app/css/bootstrap/less/forms.less @@ -0,0 +1,540 @@ +// +// Forms +// -------------------------------------------------- + + +// Normalize non-controls +// +// Restyle and baseline non-control form elements. + +fieldset { + padding: 0; + margin: 0; + border: 0; + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.5); + line-height: inherit; + color: @legend-color; + border: 0; + border-bottom: 1px solid @legend-border-color; +} + +label { + display: inline-block; + max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) + margin-bottom: 5px; + font-weight: bold; +} + + +// Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + .box-sizing(border-box); +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; // IE8-9 + line-height: normal; +} + +// Set the height of file controls to match text inputs +input[type="file"] { + display: block; +} + +// Make range inputs behave like textual form controls +input[type="range"] { + display: block; + width: 100%; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); +} + +// Adjust output element +output { + display: block; + padding-top: (@padding-base-vertical + 1); + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; +} + + +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] + +.form-control { + display: block; + width: 100%; + height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; + background-color: @input-bg; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid @input-border; + border-radius: @input-border-radius; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + // Customize the `:focus` state to imitate native WebKit styles. + .form-control-focus(); + + // Placeholder + .placeholder(); + + // Disabled and read-only inputs + // + // HTML5 says that controls under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, we + // don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content + } + + // Reset height for `textarea`s + textarea& { + height: auto; + } +} + + +// Search inputs in iOS +// +// This overrides the extra rounded corners on search inputs in iOS so that our +// `.form-control` class can properly style them. Note that this cannot simply +// be added to `.form-control` as it's not specific enough. For details, see +// https://github.com/twbs/bootstrap/issues/11586. + +input[type="search"] { + -webkit-appearance: none; +} + + +// Special styles for iOS temporal inputs +// +// In Mobile Safari, setting `display: block` on temporal inputs causes the +// text within the input to become vertically misaligned. +// As a workaround, we set a pixel line-height that matches the +// given height of the input. Since this fucks up everything else, we have to +// appropriately reset it for Internet Explorer and the size variations. + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + line-height: @input-height-base; + // IE8+ misaligns the text within date inputs, so we reset + line-height: @line-height-base ~"\0"; + + &.input-sm { + line-height: @input-height-small; + } + &.input-lg { + line-height: @input-height-large; + } +} + + +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: 15px; +} + + +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. + +.radio, +.checkbox { + position: relative; + display: block; + min-height: @line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; + + label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} + +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing +} + +// Radios and checkboxes on same line +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; // space out consecutive inline controls +} + +// Apply same disabled cursor tweak as for inputs +// Some special care is needed because <label>s don't inherit their parent's `cursor`. +// +// Note: Neither radios nor checkboxes can be readonly. +input[type="radio"], +input[type="checkbox"] { + &[disabled], + &.disabled, + fieldset[disabled] & { + cursor: not-allowed; + } +} +// These classes are used directly on <label>s +.radio-inline, +.checkbox-inline { + &.disabled, + fieldset[disabled] & { + cursor: not-allowed; + } +} +// These classes are used on elements with <label> descendants +.radio, +.checkbox { + &.disabled, + fieldset[disabled] & { + label { + cursor: not-allowed; + } + } +} + + +// Static form control text +// +// Apply class to a `p` element to make any string of text align with labels in +// a horizontal form layout. + +.form-control-static { + // Size it appropriately next to real form controls + padding-top: (@padding-base-vertical + 1); + padding-bottom: (@padding-base-vertical + 1); + // Remove default margin from `p` + margin-bottom: 0; + + &.input-lg, + &.input-sm { + padding-left: 0; + padding-right: 0; + } +} + + +// Form control sizing +// +// Build on `.form-control` with modifier classes to decrease or increase the +// height and font-size of form controls. + +.input-sm { + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} + +.input-lg { + .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); +} + + +// Form control feedback states +// +// Apply contextual and semantic states to individual form controls. + +.has-feedback { + // Enable absolute positioning + position: relative; + + // Ensure icons don't overlap text + .form-control { + padding-right: (@input-height-base * 1.25); + } +} +// Feedback icon (requires .glyphicon classes) +.form-control-feedback { + position: absolute; + top: (@line-height-computed + 5); // Height of the `label` and its margin + right: 0; + z-index: 2; // Ensure icon is above input groups + display: block; + width: @input-height-base; + height: @input-height-base; + line-height: @input-height-base; + text-align: center; +} +.input-lg + .form-control-feedback { + width: @input-height-large; + height: @input-height-large; + line-height: @input-height-large; +} +.input-sm + .form-control-feedback { + width: @input-height-small; + height: @input-height-small; + line-height: @input-height-small; +} + +// Feedback states +.has-success { + .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); +} +.has-warning { + .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); +} +.has-error { + .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); +} + + +// Reposition feedback icon if label is hidden with "screenreader only" state +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} + + +// Help text +// +// Apply to any element you wish to create light text for placement immediately +// below a form control. Use for general help, formatting, or instructional text. + +.help-block { + display: block; // account for any element using help-block + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast +} + + + +// Inline forms +// +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline +// forms begin stacked on extra small (mobile) devices and then go inline when +// viewports reach <768px. +// +// Requires wrapping inputs and labels with `.form-group` for proper display of +// default HTML form controls and our custom form controls (e.g., input groups). +// +// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. + +.form-inline { + + // Kick in the inline + @media (min-width: @screen-sm-min) { + // Inline-block all the things for "inline" + .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + + // In navbar-form, allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + width: auto; // Prevent labels from stacking above inputs in `.form-group` + vertical-align: middle; + } + + .input-group { + display: inline-table; + vertical-align: middle; + + .input-group-addon, + .input-group-btn, + .form-control { + width: auto; + } + } + + // Input groups need that 100% width though + .input-group > .form-control { + width: 100%; + } + + .control-label { + margin-bottom: 0; + vertical-align: middle; + } + + // Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match (which also avoids + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). + .radio, + .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + + label { + padding-left: 0; + } + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + + // Validation states + // + // Reposition the icon because it's now within a grid column and columns have + // `position: relative;` on them. Also accounts for the grid gutter padding. + .has-feedback .form-control-feedback { + top: 0; + } + } +} + + +// Horizontal forms +// +// Horizontal forms are built on grid classes and allow you to create forms with +// labels on the left and inputs on the right. + +.form-horizontal { + + // Consistent vertical alignment of radios and checkboxes + // + // Labels also get some reset styles, but that is scoped to a media query below. + .radio, + .checkbox, + .radio-inline, + .checkbox-inline { + margin-top: 0; + margin-bottom: 0; + padding-top: (@padding-base-vertical + 1); // Default padding plus a border + } + // Account for padding we're adding to ensure the alignment and of help text + // and other content below items + .radio, + .checkbox { + min-height: (@line-height-computed + (@padding-base-vertical + 1)); + } + + // Make form groups behave like rows + .form-group { + .make-row(); + } + + // Reset spacing and right align labels, but scope to media queries so that + // labels on narrow viewports stack the same as a default form example. + @media (min-width: @screen-sm-min) { + .control-label { + text-align: right; + margin-bottom: 0; + padding-top: (@padding-base-vertical + 1); // Default padding plus a border + } + } + + // Validation states + // + // Reposition the icon because it's now within a grid column and columns have + // `position: relative;` on them. Also accounts for the grid gutter padding. + .has-feedback .form-control-feedback { + top: 0; + right: (@grid-gutter-width / 2); + } + + // Form group sizes + // + // Quick utility class for applying `.input-lg` and `.input-sm` styles to the + // inputs and labels within a `.form-group`. + .form-group-lg { + @media (min-width: @screen-sm-min) { + .control-label { + padding-top: ((@padding-large-vertical * @line-height-large) + 1); + } + } + .form-control { + &:extend(.input-lg); + } + } + .form-group-sm { + @media (min-width: @screen-sm-min) { + .control-label { + padding-top: (@padding-small-vertical + 1); + } + } + .form-control { + &:extend(.input-sm); + } + } +}
