Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add possibility to write the filename per editor #52

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: add possibility to write the filename per editor #52

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c092275
feat: add possibility to write the filename per editor
dimaslz Nov 23, 2021
8c8193c
chore(page): init filename on first load
dimaslz Nov 24, 2021
f588087
chore: update filename event on Editor
dimaslz Nov 25, 2021
136bb50
fix: allow use filename when there are more then one file
dimaslz Jan 1, 2022
22a14cf
Merge branch 'master' into pr/52
stevebauman Jan 20, 2022
2c22446
Formatting
stevebauman Jan 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions components/Editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,23 @@
</div>
</div>

<div v-if="allowFilename" class="flex items-center justify-between bg-ui-gray-700">
<div class="flex items-center gap-2 m-2 mt-0 rounded-lg bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus w-full">
<label
class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase text-ui-gray-500 xl:inline-block whitespace-nowrap"
>
Filename
</label>
<input
type="text"
:value="filename"
class="text-xs font-medium text-ui-gray-400 bg-ui-gray-800 border-0 rounded-lg cursor-pointer hover:bg-ui-gray-900 focus:bg-ui-gray-900 focus:outline-none focus:ring-0 w-full"
@input="(event) => $emit('update:filename', event.target.value)"
placeholder="filename"
/>
</div>
</div>

<div ref="monaco" class="w-full h-full"></div>
</div>
</template>
Expand Down Expand Up @@ -137,6 +154,8 @@ export default {
theme: String,
size: Number,
tabSize: [String, Number],
filename: String,
allowFilename: Boolean,
language: String,
options: Object,
landscape: Boolean,
Expand Down
9 changes: 9 additions & 0 deletions components/Page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
:size="sizes[0]"
:tab-size="editor.tabSize"
:language="editor.language"
:filename="editor.filename"
:allow-filename="editors.length > 1"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of a separate prop for allow-filename, can we use a ternary condition to simply pass in null in the filename prop? For example:

<Editor
  :filename="editors.length > 1 ? editor.filename : null"
/>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I remember why. If I do not use allow-filename, I don't know when I can allow writing the filename or not. For example, inside Editor.vue in the v-if="allowFilename", we need to know how much Editors are using to allow set the filename or not. With this :filename="editors.length > 1 ? editor.filename : null", the filename always is allowed to set but, when just exists one Editor, the filename field is visible, but not visible in the render. Do you know what I mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I can do something like canSetFilename

:landscape="isLandscape"
:can-move-up="index !== 0"
:can-move-down="index !== editors.length - 1"
Expand All @@ -37,13 +39,15 @@
@update:layout="toggleLayout"
@update:tab-size="(size) => (editors[index].tabSize = size)"
@update:language="(lang) => (editors[index].language = lang)"
@update:filename="(filename) => (editors[index].filename = filename)"
/>
</div>

<Preview
dusk="preview"
ref="preview"
:tab="tab"
:filenames="filenames"
:code="code"
:languages="languages"
class="flex flex-col justify-between w-full h-full overflow-auto"
Expand Down Expand Up @@ -149,6 +153,10 @@ export default {
}));
},

filenames() {
return this.editors.map(({ filename }) => filename);
},

canRemoveEditor() {
return this.editors.length > 1;
},
Expand Down Expand Up @@ -238,6 +246,7 @@ export default {
id: uuid(),
tabSize: 4,
language: language,
filename: '',
value: language === 'php' ? '<?php\n\n' : '',
};
},
Expand Down
2 changes: 2 additions & 0 deletions components/Preview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
ref="window"
class="z-10"
:blocks="blocks"
:filenames="filenames"
:settings="settings"
@update:title="(title) => (settings.title = title)"
/>
Expand Down Expand Up @@ -378,6 +379,7 @@ const DEFAULT_WIDTH = 450;

export default {
props: {
filenames: Array,
tab: Object,
code: Array,
languages: Array,
Expand Down
11 changes: 6 additions & 5 deletions components/Window.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@
</div>
</div>

<div
v-for="(lines, index) in blocks"
:key="index"
:style="{ padding: `${settings.padding}px` }"
>
<div v-for="(lines, index) in blocks" :key="index" :style="{ padding: `${settings.padding}px` }">
<div
v-if="filenames.length > 1"
class="text-sm mb-2 text-gray-400 w-full text-right"
>{{ filenames[index] }}</div>
Copy link
Owner

@stevebauman stevebauman Jan 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add an additional clause here to the if statement so the <div> isn't rendered if the filename is empty? Ex:

<div
  v-if="filenames.length > 1 && filenames[index]"
>

Once these two changes are made I'll merge this in 👍

Thanks for your time and work! ❤️

<Code
class="relative"
:lines="lines"
Expand All @@ -63,6 +63,7 @@ export default {
props: {
blocks: Array,
settings: Object,
filenames: Array
},

components: { Code, FauxMenu },
Expand Down