phoenix/src/extensionsIntegrated/Phoenix-live-preview/panel.html at 8ea615e0a210439ffbb8a3aa0d907a7028039cf1 · phcode-dev/phoenix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<div id="panel-live-preview">
    <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
        <div style="width: 20%;display: flex;">
            <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button">
	            <i class="fa-solid fa-arrow-rotate-right"></i>
	        </button>
	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
	            <i class="fa-solid fa-expand"></i>
	        </button>
	        <button id="previewModeLivePreviewButton" title="{{clickToToggleEdit}}" class="btn-alt-quiet toolbar-button">
	            <i class="fa-solid fa-pencil"></i>
	        </button>
            <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
        </div>
        <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
<!--            these are buttons that are always invisible to help central align the panel title-->
            <button id="safariButtonBallast" title="{{openInSafari}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/safari/safari-original.svg" />
            </button>
            <button id="chromeButtonBallast" title="{{openInChrome}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/chrome/chrome-original.svg" />
            </button>
            <button id="edgeButtonBallast" title="{{openInEdge}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="styles/images/edge-logo.svg" />
            </button>
            <button id="firefoxButtonBallast" title="{{openInFirefox}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
            </button>
<!--            these are buttons that are always invisible to help central align the panel title-->
            <button id="pinURLButton" title="{{clickToPinUnpin}}" class="btn-alt-quiet toolbar-button unpin-icon"></button>
            <span id="panel-live-preview-title">{{livePreview}}</span>
            <button id="livePreviewPopoutButton" title="{{clickToPopout}}" class="btn-alt-quiet toolbar-button open-icon"></button>
            <button id="safariButton" title="{{openInSafari}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/safari/safari-original.svg" />
            </button>
            <button id="chromeButton" title="{{openInChrome}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/chrome/chrome-original.svg" />
            </button>
            <button id="edgeButton" title="{{openInEdge}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="styles/images/edge-logo.svg" />
            </button>
            <button id="firefoxButton" title="{{openInFirefox}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
            </button>
        </div>
        <div style="width: 20%;display: flex;align-items: center; justify-content: flex-end">
            <button id="livePreviewSettingsBtn" title="{{livePreviewSettings}}"
                    class="btn-alt-quiet toolbar-button lp-settings-icon"><i class="fa-solid fa-gear"></i></button>
        </div>
        <iframe id="live-preview-server-iframe"
                title="live preview server"
                src="about:blank"
                style="width:100%;"
                sandbox="allow-same-origin allow-scripts"
                hidden>
        </iframe>
    </div>
    <div class="live-preview-custom-banner forced-hidden">
        <span class="live-preview-banner-message">{{Strings.LIVE_PREVIEW_CUSTOM_SERVER_BANNER}}</span>
        <button class="live-preview-settings-banner-btn btn btn-mini primary" style="margin-left: 10px;">{{Strings.LIVE_DEV_SETTINGS}}</button>
        <i class="fa fa-close custom-server-banner-close-icon"
           style="margin-left: 10px;margin-right: 10px;cursor: pointer;"
           title="{{Strings.CLOSE}}"></i>
    </div>
    <div class="live-preview-status-overlay forced-hidden">
        <span class="live-preview-overlay-message"><!-- the msg will come here dynamically --></span>
        <i class="fa fa-times live-preview-overlay-close" title="{{Strings.LIVE_PREVIEW_HIDE_OVERLAY}}"></i>
    </div>
    <div class="frame-container">
        <div style="width: 3px; flex-shrink: 0;"></div>
        <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"
                width="100%" height="100%" seamless="true" srcdoc='<img width="50px" src="styles/images/Spinner-1s-200px.svg">'
                sandbox="allow-same-origin allow-popups-to-escape-sandbox allow-popups allow-scripts allow-forms allow-modals allow-pointer-lock">
        </iframe>
    </div>
</div>