Styling the export button

This example shows some changes we can make to the Done button to make it fit our project.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    /* Adjust the primary brand color of the editor */
    .pintura-editor {
        --color-primary: #2196f3;
        --color-primary-dark: #157bcb;
        --color-primary-text: #fff;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, findNode } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // Move the toolbar to the bottom of the editor
        layoutVerticalToolbarPreference: 'bottom',

        // Intercept toolbar render call and adjust export button properties
        willRenderToolbar: (toolbar) => {
            // get the export button
            const exportButton = findNode('export', toolbar);

            // get a reference to the options
            const exportButtonOptions = exportButton[2];

            // show the label
            exportButtonOptions.hideLabel = false;

            // disable the icon
            exportButtonOptions.icon = false;

            // return the toolbar for drawing
            return toolbar;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, findNode } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const willRenderToolbar = (toolbar) => {
        // get the export button
        const exportButton = findNode('export', toolbar);

        // get a reference to the options
        const exportButtonOptions = exportButton[2];

        // show the label
        exportButtonOptions.hideLabel = false;

        // disable the icon
        exportButtonOptions.icon = false;

        // return the toolbar for drawing
        return toolbar;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                // Move the toolbar to the bottom of the editor
                layoutVerticalToolbarPreference={'bottom'}
                // Intercept toolbar render call and adjust export button properties
                willRenderToolbar={willRenderToolbar}
            />
        </div>
    );
}

export default App;

/* Adjust the primary brand color of the editor */
.pintura-editor {
    --color-primary: #2196f3;
    --color-primary-dark: #157bcb;
    --color-primary-text: #fff;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            layoutVerticalToolbarPreference="bottom"
            :willRenderToolbar="willRenderToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults, findNode } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            // Intercept toolbar render call and adjust export button properties
            willRenderToolbar: (toolbar) => {
                // get the export button
                const exportButton = findNode('export', toolbar);

                // get a reference to the options
                const exportButtonOptions = exportButton[2];

                // show the label
                exportButtonOptions.hideLabel = false;

                // disable the icon
                exportButtonOptions.icon = false;

                // return the toolbar for drawing
                return toolbar;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

/* Adjust the primary brand color of the editor */
.pintura-editor {
    --color-primary: #2196f3;
    --color-primary-dark: #157bcb;
    --color-primary-text: #fff;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults, findNode } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const willRenderToolbar = (toolbar) => {
        // get the export button
        const exportButton = findNode('export', toolbar);

        // get a reference to the options
        const exportButtonOptions = exportButton[2];

        // show the label
        exportButtonOptions.hideLabel = false;

        // disable the icon
        exportButtonOptions.icon = false;

        // return the toolbar for drawing
        return toolbar;
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        layoutVerticalToolbarPreference={/* Move the toolbar to the bottom of the editor */
        'bottom'}
        {willRenderToolbar}
    />
</div>

<style>
    /* Adjust the primary brand color of the editor */
    div :global(.pintura-editor) {
        --color-primary: #2196f3;
        --color-primary-dark: #157bcb;
        --color-primary-text: #fff;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, findNode, PinturaNode } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    // Intercept toolbar render call and adjust export button properties
    willRenderToolbar = (toolbar: any): PinturaNode[] => {
        // get the export button
        const exportButton = findNode('export', toolbar);

        // get a reference to the options
        const exportButtonOptions = exportButton[2];

        // show the label
        exportButtonOptions.hideLabel = false;

        // disable the icon
        exportButtonOptions.icon = false;

        // return the toolbar for drawing
        return toolbar;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    layoutVerticalToolbarPreference="bottom"
    [willRenderToolbar]="willRenderToolbar"
></pintura-editor>

/* Adjust the primary brand color of the editor */
::ng-deep .pintura-editor {
    --color-primary: #2196f3;
    --color-primary-dark: #157bcb;
    --color-primary-text: #fff;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    /* Adjust the primary brand color of the editor */
    .pintura-editor {
        --color-primary: #2196f3;
        --color-primary-dark: #157bcb;
        --color-primary-text: #fff;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { findNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',

            // Move the toolbar to the bottom of the editor
            layoutVerticalToolbarPreference: 'bottom',

            // Intercept toolbar render call and adjust export button properties
            willRenderToolbar: (toolbar) => {
                // get the export button
                const exportButton = findNode('export', toolbar);

                // get a reference to the options
                const exportButtonOptions = exportButton[2];

                // show the label
                exportButtonOptions.hideLabel = false;

                // disable the icon
                exportButtonOptions.icon = false;

                // return the toolbar for drawing
                return toolbar;
            },
        });
    });
</script>