Simple UI Plugin | Line Selector UI element
Budget: $30 – $250 USD
jquery plugin that convert standard <select> element into "Line Selector Picker".
options can be of 3 types:
A) only text
B) <i> tag(font icon) only
C) <i> tag + text(optional)
Dev Notes:
1) if options are not fit into a single row, they should go to the next row and be aligned left.
2) probably instead of <i> we will use <svg>, so plugin should adapt
3) the plugin should reflect if the select value is changed programmatically (we will call jquery .change() on the element)
4) the plugin should have a callback when the option is selected by the user (it should not be called when the value is changed programmatically)
5) CSS should be in a separate CSS file and should be specific to the plugin(so no general class names and no overwrites of general tags styles)
Design Notes:
6) The UI Element should have the following Parameters exposed for adjusting the UI for the needed case:
- Total Width (Total Width)
- Button Height ( Button Height)
- Columns( Only for C)
7) If the above is not provided, use default Values
7) Single Button Width depends on the number of items in a row and the Total Width.
8) Selected Icons, Text should change color on active. The SVG Icon should be colored. Please note that not all colors in the SVG Icon need to be affected. See example "FIT". Please provide instructions on how to prepare SVG for this.
9) On Hoover show Hand Icon
10) General Follow design concept from:
https://www.figma.com/file/1hg6PZTBMDGc5y908pd0hO/Websheet-%7C-More-visual-settigns?node-id=153%3A12
ALL WORK NEEDS TO BE PRESENTED INSIDE CODEPEN
options can be of 3 types:
A) only text
B) <i> tag(font icon) only
C) <i> tag + text(optional)
Dev Notes:
1) if options are not fit into a single row, they should go to the next row and be aligned left.
2) probably instead of <i> we will use <svg>, so plugin should adapt
3) the plugin should reflect if the select value is changed programmatically (we will call jquery .change() on the element)
4) the plugin should have a callback when the option is selected by the user (it should not be called when the value is changed programmatically)
5) CSS should be in a separate CSS file and should be specific to the plugin(so no general class names and no overwrites of general tags styles)
Design Notes:
6) The UI Element should have the following Parameters exposed for adjusting the UI for the needed case:
- Total Width (Total Width)
- Button Height ( Button Height)
- Columns( Only for C)
7) If the above is not provided, use default Values
7) Single Button Width depends on the number of items in a row and the Total Width.
8) Selected Icons, Text should change color on active. The SVG Icon should be colored. Please note that not all colors in the SVG Icon need to be affected. See example "FIT". Please provide instructions on how to prepare SVG for this.
9) On Hoover show Hand Icon
10) General Follow design concept from:
https://www.figma.com/file/1hg6PZTBMDGc5y908pd0hO/Websheet-%7C-More-visual-settigns?node-id=153%3A12
ALL WORK NEEDS TO BE PRESENTED INSIDE CODEPEN