Wtower / generator-makrina

Yeoman generator for MEAN projects
MIT License
5 stars 0 forks source link

Add more field types for form-field sub-generator #6

Closed Wtower closed 8 years ago

Wtower commented 8 years ago

https://github.com/Wtower/generator-makrina/blob/v0.2.1/services/prompts.js#L153

  // {name: 'Date', value: 'date'},
  // {name: 'Text area', value: 'text-area'},
  // {name: 'Password', value: 'pass'},
  // {name: 'Auto complete (requires jquery ajax)', value: 'auto-complete'},
  // {name: 'Select custom with auto-complete (requires jquery, eg. States)', value: 'select-auto-complete'},
  // {name: 'Select grouped (eg. States by time zone)', value: 'select-grouped'},
  // {name: 'Select multiple (instead of checkboxes)', value: 'select-multiple'},
  // {name: 'Input tags', value: 'tags'},
  // {name: 'Checkboxes', value: 'checkbox'},
  // {name: 'Radios', value: 'radio'},
  // {name: 'Radio button twin group (eg. Gender)', value: 'radio-twin'},
  // {name: 'Switches', value: 'switch'},
  // {name: 'Stars', value: 'stars'}

The above correspond to the various sample elements of the Gentelella theme: https://colorlib.com/polygon/gentelella/form.html

Wtower commented 8 years ago

Checkboxes & radios

Gentelella offers the following checkbox and radio elements:

  // {name: 'Checkboxes', value: 'checkbox'},
  // {name: 'Radios', value: 'radio'},
  // {name: 'Radio button twin group (eg. Gender)', value: 'radio-twin'},
  // {name: 'Switches', value: 'switch'},

Both the checkboxes and radios elements from Gentelella can be either plain HTML or JS (using the iCheck library). Additionally, there is a JS radio button which looks like switch (the third option above, 'gender' field in sample), and a JS checkbox which looks like switch (fourth option, 'switch' field in sample).

All of the above elements that require JS do not work with tab stop, which may be important on certain forms. Additionally, JS all together is not necessary since these can be themed with CSS only.

Therefore, a simple checkbox/radio will be implemented at first.

In the future, implement additional CSS checkbox elements using http://cssdeck.com/labs/css-checkbox-styles but themed closer to gentelella, and overcoming the tab stop issue with http://stackoverflow.com/questions/21284536/why-cant-i-tab-into-css3-checkboxes .

Wtower commented 8 years ago

Select combo boxes

Gentelella offers the following select boxes:

  // {name: 'Select combo box (plain)', value: 'select'},
  // {name: 'Select custom with auto-complete (requires jquery, eg. States)', value: 'select-auto-complete'},
  // {name: 'Select grouped (eg. States by time zone)', value: 'select-grouped'},
  // {name: 'Select multiple (instead of checkboxes)', value: 'select-multiple'},

The first is a simple plain HTML select. The second is a nice implementation of select2 that indeed requires JS. The third will be omitted as it actually is a minor variation of the former. The last one is another select2 implementation that requires JS.

Wtower commented 8 years ago

Or alternatively all together avoid field generation and use some advanced angular directive instead.

Wtower commented 8 years ago

Functionality moved to ng-gentelella.