Skip to content

Commit f0d446c

Browse files
aboseabose
committed
chore: enabling git in start project dialog in desktop and ui icon/ux changes in browser app
Show error messages to user on non github urls not supported in browser
1 parent 3df10df commit f0d446c

File tree

8 files changed

+140
-112
lines changed

8 files changed

+140
-112
lines changed

‎src/assets/new-project/assets/css/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -909,6 +909,12 @@ img {
909909
margin-bottom: 30px;
910910
}
911911

912+
.project-bottom {
913+
border-top: 3px solid rgba(255, 255, 255, 0.1);
914+
padding-top: 20px;
915+
margin-top: auto;
916+
}
917+
912918
.new-project-content {
913919
overflow-y: auto;
914920
}

‎src/assets/new-project/assets/js/code-editor.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -204,10 +204,6 @@ function initCodeEditor() {
204204
_openURLInTauri(document.getElementById(iconID).getAttribute('href'));
205205
};
206206
}
207-
if(window.top.__TAURI__) {
208-
// in desktop, we don't show github project option till we have git extension integrated.
209-
document.getElementById("newGitHubProject").classList.add("forced-hidden");
210-
}
211207
document.getElementById("newGitHubProject").onclick = function() {
212208
Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "main.Click", "github-project");
213209
window.location.href = 'new-project-github.html';

‎src/assets/new-project/assets/js/new-github-project.js‎

Lines changed: 105 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -23,115 +23,125 @@
2323
/*eslint strict: ["error", "global"]*/
2424
/* jshint ignore:start */
2525

