Working on demo page

smwbtech · Aug 31, 2019 · 0fb9b9f · 0fb9b9f
1 parent e0fdff6
commit 0fb9b9f
Show file tree

Hide file tree

Showing 10 changed files with 449 additions and 71 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,66 +5,29 @@
 		<!-- content section -->
 		<AppContent />
 		<!-- footer -->
+		<AppFooter />
 
-		<footer></footer>
-
-		<!-- footer end -->
+		<FlashMessage :position="currentPosition"></FlashMessage>
 	</div>
 </template>
 
 <script>
-import AppHeader from '@/demo/AppHeader.vue';
-import AppContent from '@/demo/AppContent.vue';
+import AppHeader from '@/demo/components/AppHeader.vue';
+import AppContent from '@/demo/components/AppContent.vue';
+import AppFooter from '@/demo/components/AppFooter.vue';
+
 export default {
 	name: 'app',
 
 	components: {
 		AppHeader,
-		AppContent
-	},
-
-	data() {
-		return {
-			text:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum, ligula ac accumsan lobortis, nulla ante pharetra magna, sed sagittis dui metus sit amet lorem. ',
-			callbackText: '',
-			customMessageIcon: `${require('@/assets/img/poop.svg')}`,
-			succesIcon: `${require('@/assets/img/success.svg')}`,
-			warningIcon: `${require('@/assets/img/light-bulb.svg')}`,
-			errorIcon: `${require('@/assets/img/warning.svg')}`,
-			infoIcon: `${require('@/assets/img/information.svg')}`,
-			doveIcon: `${require('@/assets/img/dove.svg')}`,
-			sounds: {
-				message: `${require('@/assets/sounds/message.mp3')}`,
-				delete: `${require('@/assets/sounds/delete.mp3')}`
-			},
-			userData: {
-				position: 'right bottom',
-				strategy: 'single',
-				title: '',
-				message: '',
-				icon: '',
-				time: 8000
-			}
-		};
+		AppContent,
+		AppFooter
 	},
 
-	methods: {
-		showText() {
-			let sound = new Audio(this.sounds.message);
-			sound.play();
-			this.callbackText = 'Hello from callback! FlashMessage is appear';
-		},
-		clearText() {
-			let sound = new Audio(this.sounds.delete);
-			sound.play();
-			this.callbackText =
-				'My time has passed! I will disappear in 3 second...';
-			setTimeout(() => (this.callbackText = ''), 3000);
-		},
-		showUserMessage() {
-			let { title, message, icon, time } = this.userData;
-			this.flashMessage.show({ title, message, icon, time });
+	computed: {
+		currentPosition() {
+			return this.$store.getters['flashMessage/currentPosition'];
 		}
 	}
 };

diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
@@ -3,6 +3,7 @@
 	/* app colors */
 	--app-grey: #222831;
 	--app-blue: #0092ca;
+	--app-light-grey: #eee;
 	/* preset colors */
 	--dark-green: #01947a;
 	--dark-green-rgb: 1, 148, 122;

diff --git a/src/demo/AppContent.vue → src/demo/components/AppContent.vue b/src/demo/AppContent.vue → src/demo/components/AppContent.vue
@@ -1,33 +1,55 @@
 <template lang="html">
 	<section class="content">
-		<div class="message">
-			<picture class="message-avatar">
-				<source srcset="avatar.jpg" media="(max-width: 768px)" />
-				<source srcset="avatar@2x.jpg" />
-				<img srcset="avatar@2x.jpg" alt="Roman Privalov avatar" />
-			</picture>
-			<div class="message-text">
-				<h3 class="message-text__title">Hi there!</h3>
-				<p>
-					Glad to see you on this page! Please if you like this
-					project, leave me a
-					<a href="https://github.com/smwbtech/vue-flash-message"
-						>star on github</a
-					>. For any suggestions, bug reports and questions use
-					<a
-						href="https://github.com/smwbtech/vue-flash-message/issues"
-						>github issues</a
-					>.
-				</p>
+		<transition name="message-appear" mode="out-in">
+			<div class="message" v-show="showMessage">
+				<picture class="message-avatar">
+					<source srcset="avatar.jpg" media="(max-width: 768px)" />
+					<source srcset="avatar@2x.jpg" />
+					<img srcset="avatar@2x.jpg" alt="Roman Privalov avatar" />
+				</picture>
+				<div class="message-text">
+					<h3 class="message-text__title">Hi there!</h3>
+					<p>
+						Glad to see you on this page! Please if you like this
+						project, leave me a
+						<a href="https://github.com/smwbtech/vue-flash-message"
+							>star on github</a
+						>. For any suggestions, bug reports and questions use
+						<a
+							href="https://github.com/smwbtech/vue-flash-message/issues"
+							>github issues</a
+						>.
+					</p>
+				</div>
 			</div>
-		</div>
-
-		<button class="fm-btn" type="button" name="button">push me</button>
+		</transition>
+		<!-- Remove? -->
+		<!-- <transition name="btn-apper" mode="out-in">
+			<button
+				class="fm-btn"
+				type="button"
+				name="button"
+				v-show="showMessage"
+			>
+				push me
+			</button>
+		</transition> -->
 	</section>
 </template>
 
 <script>
-export default {};
+export default {
+	data() {
+		return {
+			showMessage: false
+		};
+	},
+
+	// Show message with appear transition
+	mounted() {
+		setTimeout(() => (this.showMessage = true), 500);
+	}
+};
 </script>
 
 <style lang="css" scoped>
@@ -118,4 +140,38 @@ export default {};
         cursor: pointer;
     }
 }
