diff --git a/res/app/components/stf/common-ui/blur-element/blur-element-directive.js b/res/app/components/stf/common-ui/blur-element/blur-element-directive.js new file mode 100644 index 00000000..fdf99d98 --- /dev/null +++ b/res/app/components/stf/common-ui/blur-element/blur-element-directive.js @@ -0,0 +1,20 @@ +module.exports = function blurElementDirective($parse, $timeout) { + return { + restrict: 'A', + link: function (scope, element, attrs) { + var model = $parse(attrs.blurElement) + + scope.$watch(model, function (value) { + if (value === true) { + $timeout(function () { + element[0].blur() + }) + } + }) + + element.bind('blur', function () { + scope.$apply(model.assign(scope, false)) + }) + } + } +} diff --git a/res/app/components/stf/common-ui/blur-element/blur-element-spec.js b/res/app/components/stf/common-ui/blur-element/blur-element-spec.js new file mode 100644 index 00000000..3ee589ec --- /dev/null +++ b/res/app/components/stf/common-ui/blur-element/blur-element-spec.js @@ -0,0 +1,23 @@ +describe('blurElement', function () { + + beforeEach(module('stf.blur-element')); + + var scope, compile; + + beforeEach(inject(function ($rootScope, $compile) { + scope = $rootScope.$new(); + compile = $compile; + })); + + it('should ...', function () { + + /* + To test your directive, you need to create some html that would use your directive, + send that through compile() then compare the results. + + var element = compile('
hi
')(scope); + expect(element.text()).toBe('hello, world'); + */ + + }); +}); \ No newline at end of file diff --git a/res/app/components/stf/common-ui/blur-element/index.js b/res/app/components/stf/common-ui/blur-element/index.js new file mode 100644 index 00000000..82ef62d0 --- /dev/null +++ b/res/app/components/stf/common-ui/blur-element/index.js @@ -0,0 +1,4 @@ +module.exports = angular.module('stf.blur-element', [ + +]) + .directive('blurElement', require('./blur-element-directive')) diff --git a/res/app/components/stf/common-ui/focus-element/focus-element-directive.js b/res/app/components/stf/common-ui/focus-element/focus-element-directive.js new file mode 100644 index 00000000..4c502eee --- /dev/null +++ b/res/app/components/stf/common-ui/focus-element/focus-element-directive.js @@ -0,0 +1,20 @@ +module.exports = function focusElementDirective($parse, $timeout) { + return { + restrict: 'A', + link: function (scope, element, attrs) { + var model = $parse(attrs.focusElement) + + scope.$watch(model, function (value) { + if (value === true) { + $timeout(function () { + element[0].focus() + }) + } + }) + + element.bind('blur', function () { + scope.$apply(model.assign(scope, false)) + }) + } + } +} diff --git a/res/app/components/stf/common-ui/focus-element/focus-element-spec.js b/res/app/components/stf/common-ui/focus-element/focus-element-spec.js new file mode 100644 index 00000000..209df9f7 --- /dev/null +++ b/res/app/components/stf/common-ui/focus-element/focus-element-spec.js @@ -0,0 +1,23 @@ +describe('focusElement', function () { + + beforeEach(module('stf.focus-element')); + + var scope, compile; + + beforeEach(inject(function ($rootScope, $compile) { + scope = $rootScope.$new(); + compile = $compile; + })); + + it('should ...', function () { + + /* + To test your directive, you need to create some html that would use your directive, + send that through compile() then compare the results. + + var element = compile('
hi
')(scope); + expect(element.text()).toBe('hello, world'); + */ + + }); +}); \ No newline at end of file diff --git a/res/app/components/stf/common-ui/focus-element/index.js b/res/app/components/stf/common-ui/focus-element/index.js new file mode 100644 index 00000000..9e7f3843 --- /dev/null +++ b/res/app/components/stf/common-ui/focus-element/index.js @@ -0,0 +1,4 @@ +module.exports = angular.module('stf.focus-element', [ + +]) + .directive('focusElement', require('./focus-element-directive')) diff --git a/res/app/components/stf/common-ui/icon-inside-input/icon-inside-input-directive.js b/res/app/components/stf/common-ui/icon-inside-input/icon-inside-input-directive.js new file mode 100644 index 00000000..da30ad20 --- /dev/null +++ b/res/app/components/stf/common-ui/icon-inside-input/icon-inside-input-directive.js @@ -0,0 +1,19 @@ +module.exports = function iconInsideInputDirective() { + return { + restrict: 'A', + link: function (scope, element, attrs) { + // NOTE: this doesn't work on Chrome with auto-fill, known Chrome bug + element.css({ + 'background-repeat': 'no-repeat', + 'background-position': '8px 8px', + 'padding-left': '30px' + }) + + attrs.$observe('iconInsideInput', function(value) { + element.css({ + 'background-image': 'url(' + value +')' + }) + }) + } + } +} diff --git a/res/app/components/stf/common-ui/icon-inside-input/icon-inside-input-spec.js b/res/app/components/stf/common-ui/icon-inside-input/icon-inside-input-spec.js new file mode 100644 index 00000000..43d8b84e --- /dev/null +++ b/res/app/components/stf/common-ui/icon-inside-input/icon-inside-input-spec.js @@ -0,0 +1,23 @@ +describe('iconInsideInput', function () { + + beforeEach(module('stf.icon-inside-input')); + + var scope, compile; + + beforeEach(inject(function ($rootScope, $compile) { + scope = $rootScope.$new(); + compile = $compile; + })); + + it('should ...', function () { + + /* + To test your directive, you need to create some html that would use your directive, + send that through compile() then compare the results. + + var element = compile('
hi
')(scope); + expect(element.text()).toBe('hello, world'); + */ + + }); +}); \ No newline at end of file diff --git a/res/app/components/stf/common-ui/icon-inside-input/index.js b/res/app/components/stf/common-ui/icon-inside-input/index.js new file mode 100644 index 00000000..16021790 --- /dev/null +++ b/res/app/components/stf/common-ui/icon-inside-input/index.js @@ -0,0 +1,4 @@ +module.exports = angular.module('stf.icon-inside-input', [ + +]) + .directive('iconInsideInput', require('./icon-inside-input-directive')) diff --git a/res/app/components/stf/common-ui/index.js b/res/app/components/stf/common-ui/index.js index 8c1ac9a4..87e05248 100644 --- a/res/app/components/stf/common-ui/index.js +++ b/res/app/components/stf/common-ui/index.js @@ -13,5 +13,8 @@ module.exports = angular.module('stf/common-ui', [ require('./text-focus-select').name, require('./counter').name, require('./badge-icon').name, - require('./enable-autofill').name + require('./enable-autofill').name, + require('./icon-inside-input').name, + require('./focus-element').name, + require('./blur-element').name ]) diff --git a/res/app/components/stf/screen/screen.jade b/res/app/components/stf/screen/screen.jade index 747a56d2..db65acfd 100644 --- a/res/app/components/stf/screen/screen.jade +++ b/res/app/components/stf/screen/screen.jade @@ -12,5 +12,5 @@ div(ng-if='displayError').screen-error button(ng-click='retryLoadingScreen()', style='text-align: center;').btn.btn-primary.btn-block i.fa.fa-refresh span(translate) Retry -input(type='password', tabindex='40', accesskey='C', autocorrect='off', autocapitalize='off') +input(type='password', tabindex='40', accesskey='C', autocorrect='off', autocapitalize='off', focus-element='$root.screenFocus') span.finger diff --git a/res/app/control-panes/dashboard/navigation/default-favicon.png b/res/app/control-panes/dashboard/navigation/default-favicon.png new file mode 100644 index 00000000..1e660b74 Binary files /dev/null and b/res/app/control-panes/dashboard/navigation/default-favicon.png differ diff --git a/res/app/control-panes/dashboard/navigation/navigation-controller.js b/res/app/control-panes/dashboard/navigation/navigation-controller.js index da4c8123..ea7d088d 100644 --- a/res/app/control-panes/dashboard/navigation/navigation-controller.js +++ b/res/app/control-panes/dashboard/navigation/navigation-controller.js @@ -2,6 +2,26 @@ var _ = require('lodash') module.exports = function NavigationCtrl($scope, $rootScope) { + var faviconIsSet = false + + function setUrlFavicon(url) { + var FAVICON_BASE_URL = '//www.google.com/s2/favicons?domain_url=' + $scope.urlFavicon = FAVICON_BASE_URL + url + faviconIsSet = true + } + + function resetFavicon() { + $scope.urlFavicon = require('./default-favicon.png') + faviconIsSet = false + } + resetFavicon() + + $scope.textUrlChanged = function () { + if (faviconIsSet) { + resetFavicon() + } + } + function addHttp(textUrl) { if (textUrl.indexOf(':') === -1 && textUrl.indexOf('.') !== -1) { return 'http://' + textUrl @@ -9,11 +29,15 @@ module.exports = function NavigationCtrl($scope, $rootScope) { return textUrl } - $scope.openURL = function () { - return $scope.control.openBrowser( - addHttp($scope.textURL), - $scope.browser - ) + $scope.blurUrl = false + + $scope.openURL = function ($event) { + $scope.blurUrl = true + $rootScope.screenFocus = true + + var url = addHttp($scope.textURL) + setUrlFavicon(url) + return $scope.control.openBrowser(url, $scope.browser) } function setCurrentBrowser(browser) { diff --git a/res/app/control-panes/dashboard/navigation/navigation.css b/res/app/control-panes/dashboard/navigation/navigation.css index 49215488..eee34bb4 100644 --- a/res/app/control-panes/dashboard/navigation/navigation.css +++ b/res/app/control-panes/dashboard/navigation/navigation.css @@ -2,3 +2,25 @@ width: 18px; height: auto; } + +.stf-navigation .url-input-container { + position: relative; + padding: 0; + margin: 0; +} + +.stf-navigation .url-input-container input { + margin: 0; + padding-left: 30px; +} + +.stf-navigation .url-input-container img { + position: absolute; + bottom: 14px; + left: 9px; + width: 16px; + height: 16px; + pointer-events: none; + border: none; + margin:0; +} diff --git a/res/app/control-panes/dashboard/navigation/navigation.jade b/res/app/control-panes/dashboard/navigation/navigation.jade index 5a6ecd9f..e9f132d8 100644 --- a/res/app/control-panes/dashboard/navigation/navigation.jade +++ b/res/app/control-panes/dashboard/navigation/navigation.jade @@ -12,12 +12,14 @@ //i.fa.fa-step-forward.pull-right(ng-click='forward()', title='{{"Go Forward"|translate}}') //i.fa.fa-step-backward.pull-right(ng-click='back()', title='{{"Go Back"|translate}}') .widget-content.padded - form(enable-autofill, action='about:blank') + form(enable-autofill, action='about:blank', ng-submit='openUrl($event)') //form(name='navigationForm', method='post', action='about:blank', target='_autofill') - .input-group + .input-group.url-input-container input.form-control(type='text', name='textURL', placeholder='http://...', autocomplete='url', ng-model='textURL', text-focus-select, - accesskey='N', tabindex='10').form-control + autocapitalize='off', spellcheck='false', blur-element='blurUrl' + accesskey='N', tabindex='10', ng-change='textUrlChanged()').form-control + img(ng-src='{{urlFavicon}}') .input-group-btn button(ng-click='openURL()', ng-disabled='!textURL', translate).btn.btn-primary-outline Open