Page MenuHomePhorge
Files F117878500

D982.1775341022.diff
No OneTemporary
Actions

Authored By
Unknown
Size
11 KB
Referenced Files
None
Subscribers
None

D982.1775341022.diff
View Options

diff --git a/src/package.json b/src/package.json
--- a/src/package.json
+++ b/src/package.json
@@ -17,6 +17,11 @@
"cross-env": "^5.1",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.1.1",
+ "@fortawesome/fontawesome-svg-core": "^1.2.27",
+ "@fortawesome/free-brands-svg-icons": "^5.12.1",
+ "@fortawesome/free-regular-svg-icons": "^5.12.1",
+ "@fortawesome/free-solid-svg-icons": "^5.12.1",
+ "@fortawesome/vue-fontawesome": "^0.1.9",
"jquery": "^3.4.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -12,8 +12,16 @@
import MenuComponent from '../vue/components/Menu'
import router from '../vue/js/routes.js'
import store from '../vue/js/store'
+import FontAwesomeIcon from './fontawesome.js'
import VueToastr from '@deveodk/vue-toastr'
+Vue.component('svg-icon', FontAwesomeIcon)
+
+Vue.use(VueToastr, {
+ defaultPosition: 'toast-bottom-right',
+ defaultTimeout: 5000
+})
+
// Add a response interceptor for general/validation error handler
// This have to be before Vue and Router setup. Otherwise we would
// not be able to handle axios responses initiated from inside
@@ -172,8 +180,3 @@
}
}
})
-
-Vue.use(VueToastr, {
- defaultPosition: 'toast-bottom-right',
- defaultTimeout: 5000
-})
diff --git a/src/resources/js/fontawesome.js b/src/resources/js/fontawesome.js
new file mode 100644
--- /dev/null
+++ b/src/resources/js/fontawesome.js
@@ -0,0 +1,27 @@
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+//import { } from '@fortawesome/free-regular-svg-icons'
+//import { } from '@fortawesome/free-brands-svg-icons'
+import {
+ faCheck,
+ faGlobe,
+ faSyncAlt,
+ faUser,
+ faUserCog,
+ faUsers,
+ faWallet
+} from '@fortawesome/free-solid-svg-icons'
+
+// Register only these icons we need
+library.add(
+ faCheck,
+ faGlobe,
+ faSyncAlt,
+ faUser,
+ faUserCog,
+ faUsers,
+ faWallet
+)
+
+export default FontAwesomeIcon
diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss
--- a/src/resources/sass/app.scss
+++ b/src/resources/sass/app.scss
@@ -102,3 +102,29 @@
}
}
}
+
+#dashboard-nav {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: 1rem;
+
+ & > a {
+ padding: 1rem;
+ text-align: center;
+ white-space: nowrap;
+ margin: 0 .5rem .5rem 0;
+ text-decoration: none;
+ min-width: 8rem;
+
+ &.disabled {
+ pointer-events: none;
+ opacity: .6;
+ }
+ }
+
+ svg {
+ width: 6rem;
+ height: 6rem;
+ }
+}
diff --git a/src/resources/vue/components/Dashboard.vue b/src/resources/vue/components/Dashboard.vue
--- a/src/resources/vue/components/Dashboard.vue
+++ b/src/resources/vue/components/Dashboard.vue
@@ -14,12 +14,21 @@
</div>
</div>
</div>
- <p id="dashboard-nav">
- <router-link class="link-profile" :to="{ name: 'profile' }">Your profile</router-link>
- <router-link class="link-domains" :to="{ name: 'domains' }">Domains</router-link>
- <router-link class="link-users" :to="{ name: 'users' }">User accounts</router-link>
- </p>
- <div v-if="!$root.isLoading" id="dashboard-box" class="card">
+ <div id="dashboard-nav">
+ <router-link class="card link-profile" :to="{ name: 'profile' }">
+ <svg-icon icon="user-cog"></svg-icon><span class="name">Your profile</span>
+ </router-link>
+ <router-link class="card link-domains" :to="{ name: 'domains' }">
+ <svg-icon icon="globe"></svg-icon><span class="name">Domains</span>
+ </router-link>
+ <router-link class="card link-users" :to="{ name: 'users' }">
+ <svg-icon icon="users"></svg-icon><span class="name">User accounts</span>
+ </router-link>
+ <router-link class="card link-wallet disabled" :to="{ name: 'users' }">
+ <svg-icon icon="wallet"></svg-icon><span class="name">Wallet</span>
+ </router-link>
+ </div>
+ <div v-if="false && !$root.isLoading" id="dashboard-box" class="card">
<div class="card-body">
<div class="card-title">Dashboard</div>
<div class="card-text">
diff --git a/src/resources/vue/components/Domain/Info.vue b/src/resources/vue/components/Domain/Info.vue
--- a/src/resources/vue/components/Domain/Info.vue
+++ b/src/resources/vue/components/Domain/Info.vue
@@ -15,7 +15,7 @@
<p>Here's a sample zone file for your domain:
<pre>{{ domain.dns.join("\n") }}</pre>
</p>
- <button class="btn btn-primary" type="button" @click="confirm">Verify</button>
+ <button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> Verify</button>
</div>
</div>
</div>
diff --git a/src/resources/vue/components/PasswordReset.vue b/src/resources/vue/components/PasswordReset.vue
--- a/src/resources/vue/components/PasswordReset.vue
+++ b/src/resources/vue/components/PasswordReset.vue
@@ -11,7 +11,7 @@
<label for="reset_email" class="sr-only">Email Address</label>
<input type="text" class="form-control" id="reset_email" placeholder="Email Address" required v-model="email">
</div>
- <button class="btn btn-primary" type="submit">Continue</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button>
</form>
</div>
</div>
@@ -29,7 +29,7 @@
<input type="text" class="form-control" id="reset_short_code" placeholder="Confirmation Code" required v-model="short_code">
</div>
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
- <button class="btn btn-primary" type="submit">Continue</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button>
<input type="hidden" id="reset_code" v-model="code" />
</form>
</div>
@@ -50,7 +50,7 @@
<input type="password" class="form-control" id="reset_confirm" placeholder="Confirm Password" required v-model="password_confirmation">
</div>
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
- <button class="btn btn-primary" type="submit">Submit</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
</form>
</div>
</div>
diff --git a/src/resources/vue/components/Signup.vue b/src/resources/vue/components/Signup.vue
--- a/src/resources/vue/components/Signup.vue
+++ b/src/resources/vue/components/Signup.vue
@@ -26,7 +26,7 @@
<input type="text" class="form-control" id="signup_email" placeholder="Existing Email Address" required v-model="email">
</div>
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
- <button class="btn btn-primary" type="submit">Continue</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button>
</form>
</div>
</div>
@@ -44,7 +44,7 @@
<input type="text" class="form-control" id="signup_short_code" placeholder="Confirmation Code" required v-model="short_code">
</div>
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
- <button class="btn btn-primary" type="submit">Continue</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button>
<input type="hidden" id="signup_code" v-model="code" />
</form>
</div>
@@ -77,7 +77,7 @@
<input type="password" class="form-control" id="signup_confirm" placeholder="Confirm Password" required v-model="password_confirmation">
</div>
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button>
- <button class="btn btn-primary" type="submit">Submit</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
</form>
</div>
</div>
diff --git a/src/resources/vue/components/User/Info.vue b/src/resources/vue/components/User/Info.vue
--- a/src/resources/vue/components/User/Info.vue
+++ b/src/resources/vue/components/User/Info.vue
@@ -42,7 +42,7 @@
<input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'">
</div>
</div>
- <button class="btn btn-primary" type="submit">Submit</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
</form>
</div>
</div>
diff --git a/src/resources/vue/components/User/List.vue b/src/resources/vue/components/User/List.vue
--- a/src/resources/vue/components/User/List.vue
+++ b/src/resources/vue/components/User/List.vue
@@ -4,7 +4,9 @@
<div class="card-body">
<div class="card-title">User Accounts</div>
<div class="card-text">
- <router-link class="btn btn-primary create-user" :to="{ path: 'user/new' }" tag="button">Create user</router-link>
+ <router-link class="btn btn-primary create-user" :to="{ path: 'user/new' }" tag="button">
+ <svg-icon icon="user"></svg-icon> Create user
+ </router-link>
<table class="table table-hover">
<thead class="thead-light">
<tr>
diff --git a/src/resources/vue/components/User/Profile.vue b/src/resources/vue/components/User/Profile.vue
--- a/src/resources/vue/components/User/Profile.vue
+++ b/src/resources/vue/components/User/Profile.vue
@@ -56,7 +56,7 @@
<input type="password" class="form-control" id="password_confirmation" v-model="profile.password_confirmation">
</div>
</div>
- <button class="btn btn-primary" type="submit">Submit</button>
+ <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
</form>
</div>
</div>
diff --git a/src/tests/Browser/Pages/Dashboard.php b/src/tests/Browser/Pages/Dashboard.php
--- a/src/tests/Browser/Pages/Dashboard.php
+++ b/src/tests/Browser/Pages/Dashboard.php
@@ -27,7 +27,7 @@
{
$browser->assertPathIs('/dashboard')
->waitUntilMissing('@app .app-loader')
- ->assertSee('Dashboard');
+ ->assertVisible('@links');
}
/**

File Metadata

Mime Type
text/plain
Expires
Sat, Apr 4, 10:17 PM (18 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
18831393
Default Alt Text
D982.1775341022.diff (11 KB)

Event Timeline