diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,8 +7,8 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'bf29d341', - 'core.pkg.js' => '347cd64a', + 'core.pkg.css' => '7d05ad2a', + 'core.pkg.js' => 'a626d14c', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '3500921f', 'differential.pkg.js' => 'c0506961', @@ -27,7 +27,7 @@ 'rsrc/css/aphront/panel-view.css' => '8427b78d', 'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435', 'rsrc/css/aphront/table-view.css' => '59e2c0f8', - 'rsrc/css/aphront/tokenizer.css' => 'c10c061e', + 'rsrc/css/aphront/tokenizer.css' => '86a13f7f', 'rsrc/css/aphront/tooltip.css' => '7672b60f', 'rsrc/css/aphront/two-column.css' => '16ab3ad2', 'rsrc/css/aphront/typeahead-browse.css' => 'efe293a0', @@ -147,7 +147,7 @@ 'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b', 'rsrc/css/phui/phui-spacing.css' => '042804d6', 'rsrc/css/phui/phui-status.css' => '888cedb8', - 'rsrc/css/phui/phui-tag-view.css' => 'ea469f3a', + 'rsrc/css/phui/phui-tag-view.css' => '402691cc', 'rsrc/css/phui/phui-text.css' => 'cf019f54', 'rsrc/css/phui/phui-timeline-view.css' => 'b0fbc4d7', 'rsrc/css/phui/phui-workboard-view.css' => '3279cbbf', @@ -450,7 +450,7 @@ 'rsrc/js/core/KeyboardShortcutManager.js' => 'c1700f6f', 'rsrc/js/core/MultirowRowManager.js' => 'b5d57730', 'rsrc/js/core/Notification.js' => '0c6946e7', - 'rsrc/js/core/Prefab.js' => '4c292cc5', + 'rsrc/js/core/Prefab.js' => 'b972bdcd', 'rsrc/js/core/ShapedRequest.js' => '7cbe244b', 'rsrc/js/core/TextAreaUtils.js' => '5c93c52c', 'rsrc/js/core/Title.js' => 'df5e11d2', @@ -510,7 +510,7 @@ 'aphront-pager-view-css' => '2e3539af', 'aphront-panel-view-css' => '8427b78d', 'aphront-table-view-css' => '59e2c0f8', - 'aphront-tokenizer-control-css' => 'c10c061e', + 'aphront-tokenizer-control-css' => '86a13f7f', 'aphront-tooltip-css' => '7672b60f', 'aphront-two-column-view-css' => '16ab3ad2', 'aphront-typeahead-control-css' => '0e403212', @@ -744,7 +744,7 @@ 'phabricator-notification-menu-css' => '3c9d8aa1', 'phabricator-object-selector-css' => '029a133d', 'phabricator-phtize' => 'd254d646', - 'phabricator-prefab' => '4c292cc5', + 'phabricator-prefab' => 'b972bdcd', 'phabricator-profile-css' => '1a20dcbf', 'phabricator-remarkup-css' => 'e10512ff', 'phabricator-search-results-css' => '15c71110', @@ -806,7 +806,7 @@ 'phui-remarkup-preview-css' => '19ad512b', 'phui-spacing-css' => '042804d6', 'phui-status-list-view-css' => '888cedb8', - 'phui-tag-view-css' => 'ea469f3a', + 'phui-tag-view-css' => '402691cc', 'phui-text-css' => 'cf019f54', 'phui-timeline-view-css' => 'b0fbc4d7', 'phui-workboard-view-css' => '3279cbbf', @@ -1158,18 +1158,6 @@ '4a2430d7' => array( 'phui-fontkit-css', ), - '4c292cc5' => array( - 'javelin-install', - 'javelin-util', - 'javelin-dom', - 'javelin-typeahead', - 'javelin-tokenizer', - 'javelin-typeahead-preloaded-source', - 'javelin-typeahead-ondemand-source', - 'javelin-dom', - 'javelin-stratcom', - 'javelin-util', - ), '4d94d9c3' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1481,6 +1469,10 @@ 'phabricator-tooltip', 'changeset-view-manager', ), + '86a13f7f' => array( + 'aphront-typeahead-control-css', + 'phui-tag-view-css', + ), '87cb6b51' => array( 'javelin-behavior', 'javelin-dom', @@ -1719,6 +1711,18 @@ 'javelin-dom', 'javelin-util', ), + 'b972bdcd' => array( + 'javelin-install', + 'javelin-util', + 'javelin-dom', + 'javelin-typeahead', + 'javelin-tokenizer', + 'javelin-typeahead-preloaded-source', + 'javelin-typeahead-ondemand-source', + 'javelin-dom', + 'javelin-stratcom', + 'javelin-util', + ), 'bba9eedf' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1764,9 +1768,6 @@ 'javelin-util', 'phabricator-shaped-request', ), - 'c10c061e' => array( - 'aphront-typeahead-control-css', - ), 'c1700f6f' => array( 'javelin-install', 'javelin-util', diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css --- a/webroot/rsrc/css/aphront/tokenizer.css +++ b/webroot/rsrc/css/aphront/tokenizer.css @@ -1,6 +1,7 @@ /** * @provides aphront-tokenizer-control-css * @requires aphront-typeahead-control-css + * @requires phui-tag-view-css */ body div.jx-tokenizer { @@ -52,6 +53,7 @@ a.jx-tokenizer-x { margin-left: 4px; color: {$bluetext}; + float: right; } a.jx-tokenizer-x:hover { @@ -60,57 +62,50 @@ } a.jx-tokenizer-token { - padding: 2px 6px 3px; + padding: 2px 6px; border: 1px solid {$lightblueborder}; margin: 3px 2px 0 4px; - background: #dee7f8; + background-color: {$sh-bluebackground}; float: left; cursor: pointer; border-radius: 3px; - color: {$darkbluetext}; + color: {$sh-bluetext}; min-height: 16px; } a.jx-tokenizer-token:hover { text-decoration: none; - border-color: {$blueborder}; - background: #CDD9F0; + border-color: {$sh-blueborder}; } .jx-tokenizer-token .phui-icon-view { display: inline-block; margin: 2px 4px -3px 0; - color: {$bluetext}; + color: {$sh-blueicon}; } a.jx-tokenizer-token-function { - border-color: {$sh-lightyellowborder}; - background: {$sh-yellowbackground}; - color: {$sh-yellowtext}; + border-color: {$sh-lightgreyborder}; + background: #fff; } a.jx-tokenizer-token-function:hover { - border-color: {$sh-yellowborder}; - background: {$lightyellow}; -} - -.jx-tokenizer-token-function .phui-icon-view { - color: {$sh-yellowicon}; + background: #fff; } a.jx-tokenizer-token-disabled { - border-color: {$sh-lightgreyborder}; - background: {$sh-greybackground}; - color: {$sh-greytext}; + background-color: {$sh-disabledbackground}; + border-color: {$sh-lightdisabledborder}; + color: {$sh-disabledtext}; } a.jx-tokenizer-token-disabled:hover { - border-color: {$sh-greyborder}; - background: {$greybackground}; + border-color: {$sh-disabledborder}; + background-color: {$sh-disabledbackground}; } .jx-tokenizer-token-disabled .phui-icon-view { - color: {$sh-greyicon}; + color: {$sh-disabledicon}; } a.jx-tokenizer-token-invalid { @@ -121,7 +116,7 @@ a.jx-tokenizer-token-invalid:hover { border-color: {$sh-redborder}; - background: {$lightred}; + background: {$sh-redbackground}; } .jx-tokenizer-token-invalid .phui-icon-view { diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css --- a/webroot/rsrc/css/phui/phui-tag-view.css +++ b/webroot/rsrc/css/phui/phui-tag-view.css @@ -140,6 +140,20 @@ border-color: #d7d7d7; } +.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item { + margin-top: 4px; +} + +.phui-object-item .phabricator-handle-tag-list { + display: inline; +} + +.phui-object-item .phabricator-handle-tag-list-item { + display: inline; + margin: 0 4px 2px 0; +} + + /* - Shaded Tags --------------------------------------------------------------- For object representation inside text areas and lists. @@ -162,133 +176,190 @@ font-size: 12px; } -.phui-tag-shade-red .phui-tag-core { - background-color: {$sh-redbackground}; +/* - Red -------------------------------------------------------------------- */ + +.phui-tag-shade-red .phui-tag-core, +.jx-tokenizer-token.red { + background: {$sh-redbackground}; border-color: {$sh-lightredborder}; color: {$sh-redtext}; } -.phui-tag-shade-red .phui-icon-view { +.phui-tag-shade-red .phui-icon-view, +.jx-tokenizer-token.red .phui-icon-view, +.jx-tokenizer-token.red .jx-tokenizer-x { color: {$sh-redicon}; } -a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core, +.jx-tokenizer-token.red:hover { border-color: {$sh-redborder}; } -.phui-tag-shade-orange .phui-tag-core { - background-color: {$sh-orangebackground}; +/* - Orange ----------------------------------------------------------------- */ + +.phui-tag-shade-orange .phui-tag-core, +.jx-tokenizer-token.orange { + background: {$sh-orangebackground}; border-color: {$sh-lightorangeborder}; color: {$sh-orangetext}; } -.phui-tag-shade-orange .phui-icon-view { +.phui-tag-shade-orange .phui-icon-view, +.jx-tokenizer-token.orange .phui-icon-view, +.jx-tokenizer-token.orange .jx-tokenizer-x { color: {$sh-orangeicon}; } -a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core, +.jx-tokenizer-token.orange:hover { border-color: {$sh-orangeborder}; } -.phui-tag-shade-yellow .phui-tag-core { - background-color: {$sh-yellowbackground}; +/* - Yellow ----------------------------------------------------------------- */ + +.phui-tag-shade-yellow .phui-tag-core, +.jx-tokenizer-token.yellow { + background: {$sh-yellowbackground}; border-color: {$sh-lightyellowborder}; color: {$sh-yellowtext}; } -.phui-tag-shade-yellow .phui-icon-view { +.phui-tag-shade-yellow .phui-icon-view, +.jx-tokenizer-token.yellow .phui-icon-view, +.jx-tokenizer-token.yellow .jx-tokenizer-x { color: {$sh-yellowicon}; } -a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core, +.jx-tokenizer-token.yellow:hover { border-color: {$sh-yellowborder}; } -.phui-tag-shade-blue .phui-tag-core { - background-color: {$sh-bluebackground}; +/* - Blue ------------------------------------------------------------------- */ + +.phui-tag-shade-blue .phui-tag-core, +.jx-tokenizer-token.blue { + background: {$sh-bluebackground}; border-color: {$sh-lightblueborder}; color: {$sh-bluetext}; } -.phui-tag-shade-blue .phui-icon-view { +.phui-tag-shade-blue .phui-icon-view, +.jx-tokenizer-token.blue .phui-icon-view, +.jx-tokenizer-token.blue .jx-tokenizer-x { color: {$sh-blueicon}; } -a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core, +.jx-tokenizer-token.blue:hover { border-color: {$sh-blueborder}; } -.phui-tag-shade-indigo .phui-tag-core { - background-color: {$sh-indigobackground}; +/* - Indigo ----------------------------------------------------------------- */ + +.phui-tag-shade-indigo .phui-tag-core, +.jx-tokenizer-token.indigo { + background: {$sh-indigobackground}; border-color: {$sh-lightindigoborder}; color: {$sh-indigotext}; } -.phui-tag-shade-indigo .phui-icon-view { +.phui-tag-shade-indigo .phui-icon-view, +.jx-tokenizer-token.indigo .phui-icon-view, +.jx-tokenizer-token.indigo .jx-tokenizer-x { color: {$sh-indigoicon}; } -a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core, +.jx-tokenizer-token.indigo:hover { border-color: {$sh-indigoborder}; } -.phui-tag-shade-green .phui-tag-core { - background-color: {$sh-greenbackground}; +/* - Green ------------------------------------------------------------------ */ + +.phui-tag-shade-green .phui-tag-core, +.jx-tokenizer-token.green { + background: {$sh-greenbackground}; border-color: {$sh-lightgreenborder}; color: {$sh-greentext}; } -.phui-tag-shade-green .phui-icon-view { +.phui-tag-shade-green .phui-icon-view, +.jx-tokenizer-token.green .phui-icon-view, +.jx-tokenizer-token.green .jx-tokenizer-x { color: {$sh-greenicon}; } -a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core, +.jx-tokenizer-token.green:hover { border-color: {$sh-greenborder}; } -.phui-tag-shade-violet .phui-tag-core { - background-color: {$sh-violetbackground}; +/* - Violet ----------------------------------------------------------------- */ + +.phui-tag-shade-violet .phui-tag-core, +.jx-tokenizer-token.violet { + background: {$sh-violetbackground}; border-color: {$sh-lightvioletborder}; color: {$sh-violettext}; } -.phui-tag-shade-violet .phui-icon-view { +.phui-tag-shade-violet .phui-icon-view, +.jx-tokenizer-token.violet .phui-icon-view, +.jx-tokenizer-token.violet .jx-tokenizer-x { color: {$sh-violeticon}; } -a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core, +.jx-tokenizer-token.violet:hover { border-color: {$sh-violetborder}; } -.phui-tag-shade-pink .phui-tag-core { - background-color: {$sh-pinkbackground}; +/* - Pink ------------------------------------------------------------------- */ + +.phui-tag-shade-pink .phui-tag-core, +.jx-tokenizer-token.pink { + background: {$sh-pinkbackground}; border-color: {$sh-lightpinkborder}; color: {$sh-pinktext}; } -.phui-tag-shade-pink .phui-icon-view { +.phui-tag-shade-pink .phui-icon-view, +.jx-tokenizer-token.pink .phui-icon-view, +.jx-tokenizer-token.pink .jx-tokenizer-x { color: {$sh-pinkicon}; } -a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core, +.jx-tokenizer-token.pink:hover { border-color: {$sh-pinkborder}; } -.phui-tag-shade-grey .phui-tag-core { - background-color: {$sh-greybackground}; +/* - Grey ------------------------------------------------------------------- */ + +.phui-tag-shade-grey .phui-tag-core, +.jx-tokenizer-token.grey { + background: {$sh-greybackground}; border-color: {$sh-lightgreyborder}; color: {$sh-greytext}; } -.phui-tag-shade-grey .phui-icon-view { +.phui-tag-shade-grey .phui-icon-view, +.jx-tokenizer-token.grey .phui-icon-view, +.jx-tokenizer-token.grey .jx-tokenizer-x { color: {$sh-greyicon}; } -a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core, +.jx-tokenizer-token.grey:hover { border-color: {$sh-greyborder}; } -.phui-tag-shade-checkered .phui-tag-core { +/* - Checkered -------------------------------------------------------------- */ + +.phui-tag-shade-checkered .phui-tag-core, +.jx-tokenizer-token.checkered { background: url(/rsrc/image/checker_lighter.png); border-style: dashed; border-color: {$sh-greyborder}; @@ -296,15 +367,20 @@ text-shadow: 1px 1px #fff; } -.phui-tag-shade-checkered .phui-icon-view { +.phui-tag-shade-checkered .phui-icon-view, +.jx-tokenizer-token.checkered .phui-icon-view, +.jx-tokenizer-token.checkered .jx-tokenizer-x { color: {$sh-greyicon}; } -a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core { +a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core, +.jx-tokenizer-token.checkered:hover { border-style: solid; border-color: {$sh-greyborder}; } +/* - Disabled --------------------------------------------------------------- */ + .phui-tag-shade-disabled .phui-tag-core { background-color: {$sh-disabledbackground}; border-color: {$sh-lightdisabledborder}; @@ -318,16 +394,3 @@ a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core { border-color: {$sh-disabledborder}; } - -.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item { - margin-top: 4px; -} - -.phui-object-item .phabricator-handle-tag-list { - display: inline; -} - -.phui-object-item .phabricator-handle-tag-list-item { - display: inline; - margin: 0 4px 2px 0; -}