Context menu, custom & translate

[vegarringdal]

@Thanood, feel free to add more ideas here

To support I18N on the context menu we will create a custom element like the v-grid-col, where you can replace parts of the menu, by coping part you want and modify it

This will work with the new attribute v-menu Atm the v-menu is added, and simple html is using it, on filters its adding it by default to labels and inputs, I dunno how much I like this, so either have a option to disable the special attributes so you can add them manually, or figure out some other fancy way to do it.

v-menu work like style tags v-menu="filter:attributeField;sort:attributeField;groupby:attributeField" if you skip one it skips that part of the menu

Custom html tag for replacing will be v-grid-context

<v-grid-context>
 <close-template>etc etc </close-template>
 <sort-template>etc etc </sort-template>
 <filter-main-template>etc etc </filter-main-template>
 <filter-operator-template>etc etc </filter-operator-template>
 <groupby-template>etc etc </groupby-template>
 <all-template>etc etc </all-template>
 </v-grid-context>

This still dont solve operator translation in inputs, will need input from @Thanood here.. I want to add a v-translate attribute you can just bind simple object to override the language too, since that will be a lot simple to use if you really dont want to go hardcore html, but needs translation

TODO... write more..

[vegarringdal]

@Thanood

Im adding the v-translate now

To use v-translate.bind="myObject" as a attibute on the v-grid

All under are optional, so you can skip one without breaking it These are used for translating the menu and input in filter

myObject = {
        close: 'Close',
        pinLeft: 'Pin left',
        pinRight: 'Pin Right',
        groupBy: 'Group By',
        sortAscending: 'Sort Ascending',
        sortDescending: 'Sort Descending',
        showAll: 'Show All',
        clearCurrent: 'Clear Current',
        clearAll: 'Clear All',
        chooseOperator: 'Choose Operator',
        back: 'Back',
        equals: 'Equals',
        lessThanOrEqual: 'Less than or equal',
        greaterThanOrEqual: 'Greater than or equal',
        lessThan: 'Less than',
        greaterThan: 'Greater than',
        contains: 'Contains',
        notEqualTo: 'Not equal to',
        doesNotContain: 'Does not contain',
        beginsWith: 'Begins with',
        endsWith: 'Ends with'
    };

[vegarringdal]

@Thanood

Custom html for menu parts is now added

Sample, for just replacing the "close" part

<v-grid-contextmenu>
            <v-menu-close>
              <ul if.bind="show" class="avg-menu__items">
                  <li class="avg-menu__item">
                  <p click.delegate="menuClick('close','true')" class="avg-menu__link">
                      <i class="avg-fa avg-text"></i> Kick ass : ${menuStrings.close}
                  </p>
                  </li>
              </ul>
            </v-menu-close>
        </v-grid-contextmenu>

Possible parts inside context element is:

• <v-menu-close>
• <v-menu-groupby>
• <v-menu-sort>
• <v-menu-filter>
• <v-menu-filter-options>
• <v-menu-all>

menu does not have binding context to class yet, so need to add that

[vegarringdal]

Added to temp gitbook replaced by temp gitbook: https://github.com/vegarringdal/vGrid/issues/69