This repository has been archived by the owner on Oct 13, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #210 from ossreleasefeed/multi-tree
Fix Bug 936492, implement tree selector for multi tree support
- Loading branch information
Showing
21 changed files
with
535 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| @font-face { | ||
| font-family: 'icons'; | ||
| src: url('/static/fonts/icons.eot?#iefix2013') format('embedded-opentype'), | ||
| url('/static/fonts/icons.woff?2013') format('woff'), | ||
| url('/static/fonts/icons.ttf?2013') format('truetype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| .tree-selector { | ||
| display: inline-block; | ||
| position: relative; | ||
| float: right; | ||
| width: auto; | ||
| } | ||
| .select-options { | ||
| display: none; | ||
| position: absolute; | ||
| right: 0; | ||
| } | ||
| .ts-select-trigger { | ||
| background-color: #e0e0e0; | ||
| margin-bottom: .2rem; | ||
| padding: .3rem .3rem .5rem .3rem; | ||
| border: 1px solid #999; | ||
| width: auto; | ||
| min-width: 100px; | ||
| font-size: .8rem; | ||
| border-radius: .2rem; | ||
| cursor: pointer; | ||
| } | ||
| [data-icon]:before { | ||
| margin-right: .3rem; | ||
| font-family: icons; | ||
| font-size: 1.2rem; | ||
| content: attr(data-icon); | ||
| speak: none; | ||
| } | ||
| .selector-arrow { | ||
| display: inline-block; | ||
| position: relative; | ||
| padding-right: 1.5rem; | ||
| } | ||
| [data-icon-arrow]:before { | ||
| display: block; | ||
| position: absolute; | ||
| top: 6px; | ||
| right: 0; | ||
| font-family: icons; | ||
| content: attr(data-icon-arrow); | ||
| speak: none; | ||
| } | ||
| .selected:before { | ||
| position: absolute; | ||
| margin: 0 0 -15px -25px; | ||
| font-family: icons; | ||
| content: "\e803"; | ||
| speak: none; | ||
| } | ||
| .ts-modal { | ||
| border: 1px solid #d4d4d4; | ||
| border-radius: 6px; | ||
| min-width: 120%; | ||
| } | ||
| header { | ||
| background-color: #e0e0e0; | ||
| padding: .6rem .8rem .6rem .8rem; | ||
| border-top-right-radius: 6px; | ||
| border-top-left-radius: 6px; | ||
| font-size: 1rem; | ||
| font-weight: bold; | ||
| letter-spacing: .5px; | ||
| } | ||
| /* visibility of the filter field is configurable | ||
| and handled by JavaScript using the data-visible | ||
| attribute */ | ||
| .options-filter { | ||
| display: none; | ||
| padding: .8rem; | ||
| } | ||
| .options-filter input[type="text"] { | ||
| padding: 5px 2%; | ||
| border: 1px solid #b2b2b2; | ||
| width: 100%; | ||
| font-size: .8rem; | ||
| border-radius: .2rem; | ||
| box-shadow: 0 1px rgba(255, 255, 255, 0.5); | ||
| } | ||
| .options-filter input[type="text"]:focus { | ||
| border: 1px solid #42a4e0; | ||
| box-shadow: 0 0 0 2px rgba(73, 173, 227, 0.4); | ||
| } | ||
| .ts-options { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-size: .9rem; | ||
| list-style: none; | ||
| } | ||
| .ts-options a { | ||
| display: block; | ||
| background-color: white; | ||
| color: #000; | ||
| padding: .6rem .6rem .6rem 2rem; | ||
| text-decoration: none; | ||
| white-space: nowrap; | ||
| } | ||
| .ts-options a:hover { | ||
| background-color: #005CB8; | ||
| color: #fff; | ||
| } | ||
| .ts-options li { | ||
| border-top: 1px solid #e0e0e0; | ||
| } | ||
| .ts-options li:first-child { | ||
| border-top: none; | ||
| } | ||
| .ts-options li:last-child a { | ||
| border-bottom-right-radius: 6px; | ||
| border-bottom-left-radius: 6px; | ||
| } | ||
| .ts-options li:first-child a { | ||
| border-top-right-radius: 6px; | ||
| border-top-left-radius: 6px; | ||
| } | ||
| .ts-option-label { | ||
| font-weight: bold; | ||
| } |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| $(function() { | ||
| var contentContainer = $('#content'); | ||
| var options = $('.ts-options'); | ||
|
|
||
| function setSelectedItem(selected) { | ||
| var items = options.find('a'); | ||
|
|
||
| items.each(function() { | ||
| $(this).removeClass('selected') | ||
| .removeAttr('aria-checked'); | ||
| }); | ||
|
|
||
| selected.addClass('selected'); | ||
| selected.attr('aria-checked', 'true'); | ||
| } | ||
|
|
||
| function hideOptions() { | ||
| // Because the tree selector can be injected by a JS | ||
| // template, we need to use the selector directly here, | ||
| // as the element will not exist on DOM ready. | ||
| $('.ts-options').parents('.select-options').hide(); | ||
| } | ||
|
|
||
| // Show/Hide the options | ||
| contentContainer.on('click', '.ts-select-trigger', function(event) { | ||
| event.stopPropagation(); | ||
|
|
||
| var optionsFilter = $('.options-filter'); | ||
| var optionsContainer = $('.tree-selector').find('.select-options'); | ||
| var expanded = optionsContainer.attr('aria-expanded'); | ||
|
|
||
| // Show or hide the filter field if active. | ||
| if (optionsFilter.data('active')) { | ||
| optionsFilter.toggle(); | ||
| } | ||
|
|
||
| optionsContainer.toggle(); | ||
|
|
||
| // Update ARIA expanded state | ||
| optionsContainer.attr('aria-expanded', expanded === 'false' ? 'true' : 'false'); | ||
| // Move focus to options container if expanded | ||
| if (expanded === 'false') { | ||
| $('.ts-options', optionsContainer)[0].focus(); | ||
| } | ||
| }); | ||
|
|
||
| options.on('click', 'a', function(event) { | ||
| event.stopPropagation(); | ||
| setSelectedItem($(this)); | ||
| // Set the value of the relevant hidden type element to | ||
| // the selected value. | ||
| $('#ts-value').val($(this).text()); | ||
| hideOptions(); | ||
| }); | ||
|
|
||
| window.addEventListener('click', function() { | ||
| hideOptions(); | ||
| }, false); | ||
|
|
||
| window.addEventListener('keyup', function(event) { | ||
| // 'key' is the standard but has not been implemented in Gecko | ||
| // yet, see https://bugzilla.mozilla.org/show_bug.cgi?id=680830 | ||
| // so, we check both. | ||
| var keyPressed = event.key || event.keyCode; | ||
| // esc key pressed. | ||
| if (keyPressed === 27 || keyPressed === 'Esc') { | ||
| hideOptions(); | ||
| } | ||
| }, false); | ||
| }); |
Oops, something went wrong.