+
+/* transition */
+
+.message-appear-enter,
+.message-appear-leave-to {
+	opacity: 0;
+	transform: translateY(-30px);
+	transform-origin: center;
+
+	&.message:after {
+		transform: scale(0);
+		transform-origin: center;
+	}
+}
+
+.message-appear-enter-active,
+.message-appear-leave-active {
+	transition: opacity .6s ease-in, transform .6s ease-out;
+
+	&.message:after {
+		transition: transform .6s ease-out;
+	}
+}
+
+.btn-apper-enter,
+.btn-apper-leave-to {
+	opacity: 0;
+	transform: translateY(30px);
+}
+
+.btn-apper-enter-active,
+.btn-apper-leave-active {
+	transition: opacity .3s ease-in .5s, transform .3s ease-out .5s;
+}
 </style>
diff --git a/src/demo/components/AppFooter.vue b/src/demo/components/AppFooter.vue
@@ -0,0 +1,126 @@
+<template lang="html">
+	<footer>
+		<transition name="menu-appear" mode="out-in">
+			<div
+				v-show="isLoaded"
+				:class="['menu', isActive ? 'menu_active' : 'menu_inactive']"
+			>
+				<button
+					:class="[
+						'menu-toggle-btn',
+						isActive
+							? 'menu-toggle-btn_active'
+							: 'menu-toggle-btn_inactive'
+					]"
+					@click="toggleButtonHandler"
+				/>
+				<AppFooterPresets :isActive="isActive" />
+			</div>
+		</transition>
+	</footer>
+</template>
+
+<script>
+import AppFooterPresets from './AppFooterPresets.vue';
+
+export default {
+	components: {
+		AppFooterPresets
+	},
+
+	data() {
+		return {
+			isActive: false,
+			isLoaded: false
+		};
+	},
+
+	mounted() {
+		setTimeout(() => (this.isLoaded = true), 500);
+	},
+
+	methods: {
+		toggleButtonHandler() {
+			this.isActive = !this.isActive;
+			this.isClicked = true;
+		}
+	}
+};
+</script>
+
+<style lang="css" scoped>
+
+/* menu block */
+.menu {
+    position: fixed;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 60vh;
+    background-color: var(--app-grey);
+    transition: bottom .4s ease-out;
+    padding-left: calc(var(--side-padding) + var(--column) + var(--gutter));
+    padding-right: calc(var(--side-padding) + var(--column) + var(--gutter));
+
+    /* menu toggle btn */
+    & .menu-toggle-btn {
+        position: absolute;
+        top: -30px;
+        left: calc(50% - 30px);
+        width: 60px;
+        height: 60px;
+        margin: 0;
+        padding: 0;
+        background-color: var(--app-light-grey);
+        border: 3px solid var(--app-grey);
+        border-radius: 60px;
+        overflow: hidden;
+        cursor: pointer;
+
+        &:before {
+            content: "";
+            display: block;
+            width: 50px;
+            height: 50px;
+            margin-top: 5px;
+            margin: 0 auto;
+            background-image: url('/arrow.svg');
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: 80%;
+            transition: transform .4s ease-in;
+        }
+
+    } /* menu toggle btn end*/
+
+    &.menu_inactive {
+        bottom: -50vh;
+        & .menu-toggle-btn {
+            &:before {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    &.menu_active {
+        bottom: 0%;
+        & .menu-toggle-btn {
+            &:before {
+                transform: rotate(0deg);
+            }
+        }
+    }
+} /* menu block end*/
+
+/* Transition */
+
+.menu-appear-enter,
+.menu-appear-leave-to {
+    transform: translateY(calc(20vh));
+}
+
+.menu-appear-enter-active,
+.menu-appear-leave-active {
+    transition: transform .6s ease-in .6s;
+}
+</style>