From fb2e52294577d07499e17e03a6cee01ba1ab7969 Mon Sep 17 00:00:00 2001 From: Gunther Brunner Date: Tue, 8 Jul 2014 22:26:34 +0900 Subject: [PATCH] Added text-focus-select directive for text inputs so it selects automatically the text when clicked. --- res/app/components/stf/common-ui/index.js | 3 ++- .../stf/common-ui/text-focus-select/index.js | 4 ++++ .../text-focus-select-directive.js | 11 +++++++++ .../text-focus-select-spec.js | 23 +++++++++++++++++++ .../dashboard/clipboard/clipboard.jade | 2 +- .../dashboard/navigation/navigation.jade | 3 ++- .../control-panes/dashboard/shell/shell.jade | 2 +- res/app/device-list/device-list.jade | 6 +++-- 8 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 res/app/components/stf/common-ui/text-focus-select/index.js create mode 100644 res/app/components/stf/common-ui/text-focus-select/text-focus-select-directive.js create mode 100644 res/app/components/stf/common-ui/text-focus-select/text-focus-select-spec.js diff --git a/res/app/components/stf/common-ui/index.js b/res/app/components/stf/common-ui/index.js index 6f5edef9..5c7c7e3f 100644 --- a/res/app/components/stf/common-ui/index.js +++ b/res/app/components/stf/common-ui/index.js @@ -9,5 +9,6 @@ module.exports = angular.module('stf/common-ui', [ require('./tooltips').name, //require('./tree').name, require('./modals').name, - require('./include-cached').name + require('./include-cached').name, + require('./text-focus-select').name ]) diff --git a/res/app/components/stf/common-ui/text-focus-select/index.js b/res/app/components/stf/common-ui/text-focus-select/index.js new file mode 100644 index 00000000..43dc8811 --- /dev/null +++ b/res/app/components/stf/common-ui/text-focus-select/index.js @@ -0,0 +1,4 @@ +module.exports = angular.module('stf.text-focus-select', [ + +]) + .directive('textFocusSelect', require('./text-focus-select-directive')) diff --git a/res/app/components/stf/common-ui/text-focus-select/text-focus-select-directive.js b/res/app/components/stf/common-ui/text-focus-select/text-focus-select-directive.js new file mode 100644 index 00000000..98a2040f --- /dev/null +++ b/res/app/components/stf/common-ui/text-focus-select/text-focus-select-directive.js @@ -0,0 +1,11 @@ +module.exports = function textFocusSelectDirective() { + return { + restrict: 'AC', + link: function (scope, element) { + // TODO: try with focus event + element.bind('click', function () { + this.select() + }) + } + } +} diff --git a/res/app/components/stf/common-ui/text-focus-select/text-focus-select-spec.js b/res/app/components/stf/common-ui/text-focus-select/text-focus-select-spec.js new file mode 100644 index 00000000..e8ab1da9 --- /dev/null +++ b/res/app/components/stf/common-ui/text-focus-select/text-focus-select-spec.js @@ -0,0 +1,23 @@ +describe('textFocusSelect', function () { + + beforeEach(module('stf.text-focus-select')); + + 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/control-panes/dashboard/clipboard/clipboard.jade b/res/app/control-panes/dashboard/clipboard/clipboard.jade index be425639..75a16070 100644 --- a/res/app/control-panes/dashboard/clipboard/clipboard.jade +++ b/res/app/control-panes/dashboard/clipboard/clipboard.jade @@ -4,7 +4,7 @@ span(translate) Clipboard .widget-content.padded .input-group.form-inline - textarea(rows='1', ng-model='control.clipboardContent', msd-elastic).form-control.clipboard-textarea + textarea(rows='1', ng-model='control.clipboardContent', msd-elastic, text-focus-select).form-control.clipboard-textarea span.input-group-btn button.btn.btn-primary-outline(ng-click='control.getClipboardContent()', tooltip='{{ "Get clipboard contents" | translate }}') i.fa.fa-refresh diff --git a/res/app/control-panes/dashboard/navigation/navigation.jade b/res/app/control-panes/dashboard/navigation/navigation.jade index ebfb1195..06edd0f1 100644 --- a/res/app/control-panes/dashboard/navigation/navigation.jade +++ b/res/app/control-panes/dashboard/navigation/navigation.jade @@ -14,7 +14,8 @@ form .input-group input.form-control(type='text', placeholder='http://...', autocomplete='off', ng-model='textURL', - typeahead='url for url in urlHistory | filter:$viewValue').form-control + typeahead='url for url in urlHistory | filter:$viewValue', text-focus-select).form-control + .input-group-btn button(ng-click='openURL()', ng-disabled='!textURL', translate).btn.btn-primary-outline Open //button(type='button', ng-disabled='!hasHistory()').btn.btn-primary-outline.dropdown-toggle diff --git a/res/app/control-panes/dashboard/shell/shell.jade b/res/app/control-panes/dashboard/shell/shell.jade index f89e0b5c..40c79dd3 100644 --- a/res/app/control-panes/dashboard/shell/shell.jade +++ b/res/app/control-panes/dashboard/shell/shell.jade @@ -9,7 +9,7 @@ .widget-content.padded .input-group.form-inline - input(type=text, ng-model='command', ng-enter='run(command)').form-control.shell-input + input(type=text, ng-model='command', ng-enter='run(command)', text-focus-select).form-control.shell-input span.input-group-btn // , tooltip='{{"Run Command"|translate}}' button.btn.btn-primary-outline(ng-click='run(command)', ng-disabled='!command') diff --git a/res/app/device-list/device-list.jade b/res/app/device-list/device-list.jade index 707afbef..19f3cc90 100644 --- a/res/app/device-list/device-list.jade +++ b/res/app/device-list/device-list.jade @@ -17,7 +17,8 @@ input(type='search', results='5', autosave='deviceFilter' name='deviceFilter', ng-model='deviceFilter', ng-change='applyFilter(deviceFilter)', ng-model-options='{debounce: 150}' - autocorrect='off', autocapitalize='off', spellcheck='false').form-control.input-sm.device-search.pull-right + autocorrect='off', autocapitalize='off', spellcheck='false', + text-focus-select).form-control.input-sm.device-search.pull-right .clear-filtering-buttons device-list-icons(tracker='tracker', sort='sort', filter='filter') @@ -36,7 +37,8 @@ name='deviceFilter', ng-model='deviceFilter', ng-change='applyFilter(deviceFilter)', ng-model-options='{debounce: 150}' autocorrect='off', autocapitalize='off', spellcheck='false' - list='searchFields', multiple).form-control.input-sm.device-search.pull-right + list='searchFields', multiple, + text-focus-select).form-control.input-sm.device-search.pull-right span.pull-right .btn-group(dropdown).pull-right