svgedit/src/editor/dialogs/imagePropertiesDialog.html

Powerful SVG-Editor for your browser

<style>
    :not(:defined) {
        display: none;
    }

    /* Force the scroll bar to appear so we see it hide when overlay opens. */
    body::-webkit-scrollbar {
        background: lightgray;
    }

    body::-webkit-scrollbar-thumb {
        background: darkgray;
    }

    #svg_docprops #svg_docprops_container {
        padding: 10px;
        background-color: #5a6162;
        color: #c5c5c5;
        border: 1px outset #777;
        opacity: 1.0;
        font-family: Verdana, Helvetica, sans-serif;
        font-size: .8em;
        z-index: 20001;
    }

    #svg_docprops .error {
        border: 1px solid red;
        padding: 3px;
    }

    #svg_docprops #resolution {
        max-width: 14em;
    }

    #tool_docprops_back {
        margin-left: 1em;
        overflow: auto;
    }

    #svg_docprops_container #svg_docprops_docprops {
        float: left;
        width: 221px;
        margin: 5px .7em;
        overflow: hidden;
    }

    #svg_docprops legend {
        max-width: 195px;
    }

    #svg_docprops_docprops>legend {
        font-weight: bold;
        font-size: 1.1em;
    }

    #svg_docprops_container fieldset {
        padding: 5px;
        margin: 5px;
        border: 1px solid #DDD;
    }

    #svg_docprops_container label {
        display: block;
        margin: .5em;
    }
</style>
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
    <div id="svg_docprops_container">
        <div id="tool_docprops_back" class="toolbar_button">
            <button id="tool_docprops_save"></button>
            <button id="tool_docprops_cancel"></button>
        </div>
        <fieldset id="svg_docprops_docprops">
            <legend id="svginfo_image_props"></legend>
            <label>
                <span id="svginfo_title"></span>
                <input type="text" id="canvas_title" />
            </label>
            <fieldset id="change_resolution">
                <legend id="svginfo_dim"></legend>
                <label>
                    <span id="svginfo_width"></span>
                    <input type="text" id="canvas_width" size="6" />
                </label>
                <label>
                    <span id="svginfo_height"></span>
                    <input type="text" id="canvas_height" size="6" />
                </label>
                <label>
                    <select id="resolution">
                        <option id="selectedPredefined" selected="selected"></option>
                        <option>640x480</option>
                        <option>800x600</option>
                        <option>1024x768</option>
                        <option>1280x960</option>
                        <option>1600x1200</option>
                        <option id="fitToContent" value="content"></option>
                    </select>
                </label>
            </fieldset>
            <fieldset id="image_save_opts">
                <legend id="includedImages"></legend>
                <label>
                    <input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
                    <span id="image_opt_embed"></span>
                </label>
                <label>
                    <input type="radio" id="image_ref" name="image_opt" value="ref" />
                    <span id="image_opt_ref"></span>
                </label>
            </fieldset>
        </fieldset>
    </div>
</elix-dialog>