[Rt-commit] rt branch, 4.4/enhance-roles-input-fields, repushed
Maureen Mirville
maureen at bestpractical.com
Tue Feb 12 20:12:02 EST 2019
The branch 4.4/enhance-roles-input-fields was deleted and repushed:
was dd14e1140feccb8d21768a684e83814f869e8b7a
now 22276d02741607597b226e8c3e23b762e92a8100
1: e81709086 ! 1: 0c6f4f502 Add the Selectize JS library source code to RT
@@ -1,6 +1,415 @@
Author: Maureen E. Mirville <maureen at bestpractical.com>
Add the Selectize JS library source code to RT
+
+diff --git a/devel/third-party/selectize-0.12.6/selectize.default.css b/devel/third-party/selectize-0.12.6/selectize.default.css
+new file mode 100644
+--- /dev/null
++++ b/devel/third-party/selectize-0.12.6/selectize.default.css
+@@
++/**
++ * selectize.default.css (v0.12.6) - Default Theme
++ * Copyright (c) 2013–2015 Brian Reavis & contributors
++ *
++ * Licensed 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.
++ *
++ * @author Brian Reavis <brian at thirdroute.com>
++ */
++.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
++ visibility: visible !important;
++ background: #f2f2f2 !important;
++ background: rgba(0, 0, 0, 0.06) !important;
++ border: 0 none !important;
++ -webkit-box-shadow: inset 0 0 12px 4px #fff;
++ box-shadow: inset 0 0 12px 4px #fff;
++}
++.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
++ content: '!';
++ visibility: hidden;
++}
++.selectize-control.plugin-drag_drop .ui-sortable-helper {
++ -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
++ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
++}
++.selectize-dropdown-header {
++ position: relative;
++ padding: 5px 8px;
++ border-bottom: 1px solid #d0d0d0;
++ background: #f8f8f8;
++ -webkit-border-radius: 3px 3px 0 0;
++ -moz-border-radius: 3px 3px 0 0;
++ border-radius: 3px 3px 0 0;
++}
++.selectize-dropdown-header-close {
++ position: absolute;
++ right: 8px;
++ top: 50%;
++ color: #303030;
++ opacity: 0.4;
++ margin-top: -12px;
++ line-height: 20px;
++ font-size: 20px !important;
++}
++.selectize-dropdown-header-close:hover {
++ color: #000000;
++}
++.selectize-dropdown.plugin-optgroup_columns .optgroup {
++ border-right: 1px solid #f2f2f2;
++ border-top: 0 none;
++ float: left;
++ -webkit-box-sizing: border-box;
++ -moz-box-sizing: border-box;
++ box-sizing: border-box;
++}
++.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
++ border-right: 0 none;
++}
++.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
++ display: none;
++}
++.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
++ border-top: 0 none;
++}
++.selectize-control.plugin-remove_button [data-value] {
++ position: relative;
++ padding-right: 24px !important;
++}
++.selectize-control.plugin-remove_button [data-value] .remove {
++ z-index: 1;
++ /* fixes ie bug (see #392) */
++ position: absolute;
++ top: 0;
++ right: 0;
++ bottom: 0;
++ width: 17px;
++ text-align: center;
++ font-weight: bold;
++ font-size: 12px;
++ color: inherit;
++ text-decoration: none;
++ vertical-align: middle;
++ display: inline-block;
++ padding: 2px 0 0 0;
++ border-left: 1px solid #0073bb;
++ -webkit-border-radius: 0 2px 2px 0;
++ -moz-border-radius: 0 2px 2px 0;
++ border-radius: 0 2px 2px 0;
++ -webkit-box-sizing: border-box;
++ -moz-box-sizing: border-box;
++ box-sizing: border-box;
++}
++.selectize-control.plugin-remove_button [data-value] .remove:hover {
++ background: rgba(0, 0, 0, 0.05);
++}
++.selectize-control.plugin-remove_button [data-value].active .remove {
++ border-left-color: #00578d;
++}
++.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
++ background: none;
++}
++.selectize-control.plugin-remove_button .disabled [data-value] .remove {
++ border-left-color: #aaaaaa;
++}
++.selectize-control.plugin-remove_button .remove-single {
++ position: absolute;
++ right: 0;
++ top: 0;
++ font-size: 23px;
++}
++.selectize-control {
++ position: relative;
++}
++.selectize-dropdown,
++.selectize-input,
++.selectize-input input {
++ color: #303030;
++ font-family: inherit;
++ font-size: 13px;
++ line-height: 18px;
++ -webkit-font-smoothing: inherit;
++}
++.selectize-input,
++.selectize-control.single .selectize-input.input-active {
++ background: #fff;
++ cursor: text;
++ display: inline-block;
++}
++.selectize-input {
++ border: 1px solid #d0d0d0;
++ padding: 8px 8px;
++ display: inline-block;
++ width: 100%;
++ overflow: hidden;
++ position: relative;
++ z-index: 1;
++ -webkit-box-sizing: border-box;
++ -moz-box-sizing: border-box;
++ box-sizing: border-box;
++ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
++ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
++ -webkit-border-radius: 3px;
++ -moz-border-radius: 3px;
++ border-radius: 3px;
++}
++.selectize-control.multi .selectize-input.has-items {
++ padding: 5px 8px 2px;
++}
++.selectize-input.full {
++ background-color: #fff;
++}
++.selectize-input.disabled,
++.selectize-input.disabled * {
++ cursor: default !important;
++}
++.selectize-input.focus {
++ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
++ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
++}
++.selectize-input.dropdown-active {
++ -webkit-border-radius: 3px 3px 0 0;
++ -moz-border-radius: 3px 3px 0 0;
++ border-radius: 3px 3px 0 0;
++}
++.selectize-input > * {
++ vertical-align: baseline;
++ display: -moz-inline-stack;
++ display: inline-block;
++ zoom: 1;
++ *display: inline;
++}
++.selectize-control.multi .selectize-input > div {
++ cursor: pointer;
++ margin: 0 3px 3px 0;
++ padding: 2px 6px;
++ background: #1da7ee;
++ color: #fff;
++ border: 1px solid #0073bb;
++}
++.selectize-control.multi .selectize-input > div.active {
++ background: #92c836;
++ color: #fff;
++ border: 1px solid #00578d;
++}
++.selectize-control.multi .selectize-input.disabled > div,
++.selectize-control.multi .selectize-input.disabled > div.active {
++ color: #ffffff;
++ background: #d2d2d2;
++ border: 1px solid #aaaaaa;
++}
++.selectize-input > input {
++ display: inline-block !important;
++ padding: 0 !important;
++ min-height: 0 !important;
++ max-height: none !important;
++ max-width: 100% !important;
++ margin: 0 1px !important;
++ text-indent: 0 !important;
++ border: 0 none !important;
++ background: none !important;
++ line-height: inherit !important;
++ -webkit-user-select: auto !important;
++ -webkit-box-shadow: none !important;
++ box-shadow: none !important;
++}
++.selectize-input > input::-ms-clear {
++ display: none;
++}
++.selectize-input > input:focus {
++ outline: none !important;
++}
++.selectize-input::after {
++ content: ' ';
++ display: block;
++ clear: left;
++}
++.selectize-input.dropdown-active::before {
++ content: ' ';
++ display: block;
++ position: absolute;
++ background: #f0f0f0;
++ height: 1px;
++ bottom: 0;
++ left: 0;
++ right: 0;
++}
++.selectize-dropdown {
++ position: absolute;
++ z-index: 10;
++ border: 1px solid #d0d0d0;
++ background: #fff;
++ margin: -1px 0 0 0;
++ border-top: 0 none;
++ -webkit-box-sizing: border-box;
++ -moz-box-sizing: border-box;
++ box-sizing: border-box;
++ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
++ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
++ -webkit-border-radius: 0 0 3px 3px;
++ -moz-border-radius: 0 0 3px 3px;
++ border-radius: 0 0 3px 3px;
++}
++.selectize-dropdown [data-selectable] {
++ cursor: pointer;
++ overflow: hidden;
++}
++.selectize-dropdown [data-selectable] .highlight {
++ background: rgba(125, 168, 208, 0.2);
++ -webkit-border-radius: 1px;
++ -moz-border-radius: 1px;
++ border-radius: 1px;
++}
++.selectize-dropdown .option,
++.selectize-dropdown .optgroup-header {
++ padding: 5px 8px;
++}
++.selectize-dropdown .option,
++.selectize-dropdown [data-disabled],
++.selectize-dropdown [data-disabled] [data-selectable].option {
++ cursor: inherit;
++ opacity: 0.5;
++}
++.selectize-dropdown [data-selectable].option {
++ opacity: 1;
++}
++.selectize-dropdown .optgroup:first-child .optgroup-header {
++ border-top: 0 none;
++}
++.selectize-dropdown .optgroup-header {
++ color: #303030;
++ background: #fff;
++ cursor: default;
++}
++.selectize-dropdown .active {
++ background-color: #f5fafd;
++ color: #495c68;
++}
++.selectize-dropdown .active.create {
++ color: #495c68;
++}
++.selectize-dropdown .create {
++ color: rgba(48, 48, 48, 0.5);
++}
++.selectize-dropdown-content {
++ overflow-y: auto;
++ overflow-x: hidden;
++ max-height: 200px;
++ -webkit-overflow-scrolling: touch;
++}
++.selectize-control.single .selectize-input,
++.selectize-control.single .selectize-input input {
++ cursor: pointer;
++}
++.selectize-control.single .selectize-input.input-active,
++.selectize-control.single .selectize-input.input-active input {
++ cursor: text;
++}
++.selectize-control.single .selectize-input:after {
++ content: ' ';
++ display: block;
++ position: absolute;
++ top: 50%;
++ right: 15px;
++ margin-top: -3px;
++ width: 0;
++ height: 0;
++ border-style: solid;
++ border-width: 5px 5px 0 5px;
++ border-color: #808080 transparent transparent transparent;
++}
++.selectize-control.single .selectize-input.dropdown-active:after {
++ margin-top: -4px;
++ border-width: 0 5px 5px 5px;
++ border-color: transparent transparent #808080 transparent;
++}
++.selectize-control.rtl.single .selectize-input:after {
++ left: 15px;
++ right: auto;
++}
++.selectize-control.rtl .selectize-input > input {
++ margin: 0 4px 0 -2px !important;
++}
++.selectize-control .selectize-input.disabled {
++ opacity: 0.5;
++ background-color: #fafafa;
++}
++.selectize-control.multi .selectize-input.has-items {
++ padding-left: 5px;
++ padding-right: 5px;
++}
++.selectize-control.multi .selectize-input.disabled [data-value] {
++ color: #999;
++ text-shadow: none;
++ background: none;
++ -webkit-box-shadow: none;
++ box-shadow: none;
++}
++.selectize-control.multi .selectize-input.disabled [data-value],
++.selectize-control.multi .selectize-input.disabled [data-value] .remove {
++ border-color: #e6e6e6;
++}
++.selectize-control.multi .selectize-input.disabled [data-value] .remove {
++ background: none;
++}
++.selectize-control.multi .selectize-input [data-value] {
++ text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
++ -webkit-border-radius: 3px;
++ -moz-border-radius: 3px;
++ border-radius: 3px;
++ background-color: #1b9dec;
++ background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
++ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
++ background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
++ background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
++ background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
++ background-repeat: repeat-x;
++ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
++ -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
++ box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
++}
++.selectize-control.multi .selectize-input [data-value].active {
++ background-color: #0085d4;
++ background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
++ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
++ background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
++ background-image: -o-linear-gradient(top, #008fd8, #0075cf);
++ background-image: linear-gradient(to bottom, #008fd8, #0075cf);
++ background-repeat: repeat-x;
++ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0);
++}
++.selectize-control.single .selectize-input {
++ -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
++ box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
++ background-color: #f9f9f9;
++ background-image: -moz-linear-gradient(top, #fefefe, #f2f2f2);
++ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f2f2f2));
++ background-image: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
++ background-image: -o-linear-gradient(top, #fefefe, #f2f2f2);
++ background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
++ background-repeat: repeat-x;
++ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0);
++}
++.selectize-control.single .selectize-input,
++.selectize-dropdown.single {
++ border-color: #b8b8b8;
++}
++.selectize-dropdown .optgroup-header {
++ padding-top: 7px;
++ font-weight: bold;
++ font-size: 0.85em;
++}
++.selectize-dropdown .optgroup {
++ border-top: 1px solid #f0f0f0;
++}
++.selectize-dropdown .optgroup:first-child {
++ border-top: 0 none;
++}
diff --git a/devel/third-party/selectize-0.12.6/selectize.js b/devel/third-party/selectize-0.12.6/selectize.js
new file mode 100644
3: 9d71bcd65 = 2: 5395c2d15 Add jQuery UI Sortable library source code to RT
2: dc3a89a40 ! 3: 0866e5f17 Add a new config to format roles input on ticket create/update/forward pages
@@ -1,6 +1,6 @@
Author: Maureen E. Mirville <maureen at bestpractical.com>
- Add a new config to format user input on ticket create/update/forward pages
+ Add a new config to format roles input on ticket create/update/forward pages
diff --git a/etc/RT_Config.pm.in b/etc/RT_Config.pm.in
--- a/etc/RT_Config.pm.in
@@ -11,10 +11,11 @@
+=item C<$AutocompleteUserInputFormat>
+
-+Set the format of the user input fields on the Ticket Create and Ticket
-+Update pages. By default, the user will be displayed by email address.
-+If the user does not have an email address, the user's username will be
-+displayed. Available formats also include, 'Name' and 'RealName'.
++Set the display format of the user input fields for roles on the Ticket
++Create, Ticket Update, and Ticket Forward pages. By default, the user
++will be displayed by email address. If the user does not have an email
++address, the user's username will be displayed. Available formats also
++include, 'Name' and 'RealName'.
+
+=cut
+
4: 10d58c9ff ! 4: 805119cf2 Improve style of user input fields using Selectize.js library
@@ -5,7 +5,7 @@
This library adds a bubble around each selected user in all of the
roles fields on ticket create, update, and forward pages. Additionally,
it enables 'drag and drop' to reorder users within a field, and adds
- an 'x' to remove a user.
+ an 'x' to the bubble to easily remove a user.
diff --git a/share/html/Elements/FormatRolesInputFields b/share/html/Elements/FormatRolesInputFields
new file mode 100644
@@ -147,18 +147,7 @@
+<& /Elements/FormatRolesInputFields, ARGSRef => \%ARGS, QueueObj => $QueueObj, &>
<div id="ticket-create-message">
<&| /Widgets/TitleBox, title => $title, class => 'messagedetails' &>
-+<div class="roles-input">
<table border="0" cellpadding="0" cellspacing="0">
- % $m->callback(CallbackName => 'BeforeRequestors', QueueObj => $QueueObj, ARGSRef => \%ARGS);
- <tr>
-@@
-
- <& /Ticket/Elements/AddAttachments, %ARGS, QueueObj => $QueueObj &>
- </table>
-+</div>
- </&>
- <& /Elements/Submit, Label => loc("Create"), id => 'SubmitTicket' &>
- </div>
diff --git a/share/html/Ticket/Forward.html b/share/html/Ticket/Forward.html
--- a/share/html/Ticket/Forward.html
@@ -185,3 +174,69 @@
% if ( $gnupg_widget ) {
+diff --git a/share/static/css/base/selectize.default.css b/share/static/css/base/selectize.default.css
+--- a/share/static/css/base/selectize.default.css
++++ b/share/static/css/base/selectize.default.css
+@@
+ vertical-align: middle;
+ display: inline-block;
+ padding: 2px 0 0 0;
+- border-left: 1px solid #0073bb;
++ border-left: none;
+ -webkit-border-radius: 0 2px 2px 0;
+ -moz-border-radius: 0 2px 2px 0;
+ border-radius: 0 2px 2px 0;
+@@
+ padding: 2px 6px;
+ background: #1da7ee;
+ color: #fff;
+- border: 1px solid #0073bb;
++ border: none;
+ }
+ .selectize-control.multi .selectize-input > div.active {
+ background: #92c836;
+ color: #fff;
+- border: 1px solid #00578d;
++ border: none;
+ }
+ .selectize-control.multi .selectize-input.disabled > div,
+ .selectize-control.multi .selectize-input.disabled > div.active {
+@@
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ background-color: #1b9dec;
+- background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
+- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
+- background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
+- background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
+- background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
++ background-image: -moz-linear-gradient(top, #4868b3, #4868b3);
++ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4868b3), to(#4868b3));
++ background-image: -webkit-linear-gradient(top, #4868b3, #4868b3);
++ background-image: -o-linear-gradient(top, #4868b3, #4868b3);
++ background-image: linear-gradient(to bottom, #4868b3, #4868b3);
+ background-repeat: repeat-x;
+- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
++ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4868b3', endColorstr='#ff4868b3', GradientType=0);
+ -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
+ box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
+ }
+ .selectize-control.multi .selectize-input [data-value].active {
+ background-color: #0085d4;
+- background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
+- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
+- background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
+- background-image: -o-linear-gradient(top, #008fd8, #0075cf);
+- background-image: linear-gradient(to bottom, #008fd8, #0075cf);
++ background-image: -moz-linear-gradient(top, #284691, #284691);
++ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#284691), to(#284691));
++ background-image: -webkit-linear-gradient(top, #284691, #284691);
++ background-image: -o-linear-gradient(top, #284691, #284691);
++ background-image: linear-gradient(to bottom, #284691, #284691);
+ background-repeat: repeat-x;
+- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0);
++ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff284691', endColorstr='#ff284691', GradientType=0);
+ }
+ .selectize-control.single .selectize-input {
+ -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
+
5: dd14e1140 = 5: 22276d027 Add CSS to Theme.html for stylized user input field bubbles
More information about the rt-commit
mailing list