Repository: ignite Updated Branches: refs/heads/master 8dee53492 -> 3b7e16628
IGNITE-5244 Added web agent download button. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/3b7e1662 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/3b7e1662 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/3b7e1662 Branch: refs/heads/master Commit: 3b7e1662820f4cdaec8db7a8206295ca9dd45668 Parents: 8dee534 Author: Ilya Borisov <ibori...@gridgain.com> Authored: Fri May 19 15:58:26 2017 +0700 Committer: Andrey Novikov <anovi...@gridgain.com> Committed: Fri May 19 15:58:26 2017 +0700 ---------------------------------------------------------------------- .../components/web-console-header/component.js | 19 +++++++++-- .../components/web-console-header/style.scss | 36 ++++++++++++++++++-- .../components/web-console-header/template.pug | 11 +++++- .../frontend/app/primitives/btn/index.scss | 11 ++++-- .../frontend/gulpfile.babel.js/paths.js | 1 + .../frontend/public/images/icons/download.svg | 2 ++ .../frontend/public/images/icons/index.js | 1 + .../frontend/public/stylesheets/variables.scss | 1 + 8 files changed, 74 insertions(+), 8 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/app/components/web-console-header/component.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-header/component.js b/modules/web-console/frontend/app/components/web-console-header/component.js index 35d9be2..339ec46 100644 --- a/modules/web-console/frontend/app/components/web-console-header/component.js +++ b/modules/web-console/frontend/app/components/web-console-header/component.js @@ -21,10 +21,23 @@ import './style.scss'; export default { template, controller: class { - static $inject = ['$rootScope', 'IgniteBranding']; + static $inject = ['$scope', '$state', 'IgniteBranding']; - constructor($rootScope, branding) { - Object.assign(this, {$rootScope, branding}); + static webAgentDownloadVisibleStates = [ + 'base.configuration', + 'base.sql', + 'base.settings' + ]; + + constructor($scope, $state, branding) { + Object.assign(this, {$scope, $state, branding}); + } + + $onInit() { + this.$scope.$on('$stateChangeSuccess', () => { + this.isWebAgentDownloadVisible = + this.constructor.webAgentDownloadVisibleStates.some((state) => this.$state.includes(state)); + }); } }, transclude: { http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/app/components/web-console-header/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-header/style.scss b/modules/web-console/frontend/app/components/web-console-header/style.scss index 35f4d28..00ef141 100644 --- a/modules/web-console/frontend/app/components/web-console-header/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/style.scss @@ -19,13 +19,27 @@ web-console-header { @import "./../../../public/stylesheets/variables.scss"; $nav-item-margin: 42px; + $bottom-border-width: 4px; display: block; font-family: Roboto; font-size: 16px; - border-bottom: 4px solid red; + border-bottom: $bottom-border-width solid red; background: white; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + position: relative; + + &:after { + // Shows header shadow over absoluteley positioned child content, + // otherwise z ordering issues happen. + display: block; + width: 100%; + content: ''; + height: 20px; + position: absolute; + overflow: hidden; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.3); + bottom: -4px; + } .wch-slot { &>* { @@ -51,6 +65,7 @@ web-console-header { flex-wrap: wrap; align-items: center; padding: 18.5px 0; + position: relative; } .wch-logo { @@ -123,4 +138,21 @@ web-console-header { border-top: 1px solid darken($brand-warning, 15%); } } + + .wch-web-agent-download { + border-bottom-right-radius: $ignite-button-border-radius; + border-bottom-left-radius: $ignite-button-border-radius; + position: absolute; + top: 100%; + right: 0; + margin-top: $bottom-border-width; + // If defined on button, shadow would conflict with already present + // shadows of .btn-ignite, so we shadow wrapper instead. + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); + + .btn-ignite--primary { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/app/components/web-console-header/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-header/template.pug b/modules/web-console/frontend/app/components/web-console-header/template.pug index b2216c5..fa1a9fe 100644 --- a/modules/web-console/frontend/app/components/web-console-header/template.pug +++ b/modules/web-console/frontend/app/components/web-console-header/template.pug @@ -22,4 +22,13 @@ img.wch-logo(ng-src='{{::$ctrl.branding.headerLogo}}') .wch-slot.wch-slot-left(ng-transclude='slotLeft') - .wch-slot.wch-slot-right(ng-transclude='slotRight') \ No newline at end of file + .wch-slot.wch-slot-right(ng-transclude='slotRight') + + .wch-web-agent-download + a.btn-ignite.btn-ignite--primary( + ng-if='$ctrl.isWebAgentDownloadVisible' + href='/api/v1/downloads/agent' + target='_self' + ) + svg.icon-left(ignite-icon='download') + | Download Web Agent \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/app/primitives/btn/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/btn/index.scss b/modules/web-console/frontend/app/primitives/btn/index.scss index 7e45b7b..e10bef6 100644 --- a/modules/web-console/frontend/app/primitives/btn/index.scss +++ b/modules/web-console/frontend/app/primitives/btn/index.scss @@ -51,7 +51,7 @@ padding: $content-padding; border: none; - border-radius: 4px; + border-radius: $ignite-button-border-radius; text-align: center; outline: none; font-family: Roboto, sans-serif; @@ -94,11 +94,18 @@ &:hover, &.hover, &:active, &.active { &:not([disabled]) { - color: white; + color: white !important; background-color: change-color($accent-color, $lightness: 41%); + text-decoration: none !important; } } + // Override <a> styles + &:focus { + color: white !important; + text-decoration: none !important; + } + @include active-focus-shadows(); &[disabled] { http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/gulpfile.babel.js/paths.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/gulpfile.babel.js/paths.js b/modules/web-console/frontend/gulpfile.babel.js/paths.js index 311865e..0007c18 100644 --- a/modules/web-console/frontend/gulpfile.babel.js/paths.js +++ b/modules/web-console/frontend/gulpfile.babel.js/paths.js @@ -33,6 +33,7 @@ const appModulePaths = [ igniteModulesDir + '/**/app/modules/**/*.pug', igniteModulesDir + '/**/*.pug', igniteModulesDir + '/**/*.tpl.pug', + igniteModulesDir + '/**/app/**/*.js', igniteModulesDir + '/**/app/**/*.css', igniteModulesDir + '/**/app/**/*.scss', igniteModulesDir + '/**/app/data/*.json' http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/public/images/icons/download.svg ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/images/icons/download.svg b/modules/web-console/frontend/public/images/icons/download.svg new file mode 100644 index 0000000..0693c87 --- /dev/null +++ b/modules/web-console/frontend/public/images/icons/download.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg id="download-icon" version="1.1" viewBox="0 0 12 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect y="14.5" width="12" height="1.5" fill="currentColor"/><polygon points="5.2 9.1 1.1 4.9 0 6 6 12 12 6 10.9 4.9 6.8 9.1 6.8 0 5.2 0" fill="currentColor"/></svg> http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/public/images/icons/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/images/icons/index.js b/modules/web-console/frontend/public/images/icons/index.js index c3acc9a..d6e7c6f 100644 --- a/modules/web-console/frontend/public/images/icons/index.js +++ b/modules/web-console/frontend/public/images/icons/index.js @@ -20,3 +20,4 @@ export cross from './cross.svg'; export gear from './gear.svg'; export clock from './clock.svg'; export manual from './manual.svg'; +export download from './download.svg'; http://git-wip-us.apache.org/repos/asf/ignite/blob/3b7e1662/modules/web-console/frontend/public/stylesheets/variables.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/stylesheets/variables.scss b/modules/web-console/frontend/public/stylesheets/variables.scss index d75438f..22e4b9b 100644 --- a/modules/web-console/frontend/public/stylesheets/variables.scss +++ b/modules/web-console/frontend/public/stylesheets/variables.scss @@ -28,6 +28,7 @@ $ignite-background-color: #fff; $ignite-new-background-color: #f9f9f9; $ignite-header-color: #555; $ignite-invalid-color: $brand-primary; +$ignite-button-border-radius: 4px; // Color palette $ignite-brand-primary: #ee2b27; // Red