Update Running Scripts' search to have rounded ends and a search icon

This commit is contained in:
David Rowe 2016-04-07 12:32:27 +12:00
parent 2ee5b45ca6
commit 4e3cdf6569
3 changed files with 17 additions and 2 deletions

View file

@ -20,6 +20,7 @@ TextField {
property int colorScheme: hifi.colorSchemes.light property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property bool isSearchField: false
property string label: "" property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height : 0) property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height : 0)
@ -28,6 +29,7 @@ TextField {
FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; } FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
font.family: firaSansSemiBold.name font.family: firaSansSemiBold.name
font.pixelSize: hifi.fontSizes.textFieldInput font.pixelSize: hifi.fontSizes.textFieldInput
font.italic: textField.text == ""
height: implicitHeight + 4 // Make surrounding box higher so that highlight is vertically centered. height: implicitHeight + 4 // Make surrounding box higher so that highlight is vertically centered.
y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0 y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0
@ -42,11 +44,22 @@ TextField {
: (textField.focus ? hifi.colors.black : hifi.colors.baseGrayShadow) : (textField.focus ? hifi.colors.black : hifi.colors.baseGrayShadow)
border.color: hifi.colors.primaryHighlight border.color: hifi.colors.primaryHighlight
border.width: textField.focus ? 1 : 0 border.width: textField.focus ? 1 : 0
radius: isSearchField ? textField.height / 2 : 0
HiFiGlyphs {
text: hifi.glyphs.search
color: textColor
size: hifi.fontSizes.textFieldSearchIcon
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: hifi.dimensions.textPadding
visible: isSearchField
}
} }
placeholderTextColor: hifi.colors.lightGray placeholderTextColor: hifi.colors.lightGray
selectedTextColor: hifi.colors.black selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight selectionColor: hifi.colors.primaryHighlight
padding.left: hifi.dimensions.textPadding padding.left: (isSearchField ? textField.height : 0) + hifi.dimensions.textPadding
padding.right: hifi.dimensions.textPadding padding.right: hifi.dimensions.textPadding
} }

View file

@ -175,11 +175,12 @@ Window {
HifiControls.TextField { HifiControls.TextField {
id: filterEdit id: filterEdit
isSearchField: true
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
focus: true focus: true
colorScheme: hifi.colorSchemes.dark colorScheme: hifi.colorSchemes.dark
placeholderText: "filter" placeholderText: "Filter"
onTextChanged: scriptsModel.filterRegExp = new RegExp("^.*" + text + ".*$", "i") onTextChanged: scriptsModel.filterRegExp = new RegExp("^.*" + text + ".*$", "i")
Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i") Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i")
} }

View file

@ -156,6 +156,7 @@ Item {
readonly property real inputLabel: dimensions.largeScreen ? 14 : 10 readonly property real inputLabel: dimensions.largeScreen ? 14 : 10
readonly property real textFieldInput: dimensions.largeScreen ? 15 : 12 readonly property real textFieldInput: dimensions.largeScreen ? 15 : 12
readonly property real textFieldInputLabel: dimensions.largeScreen ? 13 : 9 readonly property real textFieldInputLabel: dimensions.largeScreen ? 13 : 9
readonly property real textFieldSearchIcon: dimensions.largeScreen ? 30 : 24
readonly property real tableText: dimensions.largeScreen ? 15 : 12 readonly property real tableText: dimensions.largeScreen ? 15 : 12
readonly property real buttonLabel: dimensions.largeScreen ? 13 : 9 readonly property real buttonLabel: dimensions.largeScreen ? 13 : 9
readonly property real iconButton: dimensions.largeScreen ? 13 : 9 readonly property real iconButton: dimensions.largeScreen ? 13 : 9