26-
let createProjectBtn, websiteURLInput, locationInput;
27-
const FLATTEN_ZIP_FIRST_LEVEL_DIR = true;
26+
function browserInit() {
27+
let createProjectBtn, websiteURLInput, locationInput;
28+
const FLATTEN_ZIP_FIRST_LEVEL_DIR = true;
2829

29-
function _isValidGitHubURL(url) {
30-
// strip trailing slash
31-
url = url.replace(/\/$/, "");
32-
let githubPrefix = "https://github.com/";
33-
let components = url.replace("https://github.com/", '').split('/');
34-
if(!url.startsWith(githubPrefix) || components.length !== 2){
35-
return false;
30+
function _isValidGitHubURL(url) {
31+
// strip trailing slash
32+
url = url.replace(/\/$/, "");
33+
let githubPrefix = "https://github.com/";
34+
let components = url.replace("https://github.com/", '').split('/');
35+
if(!url.startsWith(githubPrefix) || components.length !== 2){
36+
return false;
37+
}
38+
return true;
3639
}
37-
return true;
38-
}
3940

40-
function _fixGitHubBrokenURL() {
41-
let githubPrefix = "https://github.com/",
42-
gitSuffix = '.git';
43-
let githubURL = websiteURLInput.value;
44-
if(githubURL.startsWith("http:")){
45-
githubURL = githubURL.replace("http:", "https:");
46-
}
47-
if(!githubURL.startsWith(githubPrefix)){
48-
return;
49-
}
50-
// strip any query string params if present
51-
let queryParamTrimIndex = githubURL.indexOf('?') >= 0 ? githubURL.indexOf('?') : githubURL.length;
52-
githubURL = githubURL.substring(0, queryParamTrimIndex);
53-
// trim everything after https://github.com/orgname/repo/... to https://github.com/orgname/repo
54-
let components = githubURL.replace("https://github.com/", '').split('/');
55-
// trim .git at the end of the name
56-
if(githubURL.endsWith(gitSuffix)){
57-
githubURL = githubURL.replace(new RegExp(gitSuffix + '$'), '');
58-
}
59-
if(components.length > 2){
60-
githubURL = `https://github.com/${components[0]}/${components[1]}`;
41+
function _fixGitHubBrokenURL() {
42+
let githubPrefix = "https://github.com/",
43+
gitSuffix = '.git';
44+
let githubURL = websiteURLInput.value;
45+
if(githubURL.startsWith("http:")){
46+
githubURL = githubURL.replace("http:", "https:");
47+
}
48+
if(!githubURL.startsWith(githubPrefix)){
49+
return;
50+
}
51+
// strip any query string params if present
52+
let queryParamTrimIndex = githubURL.indexOf('?') >= 0 ? githubURL.indexOf('?') : githubURL.length;
53+
githubURL = githubURL.substring(0, queryParamTrimIndex);
54+
// trim everything after https://github.com/orgname/repo/... to https://github.com/orgname/repo
55+
let components = githubURL.replace("https://github.com/", '').split('/');
56+
// trim .git at the end of the name
57+
if(githubURL.endsWith(gitSuffix)){
58+
githubURL = githubURL.replace(new RegExp(gitSuffix + '$'), '');
59+
}
60+
if(components.length > 2){
61+
githubURL = `https://github.com/${components[0]}/${components[1]}`;
62+
}
63+
websiteURLInput.value = githubURL;
6164
}
62-
websiteURLInput.value = githubURL;
63-
}
6465

65-
function _validateGitHubURL() {
66-
_fixGitHubBrokenURL();
67-
let githubURL = websiteURLInput.value;
68-
if(_isValidGitHubURL(githubURL)){
69-
$(websiteURLInput).removeClass("error-border");
70-
return true;
66+
function _validateGitHubURL() {
67+
_fixGitHubBrokenURL();
68+
let githubURL = websiteURLInput.value;
69+
const $messageDisplay = $("#messageDisplay");
70+
if(_isValidGitHubURL(githubURL)){
71+
$(websiteURLInput).removeClass("error-border");
72+
$messageDisplay.html("");
73+
return true;
74+
}
75+
$(websiteURLInput).addClass("error-border");
76+
$messageDisplay.html(`<span><i class="fas fa-exclamation-triangle" style="color: #f89406"></i>&nbsp;&nbsp;${Strings.ERROR_ONLY_GITHUB}</span>`);
77+
return false;
7178
}
72-
$(websiteURLInput).addClass("error-border");
73-
return false;
74-
}
7579

76-
function _validateProjectLocation() {
77-
if(!window.showDirectoryPicker){
78-
// fs access apis not present, so we will give phoenix empty location to figure out a suitable location
80+
function _validateProjectLocation() {
81+
if(!window.showDirectoryPicker){
82+
// fs access apis not present, so we will give phoenix empty location to figure out a suitable location
83+
return true;
84+
}
85+
let location = locationInput.value;
86+
if( location === Strings.PLEASE_SELECT_A_FOLDER){
87+
$(locationInput).addClass("error-border");
88+
return false;
89+
}
90+
$(locationInput).removeClass("error-border");
7991
return true;
8092
}
81-
let location = locationInput.value;
82-
if( location === Strings.PLEASE_SELECT_A_FOLDER){
83-
$(locationInput).addClass("error-border");
84-
return false;
93+
94+
function _validate() {
95+
return _validateGitHubURL()
96+
&& _validateProjectLocation();
8597
}
86-
$(locationInput).removeClass("error-border");
87-
return true;
88-
}
8998

90-
function _validate() {
91-
return _validateGitHubURL()
92-
&& _validateProjectLocation();
93-
}
99+
function _selectFolder() {
100+
newProjectExtension.showFolderSelect()
101+
.then(file =>{
102+
locationInput.fullPath = file;
103+
locationInput.value = file.replace(newProjectExtension.getMountDir(), "");
104+
_validateProjectLocation();
105+
});
106+
}
94107

95-
function _selectFolder() {
96-
newProjectExtension.showFolderSelect()
97-
.then(file =>{
98-
locationInput.fullPath = file;
99-
locationInput.value = file.replace(newProjectExtension.getMountDir(), "");
100-
_validateProjectLocation();
101-
});
102-
}
108+
function _createProjectClicked() {
109+
if(_validate()){
110+
let githubURL = websiteURLInput.value;
111+
let components = githubURL.replace("https://github.com/", '').split('/');
112+
let zipURL = `https://phcode.site/getGitHubZip?org=${components[0]}&repo=${components[1]}`;
113+
let suggestedProjectName = `${components[0]}-${components[1]}`;
114+
newProjectExtension.downloadAndOpenProject(
115+
zipURL,
116+
locationInput.fullPath, suggestedProjectName, FLATTEN_ZIP_FIRST_LEVEL_DIR)
117+
.then(()=>{
118+
Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create.success");
119+
newProjectExtension.closeDialogue();
120+
});
121+
} else {
122+
newProjectExtension.showErrorDialogue(
123+
Strings.MISSING_FIELDS,
124+
Strings.PLEASE_FILL_ALL_REQUIRED);
125+
}
126+
Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create");
127+
}
103128

104-
function _createProjectClicked() {
105-
if(_validate()){
106-
let githubURL = websiteURLInput.value;
107-
let components = githubURL.replace("https://github.com/", '').split('/');
108-
let zipURL = `https://phcode.site/getGitHubZip?org=${components[0]}&repo=${components[1]}`;
109-
let suggestedProjectName = `${components[0]}-${components[1]}`;
110-
newProjectExtension.downloadAndOpenProject(
111-
zipURL,
112-
locationInput.fullPath, suggestedProjectName, FLATTEN_ZIP_FIRST_LEVEL_DIR)
113-
.then(()=>{
114-
Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create.success");
115-
newProjectExtension.closeDialogue();
116-
});
117-
} else {
118-
newProjectExtension.showErrorDialogue(
119-
Strings.MISSING_FIELDS,
120-
Strings.PLEASE_FILL_ALL_REQUIRED);
129+
function initGitProject() {
130+
if(!window.showDirectoryPicker){ // fs access apis not present
131+
$(document.getElementById("projectLocation")).addClass("forced-hidden");
132+
}
133+
createProjectBtn = document.getElementById("createProjectBtn");
134+
websiteURLInput = document.getElementById("websiteURLInput");
135+
locationInput = document.getElementById("locationInput");
136+
createProjectBtn.onclick = _createProjectClicked;
137+
$(websiteURLInput).keyup(_validate);
138+
locationInput.value = Strings.PLEASE_SELECT_A_FOLDER;
139+
locationInput.onclick = _selectFolder;
140+
_validate();
121141
}
122-
Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "github.Click", "create");
142+
window.initGitProject = initGitProject;
123143
}
124144

125-
function initGithubProject() {
126-
if(!window.showDirectoryPicker){ // fs access apis not present
127-
$(document.getElementById("projectLocation")).addClass("forced-hidden");
128-
}
129-
createProjectBtn = document.getElementById("createProjectBtn");
130-
websiteURLInput = document.getElementById("websiteURLInput");
131-
locationInput = document.getElementById("locationInput");
132-
createProjectBtn.onclick = _createProjectClicked;
133-
$(websiteURLInput).keyup(_validate);
134-
locationInput.value = Strings.PLEASE_SELECT_A_FOLDER;
135-
locationInput.onclick = _selectFolder;
136-
_validate();
145+
if(!window.top.Phoenix.isNativeApp){
146+
browserInit();
137147
}

‎src/assets/new-project/code-editor.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,8 @@ <h4 class="tab-title mb-0 localize">{{START_PROJECT}}</h4>
124124
</li>
125125
<li>
126126
<a id="newGitHubProject" href="#" class="tabable" tabindex="5">
127-
<img src="images/tab-img7.png" alt="image">
128-
<span class="localize">{{GITHUB_PROJECT}}</span>
127+
<img src="images/git.svg" alt="image">
128+
<span class="localize">{{GIT_PROJECT}}</span>
129129
</a>
130130
</li>
131131
<!-- <li>-->

‎src/assets/new-project/images/git.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/new-project/images/tab-img7.png‎

-1.17 KB
Binary file not shown.

‎src/assets/new-project/new-project-github.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@
1111
<link rel="stylesheet" href="../../thirdparty/fontawesome/css/all.min.css">
1212
<script src="assets/js/phoenix.js"></script>
1313
<script src="assets/js/new-github-project.js"></script>
14+
<style>
15+
#messageDisplay span {
16+
width: 100%;
17+
}
18+
</style>
1419
</head>
15-
<body id="top" onload="init(); initGithubProject();">
16-
<div class="code-editor-card">
20+
<body id="top" onload="init(); initGitProject();">
21+
<div class="code-editor-card d-flex flex-column">
1722
<div class="project-top d-flex align-items-center justify-content-between">
1823
<div class="editor-left d-flex align-items-center">
1924
<a href="code-editor.html" class="back-btn">
@@ -24,7 +29,7 @@
2429

2530
</a>
2631
<div class="project-title localize">
27-
{{NEW_PROJECT_FROM_GITHUB}}
32+
{{NEW_PROJECT_FROM_GIT}}
2833
</div>
2934
</div>
3035
<div class="editor-right">
@@ -42,16 +47,22 @@
4247

4348
<div class="website-main-content">
4449
<div class="website-detail d-flex align-items-center">
45-
<span class="localize">{{GITHUB_REPO_URL}}</span>
46-
<input id="websiteURLInput" class="" type="text" name="web-url" value="https://github.com/Metroxe/one-html-page-challenge"/>
47-
<button id="createProjectBtn" class="create-btn localize">{{CREATE_PROJECT}}</button>
50+
<span class="localize">{{GIT_REPO_URL}}</span>
51+
<input id="websiteURLInput" class="w-100" type="text" name="web-url" value="https://github.com/phcode-dev/HTML-Starter-Templates"/>
4852
</div>
4953
<div id="projectLocation" class="website-detail d-flex align-items-center">
5054
<span class="localize">{{LOCATION}}</span>
51-
<input id="locationInput" type="button" name="web-url" value="">
55+
<input id="locationInput" class="w-100" type="button" name="web-url" value="">
56+
</div>
57+
<div class="website-detail d-flex align-items-center">
58+
<span></span>
59+
<span id="messageDisplay" class="w-100"></span>
5260
</div>
5361

5462
</div>
63+
<div class="project-bottom d-flex flex-row-reverse">
64+
<button id="createProjectBtn" class="create-btn localize" style="width: 30%">{{CREATE_PROJECT}}</button>
65+
</div>
5566
</div>
5667

5768
<!-- Javascript -->

‎src/nls/root/strings.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1184,20 +1184,21 @@ define({
11841184
"CODE_EDITOR": "Code Editor",
11851185
"BUILD_THE_WEB": "Build the web",
11861186
"IMPORT_PROJECT": "Import Project",
1187-
"GITHUB_PROJECT": "GitHub Project",
1188-
"NEW_PROJECT_FROM_GITHUB": "New Project from GitHub",
1189-
"GITHUB_REPO_URL": "GitHub Repo URL :",
1187+
"GIT_PROJECT": "Get from Git",
1188+
"NEW_PROJECT_FROM_GIT": "New Project from Git",
1189+
"GIT_REPO_URL": "Git Repo URL :",
11901190
"START_PROJECT": "Start Project\u2026",
11911191
"DOWNLOAD_DESKTOP_APP": "Download Desktop App",
11921192
"GET_DESKTOP_APP": "Get Desktop App",
11931193
"CREATE_PROJECT": "Create Project",
11941194
"SETTING_UP_PROJECT": "Setting Up Project",
11951195
"LOCATION": "Location :",
1196+
"ERROR_ONLY_GITHUB": "The browser version of {APP_NAME} supports only GitHub URLs. To work with other Git URLs, please use the desktop app.",
11961197
"DOWNLOADING": "Downloading...",
11971198
"DOWNLOADING_FILE": "Downloading {0}...",
11981199
"EXTRACTING_FILES_PROGRESS": "Extracting {0} of {1} files.",
11991200
"COMPRESS_FILES_PROGRESS": "Compressing {0} of {1} files.",
1200-
"DOWNLOAD_FAILED_MESSAGE": "Make sure the download URL is a valid. </br>NB: As Phoenix is in alpha, Private Repos and GitHub URLs larger than 25 MB is not allowed.",
1201+
"DOWNLOAD_FAILED_MESSAGE": "Make sure the download URL is a valid. </br>NB: As Phoenix is free, Private Repos and GitHub URLs larger than 25 MB is not allowed.",
12011202
"PLEASE_SELECT_A_FOLDER": "Please select a folder...",
12021203
"UNZIP_IN_PROGRESS": "Unzipping files...",
12031204
"UNZIP_FAILED": "Error: Unzipping failed.",

0 commit comments

Comments
 (0)