Skip to content

Commit 52c8401

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
feat: move the link preview and editor setting to live preview settings
1 parent 68bac47 commit 52c8401

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
@@ -117,10 +117,10 @@ define(function (require, exports, module) {
117117
// description: Strings.LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE
118118
// });
119119

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

126126
const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
@@ -382,22 +382,16 @@ define(function (require, exports, module) {
382382
function _showModeSelectionDropdown(event) {
383383
const isEditFeaturesActive = isProEditUser;
384384
const currentMode = LiveDevelopment.getCurrentMode();
385-
const isNotPreviewMode = currentMode !== LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE;
386385
const items = [
387386
Strings.LIVE_PREVIEW_MODE_PREVIEW,
388387
Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
389388
Strings.LIVE_PREVIEW_MODE_EDIT
390389
];
391390

392-
// Add sync toggle for highlight and edit modes
393-
if (isNotPreviewMode) {
394-
items.push("---");
395-
items.push(Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW);
396-
}
397-
398391
// Only add edit-specific options when in edit mode and edit features are active
399392
const isEditMode = currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE;
400393
if (isEditFeaturesActive && isEditMode) {
394+
items.push("---");
401395
items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
402396
items.push(Strings.LIVE_PREVIEW_SHOW_RULER_LINES);
403397
}
@@ -419,12 +413,6 @@ define(function (require, exports, module) {
419413
html: `${checkmark}${item}${crownIcon}`,
420414
enabled: true
421415
};
422-
} else if (item === Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW) {
423-
const isEnabled = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_SYNC) !== false;
424-
if(isEnabled) {
425-
return `✓ ${Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW}`;
426-
}
427-
return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW}`;
428416
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
429417
const isHoverMode =
430418
PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) === CONSTANTS.HIGHLIGHT_HOVER;
@@ -475,11 +463,6 @@ define(function (require, exports, module) {
475463
Metrics.countEvent(Metrics.EVENT_TYPE.PRO, "proUpsellDlg", "fail");
476464
}
477465
}
478-
} else if (item === Strings.LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW) {
479-
// Toggle sync source and preview on/off
480-
const currentValue = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_SYNC);
481-
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_SYNC, currentValue === false);
482-
return; // Don't dismiss for this option
483466
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
484467
// Don't allow edit highlight toggle if edit features are not active
485468
if (!isEditFeaturesActive) {

‎src/nls/root/strings.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -530,8 +530,8 @@ define({
530530
"LIVE_PREVIEW_SHOW_RULER_LINES": "Show Measurements",
531531
"LIVE_PREVIEW_SHOW_SPACING_HANDLES": "Show Spacing Handles",
532532
"LIVE_DEV_SETTINGS_SHOW_SPACING_HANDLES_PREFERENCE": "Show spacing handles when elements are selected in live preview edit mode. Defaults to 'true'",
533-
"LIVE_PREVIEW_SYNC_SOURCE_AND_PREVIEW": "Sync Code & Preview",
534-
"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'",
533+
"LIVE_PREVIEW_LINK_EDITOR_AND_PREVIEW": "Link Editor and Preview",
534+
"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'",
535535
"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",
536536
"LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
537537

0 commit comments

Comments
 (0)