1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-27 09:12:41 +01:00
phorge-phorge/webroot/rsrc/css/aphront/tokenizer.css
epriestley 87012d60f1 Show icons and disabled/archived/closed results in typahead dynamic list
Summary:
Ref T4420. This is mostly a design change, but addresses two functional issues:

  # Many sources exclude disabled accounts, system agents, archived projects, etc. It is rare to select these, but excluding them completely is too severe, and we've made more than a handful of changes over time to replace a "users" endpoint with an "accounts" endpoint (to include disabled users) or similar. Instead, always show these results, but sort them last and use a special style to clearly mark them as closed, disabled, or otherwise unusual.
    - As a practical consequence, all the similar endpoints can now be merged, so "accounts" and "users" return the exact same result sets.
  # Increasingly, sources can return multiple object types in a single list. For example, "CC" can have a user or mailing list, and soon a project or repository. However, the result list is fairly homogenous across types and it isn't easy to quickly pick out projects vs users. To help with this, add icons showing the result type.

Test Plan:
{F113079}

(The main search results get touched here too, I verified they didn't blow up.)

Reviewers: chad, btrahan

Reviewed By: chad

CC: chad, aran, mbishopim3

Maniphest Tasks: T4420

Differential Revision: https://secure.phabricator.com/D8231
2014-02-14 10:24:11 -08:00

103 lines
1.6 KiB
CSS

/**
* @provides aphront-tokenizer-control-css
* @requires aphront-typeahead-control-css
*/
body div.jx-tokenizer {
background: transparent;
position: relative;
width: 100%;
}
body div.jx-tokenizer-container {
position: relative;
display: block;
padding: 0;
min-height: 30px;
height: auto;
}
var.jx-tokenizer-metrics {
position: absolute;
left: 20px;
top: 20px;
}
body input.jx-tokenizer-input {
border: 1px solid transparent;
border-width: 1px 0px;
padding: 3px;
outline: none;
float: left;
width: 100%;
border-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
font-size: 13px;
color: #333;
height: 26px;
}
body input.jx-tokenizer-input:focus {
box-shadow: none;
-webkit-box-shadow: none;
border-color: transparent;
}
body input.jx-typeahead-placeholder {
margin-left: 4px;
color: {$greytext};
}
a.jx-tokenizer-x {
padding-left: 4px;
}
a.jx-tokenizer-x:hover {
color: #000;
text-decoration: none;
}
a.jx-tokenizer-token {
padding: 2px 6px 3px;
border: 1px solid #a4bdec;
margin: 3px 2px 0 4px;
background: #dee7f8;
float: left;
cursor: pointer;
border-radius: 3px;
color: #333;
}
a.jx-tokenizer-token:hover {
text-decoration: none;
background: #bbcef1;
}
.jx-tokenizer-token .phui-icon-view {
display: inline-block;
margin: 2px 4px -2px 0;
}
.tokenizer-result {
position: relative;
padding: 5px 8px 5px 28px;
}
.tokenizer-result .phui-icon-view {
display: inline-block;
width: 24px;
height: 24px;
position: absolute;
top: 5px;
left: 8px;
}
.tokenizer-result-closed {
color: {$greytext};
}
.tokenizer-closed {
margin-top: 2px;
}