f3c7413f52
- Move most GUI related code to /presentation - Move components to /components (separate from bootstrap and style) - Move shared components helpers to /components/shared - Rename Bootstrapping to bootstrapping to enforce same naming convention in /presentation
117 lines
4.5 KiB
Vue
117 lines
4.5 KiB
Vue
<template>
|
|
<div class="instructions">
|
|
<p>
|
|
Since you're using online version of {{ this.appName }}, you will need to do additional steps after downloading the file to execute your script on macOS:
|
|
</p>
|
|
<p>
|
|
<ol>
|
|
<li>
|
|
<span>Download the file</span>
|
|
<font-awesome-icon
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="'You should be prompted to save the script file now, otherwise try to download it again'"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<span>Open terminal</span>
|
|
<font-awesome-icon
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="'Type Terminal into Spotlight or open from the Applications -> Utilities folder'"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<span>Navigate to the folder where you downloaded the file e.g.:</span>
|
|
<div>
|
|
<Code>cd ~/Downloads</Code>
|
|
<font-awesome-icon
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="
|
|
'Press on Enter/Return key after running the command.<br/>' +
|
|
'If the file is not downloaded on Downloads folder, change `Downloads` to path where the file is downloaded.<br/>' +
|
|
'• `cd` will change the current folder.<br/>' +
|
|
'• `~` is the user home directory.'"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>Give the file execute permissions:</span>
|
|
<div>
|
|
<Code>chmod +x {{ this.fileName }}</Code>
|
|
<font-awesome-icon
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="
|
|
'Press on Enter/Return key after running the command.<br/>' +
|
|
'It will make the file executable.'"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>Execute the file:</span>
|
|
<div>
|
|
<Code>./{{ this.fileName }}</Code>
|
|
<font-awesome-icon
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="'Alternatively you can double click on the file'"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span>If asked, enter your administrator password</span>
|
|
<font-awesome-icon
|
|
class="explanation"
|
|
:icon="['fas', 'info-circle']"
|
|
v-tooltip.top-center="
|
|
'Press on Enter/Return key after typing your password<br/>' +
|
|
'Your password will not be shown by default.<br/>' +
|
|
'Administor privileges are required to configure OS.'"
|
|
/>
|
|
</li>
|
|
</ol>
|
|
</p>
|
|
<p>
|
|
Or download the <a :href="this.macOsDownloadUrl">offline version</a> to run your scripts directly to skip these steps.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
import Code from './Code.vue';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { ApplicationFactory } from '@/application/ApplicationFactory';
|
|
|
|
@Component({
|
|
components: {
|
|
Code,
|
|
},
|
|
})
|
|
export default class MacOsInstructions extends Vue {
|
|
@Prop() public fileName: string;
|
|
public appName = '';
|
|
public macOsDownloadUrl = '';
|
|
|
|
public async created() {
|
|
const app = await ApplicationFactory.Current.getAppAsync();
|
|
this.appName = app.info.name;
|
|
this.macOsDownloadUrl = app.info.getDownloadUrl(OperatingSystem.macOS);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/colors.scss";
|
|
@import "@/presentation/styles/fonts.scss";
|
|
|
|
li {
|
|
margin: 10px 0;
|
|
}
|
|
.explanation {
|
|
margin-left: 0.5em;
|
|
}
|
|
</style>
|