diff --git a/src/assets/new-project/assets/css/style.css b/src/assets/new-project/assets/css/style.css
index 1b16c0bfd0..143528270b 100644
--- a/src/assets/new-project/assets/css/style.css
+++ b/src/assets/new-project/assets/css/style.css
@@ -1,5 +1,7 @@
:root {
--sansFontFamily: 'SourceSansPro', Helvetica, Arial, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
+ --text-heading: #e0e0e0;
+ --text-body: #cccccc;
}
/* SourceSansPro Regular */
@@ -20,6 +22,7 @@ body {
overflow: hidden;
background-color: #fff;
height: 100%;
+ color: var(--text-body);
}
.even-layout {
@@ -30,8 +33,8 @@ body {
}
#download-phcode-banner {
- background-color: #2e3031;
- color: white;
+ background-color: #1e1e1e;
+ color: var(--text-heading);
border-radius: 10px;
margin-top: 26px;
cursor: pointer;
@@ -40,7 +43,7 @@ body {
}
#download-phcode-banner:hover {
- background-color: #505357;
+ background-color: #333333;
}
p {
@@ -83,11 +86,11 @@ img {
color: #8A8A8A;
}
.recent-project-remove:hover {
- color: white;
+ color: var(--text-heading);
}
.side-nav {
- background: #5D5F60;
+ background: #252525;
height: 100vh;
position: fixed;
right: 0;
@@ -134,7 +137,7 @@ img {
outline: 0;
height: 100%;
overflow-y: auto;
- background: #3C3F41;
+ background: #252525;
box-shadow: -61px 0px 93px 8px rgb(0 0 0 / 51%);
border-radius: 20px 0px 0px 20px;
padding: 30px 50px;
@@ -172,15 +175,15 @@ img {
}
.modal-nav-tabs .nav-item.show .nav-link, .modal-nav-tabs .nav-link.active {
- color: #fff;
- background-color: #2E3031;
+ color: var(--text-heading);
+ background-color: #1e1e1e;
border-color: #dee2e6 #dee2e6 #fff;
border-bottom: 2px solid #016DC4 !important;
}
.ex-input input {
- background: #555555;
+ background: #333333;
border-radius: 4px;
height: 46px;
width: calc(100% - 20px);
@@ -217,7 +220,7 @@ img {
font-size: 14px;
line-height: 17px;
text-align: center;
- color: #FFFFFF;
+ color: var(--text-heading);
padding: 10px;
transition: all .6s ease-in-out;
cursor: pointer;
@@ -232,7 +235,7 @@ img {
font-size: 16px;
line-height: 19px;
- color: #FFFFFF;
+ color: var(--text-heading);
margin-bottom: 20px;
}
@@ -264,7 +267,7 @@ img {
font-size: 13px;
line-height: 14px;
- color: #FFFFFF;
+ color: var(--text-heading);
margin-top: 10px;
display: block;
opacity: 1;
@@ -286,8 +289,8 @@ img {
}
.ex-tabs .nav-item.show .nav-link, .ex-tabs .nav-link.active {
- color: #fff;
- background-color: #2E3031;
+ color: var(--text-heading);
+ background-color: #1e1e1e;
border-color: #016DC4;
}
@@ -304,7 +307,7 @@ img {
}
.project-card {
- background: #333535;
+ background: #2a2a2a;
border-radius: 5px;
padding: 20px 15px;
height: 220px;
@@ -314,11 +317,11 @@ img {
}
.project-card:hover {
- background: #292b2b;
+ background: #1e1e1e;
}
.project-card-active {
- background: #292b2b;
+ background: #1e1e1e;
}
.project-list {
@@ -336,7 +339,7 @@ img {
font-size: 16px;
line-height: 19px;
- color: #FFFFFF;
+ color: var(--text-heading);
margin-bottom: 3px;
}
@@ -393,7 +396,7 @@ img {
font-weight: 600;
font-size: 12px;
line-height: 14px;
- color: #FFFFFF;
+ color: var(--text-heading);
border: none;
cursor: pointer;
}
@@ -401,7 +404,7 @@ img {
.btn-remove {
width: 74px;
height: 26px;
- background: #3F3F3F;
+ background: #2a2a2a;
border-radius: 3px;
font-weight: 600;
font-size: 12px;
@@ -558,7 +561,7 @@ img {
font-size: 13px;
line-height: 16px;
- color: #FFFFFF;
+ color: var(--text-heading);
margin-right: 15px;
display: block;
}
@@ -583,7 +586,7 @@ img {
}
.view-all select option {
- color: #fff;
+ color: var(--text-heading);
font-weight: 500;
font-size: 16px;
background: rgba(0, 0, 0, 1);
@@ -623,12 +626,12 @@ img {
.on-hover-text h6 {
font-size: 12px;
- color: #fff;
+ color: var(--text-heading);
margin-bottom: 2px;
}
.review-star .fa {
- color: #fff;
+ color: var(--text-heading);
margin: 0px 1px;
font-size: 15px;
}
@@ -646,7 +649,7 @@ img {
}
.code-editor-card {
- background: #3C3F41;
+ background: #252525;
box-shadow: 0px 0px 93px rgba(0, 0, 0, 0.51);
padding: 35px 50px;
height: 100%;
@@ -665,7 +668,7 @@ img {
font-size: 25px;
line-height: 25px;
text-align: left;
- color: #FFFFFF;
+ color: var(--text-heading);
margin-bottom: 10px;
}
@@ -679,7 +682,7 @@ img {
.close-btn {
width: 35px;
height: 35px;
- background: #3F3F3F;
+ background: #2a2a2a;
border: 1px solid #202020;
border-radius: 4px;
padding: 5px;
@@ -688,7 +691,7 @@ img {
line-height: 17px;
text-align: center;
cursor: pointer;
- color: #FFFFFF;
+ color: var(--text-heading);
transition: all .2s ease-in-out;
}
@@ -744,7 +747,7 @@ img {
font-weight: 500;
font-size: 13px;
line-height: 14px;
- color: #FFFFFF;
+ color: var(--text-heading);
margin-top: 10px;
display: block;
opacity: 1;
@@ -753,8 +756,8 @@ img {
}
.project-type-list li a.active {
- color: #fff;
- background-color: #2E3031;
+ color: var(--text-heading);
+ background-color: #1e1e1e;
border-color: #016DC4;
}
@@ -769,14 +772,14 @@ img {
}
.recent-project-card {
- background: #2E3031;
+ background: #1e1e1e;
border-radius: 10px;
max-height: 370px;
padding: 20px 30px;
}
.no-project-card {
- background: #2E3031;
+ background: #1e1e1e;
border-radius: 10px;
max-height: 370px;
padding: 20px 30px;
@@ -817,7 +820,7 @@ img {
font-weight: 600;
font-size: 14px;
line-height: 17px;
- color: #FFFFFF;
+ color: var(--text-heading);
text-align: center;
}
@@ -825,14 +828,14 @@ img {
font-weight: 600;
font-size: 14px;
line-height: 17px;
- color: #FFFFFF;
+ color: var(--text-heading);
text-align: center;
}
.no-project-card span {
font-size: 14px;
line-height: 17px;
- color: #FFFFFF;
+ color: var(--text-heading);
}
.project-content-right {
@@ -843,7 +846,7 @@ img {
font-weight: 500;
font-size: 13px;
line-height: 14px;
- color: #FFFFFF;
+ color: var(--text-heading);
}
.recent-project-list li {
@@ -854,7 +857,7 @@ img {
}
.recent-project-list li:hover {
- background: #3F3F3F;
+ background: #2a2a2a;
cursor: pointer;
}
@@ -895,7 +898,7 @@ img {
font-weight: bold;
font-size: 20px;
line-height: 24px;
- color: #FFFFFF;
+ color: var(--text-heading);
}
.back-btn {
@@ -949,7 +952,7 @@ img {
}
.website-detail input {
- background: #555555;
+ background: #333333;
border: 1px solid transparent;
border-radius: 2px;
height: 48px;
@@ -986,12 +989,12 @@ img {
font-size: 14px;
line-height: 17px;
text-align: center;
- color: #FFFFFF;
+ color: var(--text-heading);
cursor: pointer;
}
.create-btn:disabled {
- background: #555555;
+ background: #333333;
cursor: unset;
}
@@ -1010,7 +1013,7 @@ img {
}
.preview-box {
- background: #2E3031;
+ background: #1e1e1e;
border-radius: 5px;
width: 100%;
height: 95%;
@@ -1033,7 +1036,7 @@ img {
font-weight: 600;
font-size: 16px;
line-height: 19px;
- color: #FFFFFF;
+ color: var(--text-heading);
}
.full-screen-btn {
@@ -1079,7 +1082,7 @@ img {
line-height: 19px;
margin-bottom: 0;
- color: #FFFFFF;
+ color: var(--text-heading);
}
.lity-close-big {
@@ -1133,7 +1136,7 @@ img {
color: #333;
}
a:hover {
- color: white;
+ color: var(--text-heading);
}
}
.notification-ui-hidden {
@@ -1185,7 +1188,7 @@ img {
/* Links inside the dropdown */
.dropdown-content div {
- color: white;
+ color: var(--text-heading);
padding: 3px 5px;
text-decoration: none;
text-align: left;
diff --git a/src/assets/new-project/images/video-game-gamepad.svg b/src/assets/new-project/images/video-game-gamepad.svg
index 564e395d8c..9a12beb0e2 100644
--- a/src/assets/new-project/images/video-game-gamepad.svg
+++ b/src/assets/new-project/images/video-game-gamepad.svg
@@ -2,8 +2,8 @@
.st0{fill:#4CAF50;}
.st1{fill:#2196F3;}
.st2{fill:#F44336;}
- .st3{fill:#262626;}
+ .st3{fill:#505050;}
.st4{fill:#FFD54F;}
- .st5{fill-rule:evenodd;clip-rule:evenodd;fill:#262626;}
- .st6{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+ .st5{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;}
+ .st6{fill-rule:evenodd;clip-rule:evenodd;fill:#aaaaaa;}
]]>
\ No newline at end of file
diff --git a/src/extensionsIntegrated/Phoenix/guided-tour.js b/src/extensionsIntegrated/Phoenix/guided-tour.js
index cba969224b..d2ac70b8eb 100644
--- a/src/extensionsIntegrated/Phoenix/guided-tour.js
+++ b/src/extensionsIntegrated/Phoenix/guided-tour.js
@@ -89,31 +89,6 @@ define(function (require, exports, module) {
editorContextMenu.on(Menus.EVENT_BEFORE_CONTEXT_MENU_OPEN, _showNotification);
}
- // 3. When user changes file by clicking on files panel, we show "click here to open new project window"
- // Only shown once.
- function _showNewProjectNotification() {
- if(userAlreadyDidAction.newProjectShown){
- return;
- }
- if(currentlyShowingNotification){
- setTimeout(_showNewProjectNotification, NOTIFICATION_BACKOFF);
- return;
- }
- userAlreadyDidAction.newProjectShown = true;
- PhStore.setItem(GUIDED_TOUR_LOCAL_STORAGE_KEY, JSON.stringify(userAlreadyDidAction));
- Metrics.countEvent(Metrics.EVENT_TYPE.UI, "guide", "newProj");
- currentlyShowingNotification = NotificationUI.createFromTemplate(
- Strings.START_PROJECT, Strings.NEW_PROJECT_NOTIFICATION,
- "newProject", {
- allowedPlacements: ['top', 'bottom'],
- autoCloseTimeS: 15,
- dismissOnClick: true}
- );
- currentlyShowingNotification.done(()=>{
- currentlyShowingNotification = null;
- });
- }
-
function _showFirstUseSurvey(surveyURL, delayOverride, title, useDialog) {
let surveyVersion = 6; // increment this if you want to show this again
if(userAlreadyDidAction.generalSurveyShownVersion === surveyVersion) {
@@ -302,7 +277,6 @@ define(function (require, exports, module) {
return;
}
tourStarted = true;
- _showNewProjectNotification();
_showBeautifyNotification();
_showSurveys();
};
diff --git a/src/extensionsIntegrated/Phoenix/new-project.js b/src/extensionsIntegrated/Phoenix/new-project.js
index 78859fa458..57838002d0 100644
--- a/src/extensionsIntegrated/Phoenix/new-project.js
+++ b/src/extensionsIntegrated/Phoenix/new-project.js
@@ -85,7 +85,7 @@ define(function (require, exports, module) {
newProjectURL: `${window.Phoenix.baseURL}assets/new-project/code-editor.html`
};
let dialogueContents = Mustache.render(newProjectTemplate, templateVars);
- newProjectDialogueObj = Dialogs.showModalDialogUsingTemplate(dialogueContents, true);
+ newProjectDialogueObj = Dialogs.showModalDialogUsingTemplate(dialogueContents, true, "#newProject");
_focusContentWindow();
Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "dialogue", "open");
return newProjectDialogueObj;
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 421764934d..7e80380063 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -1336,7 +1336,6 @@ define({
"PREVIEW": "Preview",
"BUILD_WEBSITE": "Build Website",
"VIEW_MORE": "View More...",
- "NEW_PROJECT_NOTIFICATION": "Click this icon to open the `Start Project` window again. See Recent Projects, Open Folder or start projects from templates. ![](\"styles/images/new_project.png\")
",
"BEAUTIFY_CODE_NOTIFICATION": "Click here or press `{0}` to beautify code. ![](\"styles/images/beautify.gif\")
",
"DEFAULT_PROJECT_NOTIFICATION": "Open the Default Project in {APP_NAME} to get started quickly (ideal as a scratch pad).Or, open a folder from your computer with the Open Folder icon below.
ok",
"DIRECTORY_REPLACE_MESSAGE": "The selected folder {0} is not empty. Are you sure you want to replace the folder contents with the project?",
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index b8ad1471a8..5e6085c579 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -1046,6 +1046,18 @@ a:focus {
vertical-align: middle;
}
+@keyframes dialog-woosh-land-pulse {
+ 0% { transform: scale(1); }
+ 25% { transform: scale(1.5); }
+ 50% { transform: scale(0.9); }
+ 75% { transform: scale(1.15); }
+ 100% { transform: scale(1); }
+}
+
+.dialog-woosh-land {
+ animation: dialog-woosh-land-pulse 600ms ease-in-out;
+}
+
.modal {
background-color: @bc-panel-bg;
border: 1px solid @bc-panel-border;
diff --git a/src/styles/images/new_project.png b/src/styles/images/new_project.png
deleted file mode 100644
index 589701faab..0000000000
Binary files a/src/styles/images/new_project.png and /dev/null differ
diff --git a/src/widgets/Dialogs.js b/src/widgets/Dialogs.js
index ec868e6b22..71b1c50843 100644
--- a/src/widgets/Dialogs.js
+++ b/src/widgets/Dialogs.js
@@ -127,10 +127,51 @@ define(function (require, exports, module) {
*/
function _dismissDialog($dlg, buttonId) {
$dlg.data("buttonId", buttonId);
- $dlg.modal("hide");
- if(!_isAnyDialogShown() && EditorManager.getActiveEditor()){
- EditorManager.getActiveEditor().focus();
+ let closeToElement = $dlg.data("closeToElement");
+ let $target = closeToElement ? $(closeToElement) : null;
+
+ if ($target && $target.length && $target.is(":visible")) {
+ let targetRect = $target[0].getBoundingClientRect();
+ let targetCenterX = targetRect.left + targetRect.width / 2;
+ let targetCenterY = targetRect.top + targetRect.height / 2;
+
+ let $modal = $dlg;
+ let modalRect = $modal[0].getBoundingClientRect();
+ let modalCenterX = modalRect.left + modalRect.width / 2;
+ let modalCenterY = modalRect.top + modalRect.height / 2;
+
+ let translateX = targetCenterX - modalCenterX;
+ let translateY = targetCenterY - modalCenterY;
+
+ $modal.css({
+ "animation": "none",
+ "transition": "transform 300ms ease-in, opacity 300ms ease-in",
+ "transform": `translate(${translateX}px, ${translateY}px) scale(0.05)`,
+ "opacity": "0"
+ });
+
+ let $backdrop = $modal.next(".modal-backdrop");
+ $backdrop.css({
+ "transition": "opacity 300ms ease-in",
+ "opacity": "0"
+ });
+
+ setTimeout(function () {
+ $dlg.modal("hide");
+ if (!_isAnyDialogShown() && EditorManager.getActiveEditor()) {
+ EditorManager.getActiveEditor().focus();
+ }
+ $target.addClass("dialog-woosh-land");
+ setTimeout(function () {
+ $target.removeClass("dialog-woosh-land");
+ }, 600);
+ }, 300);
+ } else {
+ $dlg.modal("hide");
+ if (!_isAnyDialogShown() && EditorManager.getActiveEditor()) {
+ EditorManager.getActiveEditor().focus();
+ }
}
}
@@ -361,9 +402,12 @@ define(function (require, exports, module) {
* @param {boolean=} autoDismiss Whether to automatically dismiss the dialog when one of the buttons
* is clicked. Default true. If false, you'll need to manually handle button clicks and the Esc
* key, and dismiss the dialog yourself when ready by calling `close()` on the returned dialog.
+ * @param {string=} closeToElement A CSS selector for a target element. If specified, the dialog
+ * will animate open from and close toward the target element (a "woosh" effect). If the target
+ * is not found or not visible, the dialog opens/closes normally.
* @return {Dialog}
*/
- function showModalDialogUsingTemplate(template, autoDismiss) {
+ function showModalDialogUsingTemplate(template, autoDismiss, closeToElement) {
if (autoDismiss === undefined) {
autoDismiss = true;
}
@@ -382,6 +426,10 @@ define(function (require, exports, module) {
// Save the dialog promise for unit tests
$dlg.data("promise", promise);
+ if (closeToElement) {
+ $dlg.data("closeToElement", closeToElement);
+ }
+
let keydownHook = function (e) {
return _keydownHook.call($dlg, e, autoDismiss);
};
@@ -435,6 +483,51 @@ define(function (require, exports, module) {
// Push our global keydown handler onto the global stack of handlers.
KeyBindingManager.addGlobalKeydownHook(keydownHook);
+
+ // Animate open from target element if closeToElement is set
+ let openFromEl = $dlg.data("closeToElement");
+ let $openTarget = openFromEl ? $(openFromEl) : null;
+ if ($openTarget && $openTarget.length && $openTarget.is(":visible")) {
+ let targetRect = $openTarget[0].getBoundingClientRect();
+ let targetCenterX = targetRect.left + targetRect.width / 2;
+ let targetCenterY = targetRect.top + targetRect.height / 2;
+
+ let modalRect = $dlg[0].getBoundingClientRect();
+ let modalCenterX = modalRect.left + modalRect.width / 2;
+ let modalCenterY = modalRect.top + modalRect.height / 2;
+
+ let translateX = targetCenterX - modalCenterX;
+ let translateY = targetCenterY - modalCenterY;
+
+ // Disable the default modal CSS animation so our woosh takes over
+ // Start at the target position, scaled down
+ $dlg.css({
+ "animation": "none",
+ "transition": "none",
+ "transform": `translate(${translateX}px, ${translateY}px) scale(0.05)`,
+ "opacity": "0"
+ });
+
+ let $backdrop = $dlg.next(".modal-backdrop");
+ $backdrop.css({
+ "transition": "none",
+ "opacity": "0"
+ });
+
+ // Force reflow then animate to natural position
+ // eslint-disable-next-line no-unused-expressions
+ $dlg[0].offsetHeight;
+
+ $dlg.css({
+ "transition": "transform 300ms ease-out, opacity 300ms ease-out",
+ "transform": "translate(0, 0) scale(1)",
+ "opacity": "1"
+ });
+ $backdrop.css({
+ "transition": "opacity 300ms ease-out",
+ "opacity": ""
+ });
+ }
});
// Click handler for buttons