[Style Manager] Markup for Color Palettes Cards Customizer Control

victor-panaite commented 6 years ago

Trebuie sa introducem un control nou (sau un type nou pentru controlul presets) pentru color pallets care sa ajute la stilizarea ca in design: https://projects.invisionapp.com/d/main#/console/9257521/285823257/preview

Todos

[x] New Control logic
[x] Card markup

victor-panaite commented 6 years ago

@vladolaru eu am generat structura de care aveam nevoie din js si am facut stilizarea.

Asta e structura folosita de mine sa te ajute sa generezi codul direct din php. Btw $link_to_bg_image ar trebui sa fie imaginea default pentru paleta atunci nu e hovered.

<span class="customize-inside-control-row" style="background-image: url( <?php echo $link_to_bg_image; ?> );">
    <input data-customize-setting-link="sm_color_palette"
           name="sm_color_palette"
           id="vasco"
           type="radio"
           value="vasco"
           data-options="{}">
        <label for="vasco">
            <div class="label__inner" style="background: <?php echo $sm_light_primary; ?>">
                <span class="preview__letter" style="background: <?php echo $sm_color_primary; ?>">A</span> Vasco
            </div>
        </label>
        <div class="palette">
            <?php //  iteration over available colors  ?>
            <div class="palette__item" style="background: #FE4A49"></div>
            <div class="palette__item" style="background: #FED766"></div>
            <div class="palette__item" style="background: #009FB7"></div>
            <div class="palette__item" style="background: #faf9ff"></div>
            <div class="palette__item" style="background: #F4F4F8"></div>
        </div>
</span>

vladolaru commented 6 years ago

@victor-panaite Good job cu stilizarea si markup-ul. Il implementez eu ASAP.

vladolaru commented 6 years ago

@victor-panaite @georgeolaru @razwan @ilincaroman Am implementat markup-ul facut de Victor (am scos tot din PHP, nu mai e nevoie de procesare pe client, inclusiv light/dark).

Am facut pana la urma un tip color_palette pentru tipul de control deja existent ca nu avea rost sa fac un control nou (vedem cu timpul daca e nevoie).

Am pus si suport pentru configuratie de preview. Deocamdata e vorba doar de background_image_url:

'vasco'  => array(
    'label'   => __( 'Vasco', 'customify' ),
    'preview' => array(
        'background_image_url' => 'https://images.unsplash.com/photo-1492553397175-5f7ec0158903?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f13108c72f87cf399a55260c6596694a&auto=format&fit=crop&w=3450&q=80',
    ),
    'options' => array(
    ),
),

Am introdus si activarea "declarata" a sectiunii Style Manager, respectiv tema trebuie sa aiba in functions.php in functia de setup:

/**
 * Enable support for the Style Manager Customizer section (via Customify).
 */
add_theme_support( 'customizer_style_manager' );

Am dat push pe branchul https://github.com/pixelgrade/customify/tree/100-mock-color-palettes

pixelgrade / customify

[Style Manager] Markup for Color Palettes Cards Customizer Control #104

Todos