Skip to content

Instantly share code, notes, and snippets.

@rluiten
Forked from lynaghk/SketchSystems.spec
Last active July 4, 2023 03:14
Show Gist options
  • Save rluiten/4d33bee9e432a16251c81f6e38311973 to your computer and use it in GitHub Desktop.
Save rluiten/4d33bee9e432a16251c81f6e38311973 to your computer and use it in GitHub Desktop.
# Robins changes to Traffic Light UI example for
# Robins changes to Traffic Light UI example for
Search Bar Hacked*
Inactive*
focused -> Active
submitted -> Empty Search
Active
canceled -> Inactive
typed -> Text Entry
Empty*
submitted -> Empty Search
Text Entry
submitted -> Loading Search Results
Loading Search Results
tick -> Results
Results
submitted -> Loading Search Results
Empty Search
function render({active_states}){
var active_state = active_states[0].name;
return $('div', {style: {display: 'flex', justifyContent: 'center', height: '100%'}},
render_search_bar(active_state))}
function render_search_bar(active_state){
if (active_state == 'Inactive') {
return $('div',
$('input', {value: '',
placeholder: 'Enter a search term...',
style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search')
)
}
if (active_state == 'Empty') {
return $('div',
$('input', {value: ' ',
style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'))
}
if (active_state == 'Text Entry') {
return $('div',
$('input', {value: 'Example sea',
style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'))
}
if (active_state == 'Empty Search') {
return $('div',
$('input', {value: '',
style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
$('div', {style: { color: 'Red'} }, $('p', 'An empty search has no results. Please enter search text to search')),
)
}
if (active_state == 'Loading Search Results') {
return $('div',
$('input', {value: '',
placeholder: 'Example search string',
style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
$('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
$('div', $('p', 'Loading Results Spinner...'))
)
}
if (active_state == 'Results') {
return $('div',
$('input', {value: 'Example search string',
style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
$('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
$('ul',
$('li', 'Search result 1'),
$('li', 'Search result 2'),
$('li', 'Search result 3')))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment