Skip to content

Commit

Permalink
Modify screen design
Browse files Browse the repository at this point in the history
- Add dark mode
- Replace the bootstrap with
  • Loading branch information
HusseinDossoki committed Feb 9, 2023
1 parent 0f7615a commit c7ddd01
Show file tree
Hide file tree
Showing 32 changed files with 1,975 additions and 207 deletions.
1,531 changes: 1,518 additions & 13 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,17 @@
},
"dependencies": {
"@tauri-apps/api": "^1.1.0",
"@vueuse/core": "^9.12.0",
"flowbite": "^1.6.3",
"pinia": "^2.0.28",
"vue": "^3.2.37"
},
"devDependencies": {
"@tauri-apps/cli": "^1.1.0",
"@vitejs/plugin-vue": "^3.0.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4",
"vite": "^3.0.2"
}
}
6 changes: 6 additions & 0 deletions postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
4 changes: 2 additions & 2 deletions src-tauri/tauri.conf.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@
"fullscreen": false,
"title": "Git Mirror!",
"resizable": false,
"width": 600,
"minWidth": 600,
"width": 700,
"minWidth": 700,
"height": 800,
"minHeight": 800,
"alwaysOnTop": false
Expand Down
48 changes: 42 additions & 6 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,39 @@
<template>
<div class="p-3">
<section v-if="selectedOption">
<a href="javascript:void(0)" @click="goToHome()">Home > {{ selectedOption?.title }}</a>
</section>
<div class="p-3 body-container">

<!-- Breadcrumb -->
<nav
v-if="selectedOption"
class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="javascript:void(0)" @click="goToHome()"
class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
<svg aria-hidden="true" class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
</path>
</svg>
Home
</a>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg aria-hidden="true" class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">{{
selectedOption?.title
}}</span>
</div>
</li>
</ol>
</nav>

<Home v-if="!selectedOption" @onOptionChanges="(val) => selectedOption = val" />

Expand All @@ -28,12 +59,17 @@ const selectedOption = ref(null);
const azureToAzureStore = useAzureToAzureStore();
function goToHome() {
if(azureToAzureStore.stillInrogress) return;
if (azureToAzureStore.stillInrogress) return;
selectedOption.value = null;
azureToAzureStore.$reset();
}
</script>

<style scoped>
.body-container {
margin-bottom: 70px !important;
}
.breadcrumb-item a {
text-decoration: none;
}
</style>
Binary file modified src/assets/azure.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 0 additions & 7 deletions src/assets/bootstrap.min.css

This file was deleted.

6 changes: 6 additions & 0 deletions src/assets/fontawesome-free-6.2.1-web/css/all.min.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/assets/fontawesome-free-6.2.1-web/css/brands.min.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/assets/fontawesome-free-6.2.1-web/css/fontawesome.min.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/assets/fontawesome-free-6.2.1-web/css/regular.min.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
6 changes: 6 additions & 0 deletions src/assets/fontawesome-free-6.2.1-web/css/solid.min.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file removed src/assets/github-to-azure.jpg
Binary file not shown.
Binary file added src/assets/github-to-azure.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/tailwind.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
90 changes: 72 additions & 18 deletions src/components/AppFooter.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,81 @@
<template>
<footer class="d-flex">
<div>
Developed by <strong>
<a target="_blank" href="https://www.linkedin.com/in/husseindossoki/">Hussein Dossoki</a>
</strong> ©2022
</div>
</footer>


<footer
class="flex fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2022 <a target="_blank"
href="https://www.linkedin.com/in/husseindossoki/" class="hover:underline">Hussein Dossoki</a>. All
Rights
Reserved.
</span>

<div class="ml-auto">
<input type="checkbox" class="checkbox" id="theme-checkbox" @change="toggleDark(); checkBackground()">
<label for="theme-checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</div>

</footer>

</template>

<script setup>
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();
const toggleDark = useToggle(isDark);
function checkBackground() {
console.log(document.documentElement.classList.contains('dark'));
if (!document.documentElement.classList.contains('dark')) {
document.body.style.backgroundColor = '#1F2937'; // OR #1F2937, #0d1117
} else {
document.body.style.backgroundColor = '#fff';
}
}
</script>

<style scoped>
footer {
height: 25px;
bottom: 0;
width: 100%;
background-color: #2d2d2d;
position: fixed;
color: rgba(238, 238, 238, 0.646);
font-size: 11px;
line-height: 21px;
padding-left: 15px;
padding-right: 15px;
.checkbox {
opacity: 0;
position: absolute;
}
.checkbox-label {
background-color: #111;
width: 50px;
height: 26px;
border-radius: 50px;
position: relative;
padding: 5px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.fa-moon {
color: #f1c40f;
}
.fa-sun {
color: #f39c12;
}
.checkbox-label .ball {
background-color: #fff;
width: 22px;
height: 22px;
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}
.checkbox:checked+.checkbox-label .ball {
transform: translateX(24px);
}
</style>
120 changes: 91 additions & 29 deletions src/components/AzureToAzure/AzureToAzure.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,88 @@
<template>
<StepOne v-if="azureToAzureStore.currentStep == 1" />
<StepTwo v-if="azureToAzureStore.currentStep == 2" />
<StepThree v-if="azureToAzureStore.currentStep == 3" />

<div class="alert alert-danger mt-3" v-if="azureToAzureStore.errors.length > 0">
<ul class="my-0">
<li v-for="err in azureToAzureStore.errors">{{ err }}</li>
</ul>
</div>

<div class="row mt-4">
<div class="text-center col-12">
<button class="btn btn-secondary mx-3"
v-if="azureToAzureStore.currentStep == 2 || azureToAzureStore.currentStep == 3"
@click="azureToAzureStore.prev()"
:disabled="azureToAzureStore.stillInrogress">Previous</button>
<button class="btn btn-primary mx-3"
v-if="azureToAzureStore.currentStep == 1 || azureToAzureStore.currentStep == 2"
@click="azureToAzureStore.next()" :disabled="!azureToAzureStore.isCurrentStepValid">next
<span v-if="azureToAzureStore.currentStep == 2">
({{ azureToAzureStore?.selectedProjectsCount }} projects)</span>
</button>
<button class="btn btn-success mx-3" v-if="azureToAzureStore.currentStep == 3"
@click="azureToAzureStore.submit()"
:disabled="azureToAzureStore.stillInrogress">Submit</button>
</div>
</div>
<Spinner :msg="'loading...'" :show="azureToAzureStore.loading" />


<ol
class="mb-5 mt-5 flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base">
<li
class="flex md:w-full items-center text-blue-600 dark:text-blue-500 sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700">
<span
class="flex items-center after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500">
<svg aria-hidden="true" class="w-4 h-4 mr-2 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"></path>
</svg>
<span style="width: max-content;">Git Credential</span>
</span>
</li>
<li
class="flex md:w-full items-center after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700">
<span
class="flex items-center after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500">
<span class="mr-2">2</span>
Projects
</span>
</li>
<li class="flex items-center">
<span class="mr-2">3</span>
Submit
</li>
</ol>


<StepOne v-if="azureToAzureStore.currentStep == 1" />
<StepTwo v-if="azureToAzureStore.currentStep == 2" />
<StepThree v-if="azureToAzureStore.currentStep == 3" />

<div class="alert alert-danger mt-3" v-if="azureToAzureStore.errors.length > 0">
<ul class="my-0">
<li v-for="err in azureToAzureStore.errors">{{ err }}</li>
</ul>
</div>

<div class="text-center mt-3">
<button type="button" v-if="azureToAzureStore.currentStep == 2 || azureToAzureStore.currentStep == 3"
@click="azureToAzureStore.prev()" :disabled="azureToAzureStore.stillInrogress"
:class="{ 'bg-blue-400 dark:bg-blue-500 cursor-not-allowed': azureToAzureStore.stillInrogress, 'hover:bg-blue-800': !azureToAzureStore.stillInrogress }"
class="mx-3 text-white bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Previous
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-128 128z"/></svg>
</button>

<button type="button" v-if="azureToAzureStore.currentStep == 1 || azureToAzureStore.currentStep == 2"
@click="azureToAzureStore.next()" :disabled="!azureToAzureStore.isCurrentStepValid"
:class="{ 'bg-blue-400 dark:bg-blue-500 cursor-not-allowed': !azureToAzureStore.isCurrentStepValid, 'hover:bg-blue-800': azureToAzureStore.isCurrentStepValid }"
class="mx-3 text-white bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Next <span v-if="azureToAzureStore.currentStep == 2">
({{ azureToAzureStore?.selectedProjectsCount }} projects)</span>
<svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>

<div class="row mt-4">
<div class="text-center col-12">

<button class="btn btn-secondary mx-3"
v-if="azureToAzureStore.currentStep == 2 || azureToAzureStore.currentStep == 3"
@click="azureToAzureStore.prev()" :disabled="azureToAzureStore.stillInrogress">Previous</button>
<button class="btn btn-primary mx-3"
v-if="azureToAzureStore.currentStep == 1 || azureToAzureStore.currentStep == 2"
@click="azureToAzureStore.next()" :disabled="!azureToAzureStore.isCurrentStepValid">next
<span v-if="azureToAzureStore.currentStep == 2">
({{ azureToAzureStore?.selectedProjectsCount }} projects)</span>
</button>
<button class="btn btn-success mx-3" v-if="azureToAzureStore.currentStep == 3" @click="azureToAzureStore.submit()"
:disabled="azureToAzureStore.stillInrogress">Submit</button>
</div>
</div>

<Spinner :msg="'loading...'" :show="azureToAzureStore.loading" />
</template>

<script setup>
Expand All @@ -38,4 +94,10 @@ import { useAzureToAzureStore } from "../../stores/AzureToAzureStore";
const azureToAzureStore = useAzureToAzureStore();
</script>
</script>

<style scoped>
ol li {
width: 33.3% !important;
}
</style>
Loading

0 comments on commit c7ddd01

Please sign in to comment.