Skip to content

Commit cb91fac

Browse files
devvaannshdevvaannsh
committed
feat: move the link preview and editor setting to live preview settings
1 parent 4cf61ff commit cb91fac

4 files changed

Lines changed: 23 additions & 24 deletions

File tree

‎src/extensionsIntegrated/Phoenix-live-preview/LivePreviewSettings.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ define(function (require, exports, module) {
6262
const SUPPORTED_FRAMEWORKS = {};
6363
SUPPORTED_FRAMEWORKS[FRAMEWORK_DOCUSAURUS] = {configFile: "docusaurus.config.js", hotReloadSupported: true};
6464

65-
const PREFERENCE_SHOW_LIVE_PREVIEW_PANEL = "livePreviewShowAtStartup",
65+
const PREFERENCE_LINK_EDITOR_AND_PREVIEW = "livePreviewSyncSourceAndPreview",
66+
PREFERENCE_SHOW_LIVE_PREVIEW_PANEL = "livePreviewShowAtStartup",
6667
PREFERENCE_PROJECT_SERVER_ENABLED = "livePreviewUseDevServer",
6768
PREFERENCE_PROJECT_SERVER_URL = "livePreviewServerURL",
6869
PREFERENCE_PROJECT_SERVER_PATH = "livePreviewServerProjectPath",
@@ -122,7 +123,9 @@ define(function (require, exports, module) {
122123
{"settings": currentSettings, "Strings": Strings}));
123124

124125
// Select the correct theme.
125-
const $livePreviewServerURL = $template.find("#livePreviewServerURL"),
126+
const $linkEditorAndPreviewChk = $template.find("#linkEditorAndPreviewChk"),
127+
$linkEditorAndPreviewInfo = $template.find("#linkEditorAndPreviewInfo"),
128+
$livePreviewServerURL = $template.find("#livePreviewServerURL"),
126129
$enableCustomServerChk = $template.find("#enableCustomServerChk"),
127130
$showLivePreviewAtStartup = $template.find("#showLivePreviewAtStartupChk"),
128131
$serveRoot = $template.find("#serveRoot"),
@@ -133,6 +136,13 @@ define(function (require, exports, module) {
133136
$frameworkSelect = $template.find("#frameworkSelect");
134137

135138
// Initialize form values from preferences
139+
$linkEditorAndPreviewChk.prop(
140+
'checked', PreferencesManager.get(PREFERENCE_LINK_EDITOR_AND_PREVIEW) !== false
141+
);
142+
$linkEditorAndPreviewInfo.on("click", function(e) {
143+
e.preventDefault();
144+
Phoenix.app.openURLInDefaultBrowser("https://docs.phcode.dev");
145+
});
136146
$enableCustomServerChk.prop('checked', PreferencesManager.get(PREFERENCE_PROJECT_SERVER_ENABLED));
137147
$showLivePreviewAtStartup.prop('checked', PreferencesManager.get(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL));
138148
$hotReloadChk.prop('checked', !!PreferencesManager.get(PREFERENCE_PROJECT_SERVER_HOT_RELOAD_SUPPORTED));
@@ -174,6 +184,7 @@ define(function (require, exports, module) {
174184
Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "settings", "dialog");
175185
Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
176186
if (id === Dialogs.DIALOG_BTN_OK) {
187+
PreferencesManager.set(PREFERENCE_LINK_EDITOR_AND_PREVIEW, $linkEditorAndPreviewChk.is(":checked"));
177188
PreferencesManager.set(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL, $showLivePreviewAtStartup.is(":checked"));
178189
_saveProjectPreferences($enableCustomServerChk.is(":checked"), $livePreviewServerURL.val(),
179190
$serveRoot.val(), $hotReloadChk.is(":checked"), $frameworkSelect.val());

‎src/extensionsIntegrated/Phoenix-live-preview/livePreviewSettings.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ <h1 class="dialog-title">{{Strings.LIVE_DEV_SETTINGS_TITLE}}</h1>
88
<input type="checkbox" class="form-check-input" id="showLivePreviewAtStartupChk" style="margin-top: -2px;">
99
<label class="form-check-label" for="showLivePreviewAtStartupChk" style="display: inline">{{Strings.LIVE_DEV_SETTINGS_STARTUP}}</label>
1010
</div>
11+
<div class="form-group form-check" style="margin-top: 9px;">
12+
<input type="checkbox" class="form-check-input" id="linkEditorAndPreviewChk" style="margin-top: -2px;">
13+
<label class="form-check-label" for="linkEditorAndPreviewChk" style="display: inline">{{Strings.LIVE_PREVIEW_LINK_EDITOR_AND_PREVIEW}}</label>
14+
<a href="#" id="linkEditorAndPreviewInfo" title="{{Strings.LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE}}" style="margin-left: 4px; color: var(--content-color-weaker); text-decoration: none;"><i class="fa-solid fa-info-circle"></i></a>
15+
</div>
1116
<div class="form-group" style="margin-top: 9px;">
1217
<input id="enableCustomServerChk" type="checkbox" class="form-check-input" style="margin-top: -1px;">
1318
<label id="enableCustomServerLabel" class="form-check-label" for="enableCustomServerChk" style="display: inline">{{Strings.LIVE_DEV_SETTINGS_USE_SERVER}}</label>

‎src/extensionsIntegrated/Phoenix-live-preview/main.js‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,10 @@ define(function (require, exports, module) {
116116
// description: Strings.LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE
117117
// });
118118

119-
// live preview sync source and preview preference
119+
// live preview link editor and preview preference
120120
const PREFERENCE_LIVE_PREVIEW_SYNC = CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC;
121121
PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_SYNC, "boolean", true, {
122-
description: Strings.LIVE_DEV_SETTINGS_SYNC_SOURCE_AND_PREVIEW_PREFERENCE
122+
description: Strings.LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE
123123
});
124124

125125
const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
@@ -341,22 +341,16 @@ define(function (require, exports, module) {
341341
function _showModeSelectionDropdown(event) {
342342
const isEditFeaturesActive = isProEditUser;
343343
const currentMode = LiveDevelopment.getCurrentMode();
344-
const isNotPreviewMode = currentMode !== LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE;
345344
const items = [
346345
Strings.LIVE_PREVIEW_MODE_PREVIEW,
347346
Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
348347
Strings.LIVE_PREVIEW_MODE_EDIT
349348
];
350349

351-
// Add sync toggle for highlight and edit modes
352-
if (isNotPreviewMode) {
353-
items.push("---");
354-
items.push(Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW);
355-
}
356-
357350
// Only add edit-specific options when in edit mode and edit features are active
358351
const isEditMode = currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE;
359352
if (isEditFeaturesActive && isEditMode) {
353+
items.push("---");
360354
items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
361355
items.push(Strings.LIVE_PREVIEW_SHOW_RULER_LINES);
362356
}
@@ -378,12 +372,6 @@ define(function (require, exports, module) {
378372
html: `${checkmark}${item}${crownIcon}`,
379373
enabled: true
380374
};
381-
} else if (item === Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW) {
382-
const isEnabled = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_SYNC) !== false;
383-
if(isEnabled) {
384-
return `✓ ${Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW}`;
385-
}
386-
return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW}`;
387375
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
388376
const isHoverMode =
389377
PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) === CONSTANTS.HIGHLIGHT_HOVER;
@@ -434,11 +422,6 @@ define(function (require, exports, module) {
434422
Metrics.countEvent(Metrics.EVENT_TYPE.PRO, "proUpsellDlg", "fail");
435423
}
436424
}
437-
} else if (item === Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW) {
438-
// Toggle sync source and preview on/off
439-
const currentValue = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_SYNC);
440-
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_SYNC, currentValue === false);
441-
return; // Don't dismiss for this option
442425
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
443426
// Don't allow edit highlight toggle if edit features are not active
444427
if (!isEditFeaturesActive) {

‎src/nls/root/strings.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -517,8 +517,8 @@ define({
517517
"LIVE_PREVIEW_SHOW_RULER_LINES": "Show Measurements",
518518
"LIVE_PREVIEW_SHOW_SPACING_HANDLES": "Show Spacing Handles",
519519
"LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE": "Show spacing handles when elements are selected in live preview edit mode. Defaults to 'true'",
520-
"LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW": "Sync Code & Preview",
521-
"LIVE_DEV_SETTINGS_SYNC_SOURCE_AND_PREVIEW_PREFERENCE": "Sync source code cursor with live preview element highlighting. When enabled, moving the cursor in the editor highlights the corresponding element in the live preview, and clicking an element in the live preview jumps the cursor to its source code. Defaults to 'true'",
520+
"LIVE_PREVIEW_LINK_EDITOR_AND_PREVIEW": "Link Editor and Preview",
521+
"LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE": "Link editor cursor with live preview element highlighting. When enabled, moving the cursor in the editor highlights the corresponding element in the live preview, and clicking an element in the live preview jumps the cursor to its source code. Defaults to 'true'",
522522
"LIVE_PREVIEW_MODE_PREFERENCE": "'{0}' shows only the webpage, '{1}' connects the webpage to your code - click on elements to jump to their code and vice versa, '{2}' provides highlighting along with advanced element manipulation",
523523
"LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
524524

0 commit comments

Comments
 (0)