Updated the search key to be a little more relevant

This commit is contained in:
Michael Abashian 2017-01-12 19:39:32 -05:00
parent c6cae2e273
commit 306da7b793
2 changed files with 44 additions and 33 deletions

View File

@ -197,29 +197,11 @@
border: 1px solid @login-notice-border;
background-color: @login-notice-bg;
color: @login-notice-text;
}
.SmartSearch-relations{
margin-top: 15px;
position: relative;
}
.SmartSearch-keyRow {
width: 33%;
flex: 1 1 auto;
flex-direction: column;
margin-bottom: 15px;
padding-right: 50px;
}
// 100% rows in a modal
.modal-body .SmartSearch-keyRow{
width: 100%;
}
// `.${list.name}List` class can be used to set add custom class overrides
.groupsList .SmartSearch-keyRow, .hostsList .SmartSearch-keyRow, .PortalMode .SmartSearch-keyRow{
width: 100%;
}
.SmartSearch-keyRow:nth-child(3){
padding-right: 0px;
}
.SmartSearch-keyName {
@ -232,3 +214,30 @@
.SmartSearch-keyComparators {
flex: 1 0 auto;
}
.SmartSearch-keyPane--exitHolder {
position: absolute;
right: 10px;
top: 10px;
}
.SmartSearch-keyPane--exit {
background-color: @login-notice-bg;
}
.SmartSearch-examples {
display: flex;
}
.SmartSearch-examples--title {
margin-right: 5px;
}
.SmartSearch-examples--search {
color: @default-err;
background-color: @default-bg;
border: 1px solid @default-border;
border-radius: 5px;
padding: 0px 5px;
margin-right: 5px;
}

View File

@ -33,25 +33,27 @@
</div>
<!-- hint key -->
<div class="SmartSearch-keyPane row" ng-repeat="model in models" ng-show="showKeyPane">
<div class="SmartSearch-keyPane--exit">
<button class="Form-exit" ng-click="toggleKeyPane()">
<div class="SmartSearch-keyPane--exitHolder">
<button class="Form-exit SmartSearch-keyPane--exit" ng-click="toggleKeyPane()">
<i class="fa fa-times-circle"></i>
</button>
</div>
<div class="SmartSearch-keyRow" ng-repeat="(key,value) in model.base">
<div class="SmartSearch-keyName">
{{ key }}
</div>
<div class="SmartSearch-keyInfo">
<div>Type: {{ value.type }}</div>
<div>Description: {{value.help_text}}</div>
<div ng-if="value.choices">
Enumerated: <span ng-repeat="choice in value.choices"> {{ choice[0] }} </span>
</div>
<div class="SmartSearch-keyRow SmartSearch-examples">
<div class="SmartSearch-examples--title">
<b>EXAMPLES:</b>
</div>
<div class="SmartSearch-examples--search">name:foo</div>
<div class="SmartSearch-examples--search">organization.name:Default</div>
<div class="SmartSearch-examples--search">id:>10</div>
</div>
<div class="SmartSearch-keyRow SmartSearch-relations">
<b>Searchable relationships:</b> <span ng-repeat="relation in model.related track by $index">{{ relation }}<span ng-if="$index !== Object.keys(model.related).length -1">, </span></span>
<div class="SmartSearch-keyRow">
<b>FIELDS:</b> <span ng-repeat="(key,value) in model.base">{{ key }}<span ng-if="!$last">, </span></span>
</div>
<div class="SmartSearch-keyRow">
<b>RELATED FIELDS:</b> <span ng-repeat="relation in model.related">{{ relation }}<span ng-if="!$last">, </span></span>
</div>
<div class="SmartSearch-keyRow">
<b>ADDITIONAL INFORMATION:</b> <span>For additional information on advanced search search syntax please see the Ansible Tower documentation.</span>
</div>
</div>
</div>