nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

login refactor

Browse Source
This commit is contained in:
Čarodej
2022-01-10 09:09:20 +01:00
parent ead4f65e1a
commit 0d8f1b64a7
7 changed files with 303 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
resources/js/components/Auth/AuthButton.vue
View File

@@ -1,21 +1,27 @@
<template>
<button class="button outline hover-text-theme hover-border-theme">
<span class="text-label">{{ text }}</span>
<span v-if="loading" class="icon">
<FontAwesomeIcon icon="sync-alt" class="sync-alt svg-color-theme"/>
</span>
<span v-if="! loading && icon" class="icon">
<FontAwesomeIcon :icon="icon" class="svg-color-theme"/>
<button class="group flex items-center border-2 border-black rounded-lg inline-block mx-auto px-7 py-2.5 whitespace-nowrap">
<span class="font-extrabold text-lg pr-1">
{{ text }}
</span>
<refresh-cw-icon v-if="loading" size="20" class="vue-feather text-theme -mr-1 sync-alt"/>
<chevron-right-icon v-if="! loading && icon" size="20" class="vue-feather text-theme -mr-1"/>
</button>
</template>
<script>
import { ChevronRightIcon, RefreshCwIcon } from 'vue-feather-icons'
export default {
name: 'AuthContent',
props: ['loading', 'icon', 'text'],
props: [
'loading',
'icon',
'text'
],
components: {
ChevronRightIcon,
RefreshCwIcon,
},
data() {
return {
isVisible: false,
@@ -28,79 +34,6 @@
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.button {
cursor: pointer;
border-radius: 8px;
text-decoration: none;
padding: 12px 32px;
display: inline-block;
margin-left: 15px;
margin-right: 15px;
white-space: nowrap;
@include transition(150ms);
background: transparent;
.text-label {
@include transition(150ms);
@include font-size(17);
font-weight: 800;
line-height: 0;
}
.icon {
margin-left: 12px;
@include font-size(16);
}
&.solid {
background: $theme;
border: 2px solid $theme;
.text-label {
color: white;
}
}
&.outline {
border: 2px solid $text;
.text-label {
color: $text;
}
.icon {
path {
fill: inherit;
}
}
&:hover {
border-color: inherit;
.text-label {
color: inherit;
}
}
}
}
.dark {
.button {
&.outline {
background: $dark_mode_background;
border-color: $dark_mode_text_primary;
.text-label {
color: $dark_mode_text_primary;
}
}
}
}
.sync-alt {
animation: spin 1s linear infinite;

4
resources/js/components/Auth/SocialiteAuthenticationButtons.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="wrapper flex flex-row w-1/2 ml-2">
<div class="w-1/3 grid justify-items-center items-center cursor-pointer">
<facebook-icon @click="socialiteRedirect('facebook')" />
<facebook-icon @click="socialiteRedirect('facebook')" />
</div>
<div class="w-1/3 grid justify-items-center items-center cursor-pointer">
@@ -9,7 +9,7 @@
</div>
<div class="w-1/3 grid justify-items-center items-center cursor-pointer">
<h1 @click="socialiteRedirect('google')">G</h1>
<span @click="socialiteRedirect('google')" class="font-semibold text-3xl">G</span>
</div>
</div>
</template>