Skip to content

Commit

Permalink
Merge pull request #2999 from threefoldtech/development_alltitle_cons…
Browse files Browse the repository at this point in the history
…istent

Make title card at all pages to be consistent
  • Loading branch information
ehab-hassan authored Jun 24, 2024
2 parents 08a275d + 7fa8d99 commit 333c66a
Show file tree
Hide file tree
Showing 15 changed files with 146 additions and 151 deletions.
8 changes: 4 additions & 4 deletions packages/playground/src/calculator/pricing_calculator.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<ViewLayout>
<VCard>
<VCardTitle class="bg-primary text-center">
<VIcon icon="mdi-calculator" />
Pricing Calculator
</VCardTitle>
<v-card color="primary" class="d-flex justify-center items-center pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-currency-usd</v-icon>
<v-card-title class="pa-0">Pricing Calculator</v-card-title>
</v-card>
<VCardText>
<VContainer fluid>
<VAlert type="info" class="mb-10">
Expand Down
25 changes: 2 additions & 23 deletions packages/playground/src/components/view_layout.vue
Original file line number Diff line number Diff line change
@@ -1,29 +1,10 @@
<template>
<div
class="border px-4 pb-4 rounded position-relative mt-10"
:class="{ 'pt-10': hasInfo, 'pt-6': !hasInfo }"
ref="viewLayoutContainer"
>
<div class="border px-4 pb-4 rounded position-relative pt-3 mt-1" ref="viewLayoutContainer">
<div
class="mb-6"
:style="{ opacity: $vuetify.theme.name === 'dark' ? 'var(--v-medium-emphasis-opacity)' : '' }"
v-if="$slots.description"
/>

<div
class="position-absolute pa-1 rounded-circle border"
:style="{
top: 0,
right: '16px',
transform: 'translateY(-50%)',
zIndex: 99,
backgroundColor: 'rgb(var(--v-theme-background))',
}"
v-if="hasInfo"
>
<AppInfo />
</div>

<template v-if="requireSSH && !ssh">
<VAlert variant="tonal" type="error" :text="title + ' requires public ssh key.'" class="mb-4" />
<SshkeyView />
Expand All @@ -43,11 +24,9 @@ import { useRoute } from "vue-router";
import { useProfileManager } from "@/stores";
import SshkeyView from "@/views/sshkey_view.vue";
import AppInfo from "./app_info.vue";
export default {
name: "ViewLayout",
components: { AppInfo, SshkeyView },
components: { SshkeyView },
setup() {
const route = useRoute();
const profileManager = useProfileManager();
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/dashboard/bridge_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="border px-4 pb-4 rounded position-relative mt-2">
<div class="border px-4 pb-4 rounded position-relative">
<v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-swap-horizontal</v-icon>
<v-card-title class="pa-0">Transfer TFT Across Chains</v-card-title>
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/dashboard/dao_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="border px-4 pb-4 rounded position-relative mt-2">
<div class="border px-4 pb-4 rounded position-relative">
<v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-note-check-outline</v-icon>
<v-card-title class="pa-0">DAO</v-card-title>
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/dashboard/simulator_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="border px-4 pb-4 rounded position-relative mt-2">
<div class="border px-4 pb-4 rounded position-relative">
<v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-chart-line</v-icon>
<v-card-title class="pa-0">Farming Calculator</v-card-title>
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/dashboard/transfer_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="border px-4 pb-4 rounded position-relative mt-2">
<div class="border px-4 pb-4 rounded position-relative">
<v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-account-arrow-right-outline</v-icon>
<v-card-title class="pa-0">Transfer TFTs on the TFChain</v-card-title>
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/src/dashboard/twin_view.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
</v-card-actions>
</v-card>
</v-dialog>
<div class="border px-4 pb-4 rounded position-relative mt-2">
<div class="border px-4 pb-4 rounded position-relative">
<v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-account-supervisor-outline</v-icon>
<v-card-title class="pa-0">Twin Details</v-card-title>
Expand Down
4 changes: 4 additions & 0 deletions packages/playground/src/views/farms.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<view-layout>
<v-card color="primary" class="d-flex justify-center items-center pa-3 mb-3 text-center">
<v-icon size="30" class="pr-3">mdi-lan-connect</v-icon>
<v-card-title class="pa-0">Farm Finder</v-card-title>
</v-card>
<TfFiltersLayout>
<template #filters>
<TfFiltersContainer @apply="loadFarms(true)" class="mb-4" :loading="loading">
Expand Down
9 changes: 5 additions & 4 deletions packages/playground/src/views/minting_view.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<template>
<view-layout>
<h2 class="mb-4 text-capitalize">Grid Minting Explorer</h2>
<v-alert variant="tonal" type="warning" class="mb-4 pa-2">
<p>All data subject to change</p>
</v-alert>
<v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
<v-card-title class="pa-0">TF Minting Reports</v-card-title>
</v-card>
<v-alert variant="tonal" type="warning" class="mb-4"> All data subject to change </v-alert>
<v-form class="d-inline-flex w-100">
<FormValidator v-model="isValidForm">
<InputValidator
Expand Down
15 changes: 9 additions & 6 deletions packages/playground/src/views/nodes.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<template>
<div class="hint">
<v-alert class="mb-4" type="info" variant="tonal">
Node status is updated every 90 minutes. For a realtime status, click on the node's card.
</v-alert>
</div>

<view-layout>
<v-card color="primary" class="d-flex justify-center items-center pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-access-point</v-icon>
<v-card-title class="pa-0">Node Finder</v-card-title>
</v-card>
<div class="hint mt-3">
<v-alert class="mb-4" type="info" variant="tonal">
Node status is updated every 90 minutes. For a realtime status, click on the node's card.
</v-alert>
</div>
<TfFiltersLayout>
<template #filters>
<TfFiltersContainer class="mb-4" @apply="loadNodes(true)" :loading="loading">
Expand Down
4 changes: 4 additions & 0 deletions packages/playground/src/views/orchestrators_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<view-layout>
<v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-group</v-icon>
<v-card-title class="pa-0">Orchestrators</v-card-title>
</v-card>
<v-row>
<v-col v-for="card in cards" :key="card.title">
<router-link :to="card.route">
Expand Down
4 changes: 4 additions & 0 deletions packages/playground/src/views/solutions_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<view-layout>
<v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-lightbulb-on-outline</v-icon>
<v-card-title class="pa-0">Applications</v-card-title>
</v-card>
<v-text-field label="Search Applications" v-model="searchItem" class="mb-5" clearable></v-text-field>
<v-row>
<v-col sm="12" md="6" lg="4" v-for="card in filteredCards" :key="card.title">
Expand Down
203 changes: 98 additions & 105 deletions packages/playground/src/views/sshkey_view.vue
Original file line number Diff line number Diff line change
@@ -1,109 +1,102 @@
<template>
<v-card class="pa-6 mb-4">
<div>
<h3 class="text-light">
<v-icon> mdi-cog-sync </v-icon>
Manage SSH Keys
</h3>
<p class="mt-2">
Manage SSH keys easily, switch between them, and activate or deactivate keys as needed for accessing deployed
machines. Simplify key distribution and effectively manage access to nodes.
</p>
</div>
</v-card>

<v-alert type="info"> Multiple keys support is coming up soon </v-alert>

<v-card class="mb-3 pa-3" color="transparent">
<v-col class="d-flex justify-end">
<v-btn
class="mr-2"
@click="() => openDialog(SSHCreationMethod.Import)"
prepend-icon="mdi-key-plus"
color="secondary"
:disabled="loading || deleting || generatingSSH || savingKey || activating"
>
Import
</v-btn>

<v-btn
@click="exportAllKeys"
class="mr-2"
prepend-icon="mdi-export"
color="secondary"
:disabled="
!allKeys ||
allKeys.length === 0 ||
loading ||
deleting ||
generatingSSH ||
savingKey ||
isExporting ||
activating
"
:loading="isExporting"
>
Export all
</v-btn>

<v-btn
class="mr-2"
variant="elevated"
:disabled="loading || deleting || generatingSSH || savingKey || activating"
@click="openDialog(SSHCreationMethod.Generate)"
prepend-icon="mdi-key-plus"
>
Generate
</v-btn>
</v-col>
</v-card>

<ssh-table
@delete="deleteKey"
@view="viewSelectedKey"
@export="exportSelectedKeys"
@update:activation="updateActivation"
:ssh-keys="allKeys"
:loading="loading"
:loading-message="tableLoadingMessage"
:deleting="deleting"
/>

<!-- Dialogs -->
<!-- Generate -->
<ssh-form-dialog
v-if="dialogType === SSHCreationMethod.Generate"
:open="dialogType === SSHCreationMethod.Generate"
:all-keys="allKeys"
:dialog-type="dialogType"
:generating="generatingSSH"
:saving-key="savingKey"
@save="addKey($event)"
@close="closeDialog"
@generate="generateSSHKeys($event)"
/>

<!-- Import -->
<ssh-form-dialog
v-if="dialogType === SSHCreationMethod.Import"
:open="dialogType === SSHCreationMethod.Import"
:all-keys="allKeys"
:dialog-type="dialogType"
:generating="generatingSSH"
:saving-key="savingKey"
@save="addKey($event)"
@close="closeDialog"
@generate="generateSSHKeys($event)"
/>

<!-- View -->
<ssh-data-dialog
:open="isViewKey"
:all-keys="allKeys"
:selected-key="selectedKey"
@close="isViewKey = false"
@update="updateKeys"
/>
<view-layout>
<v-card color="primary" class="d-flex justify-center items-center pa-3 mb-3 text-center">
<v-icon size="30" class="pr-3">mdi-key-plus</v-icon>
<v-card-title class="pa-0">SSH keys</v-card-title>
</v-card>
<v-alert type="info"> Multiple keys support is coming up soon </v-alert>

<v-card class="mt-3 mb-1" color="transparent">
<v-col class="px-0 d-flex justify-end">
<v-btn
class="mr-2"
@click="() => openDialog(SSHCreationMethod.Import)"
prepend-icon="mdi-key-plus"
color="secondary"
:disabled="loading || deleting || generatingSSH || savingKey || activating"
>
Import
</v-btn>

<v-btn
@click="exportAllKeys"
class="mr-2"
prepend-icon="mdi-export"
color="secondary"
:disabled="
!allKeys ||
allKeys.length === 0 ||
loading ||
deleting ||
generatingSSH ||
savingKey ||
isExporting ||
activating
"
:loading="isExporting"
>
Export all
</v-btn>

<v-btn
class=""
variant="elevated"
:disabled="loading || deleting || generatingSSH || savingKey || activating"
@click="openDialog(SSHCreationMethod.Generate)"
prepend-icon="mdi-key-plus"
>
Generate
</v-btn>
</v-col>
</v-card>

<ssh-table
@delete="deleteKey"
@view="viewSelectedKey"
@export="exportSelectedKeys"
@update:activation="updateActivation"
:ssh-keys="allKeys"
:loading="loading"
:loading-message="tableLoadingMessage"
:deleting="deleting"
/>

<!-- Dialogs -->
<!-- Generate -->
<ssh-form-dialog
v-if="dialogType === SSHCreationMethod.Generate"
:open="dialogType === SSHCreationMethod.Generate"
:all-keys="allKeys"
:dialog-type="dialogType"
:generating="generatingSSH"
:saving-key="savingKey"
@save="addKey($event)"
@close="closeDialog"
@generate="generateSSHKeys($event)"
/>

<!-- Import -->
<ssh-form-dialog
v-if="dialogType === SSHCreationMethod.Import"
:open="dialogType === SSHCreationMethod.Import"
:all-keys="allKeys"
:dialog-type="dialogType"
:generating="generatingSSH"
:saving-key="savingKey"
@save="addKey($event)"
@close="closeDialog"
@generate="generateSSHKeys($event)"
/>

<!-- View -->
<ssh-data-dialog
:open="isViewKey"
:all-keys="allKeys"
:selected-key="selectedKey"
@close="isViewKey = false"
@update="updateKeys"
/>
</view-layout>
</template>

<script lang="ts" setup>
Expand Down
4 changes: 4 additions & 0 deletions packages/playground/src/views/vms_view.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<view-layout>
<v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
<v-icon size="30" class="pr-3">mdi-television</v-icon>
<v-card-title class="pa-0">Virtual Machines</v-card-title>
</v-card>
<v-row>
<v-col v-for="card in cards" :key="card.title">
<router-link :to="card.route">
Expand Down
Loading

0 comments on commit 333c66a

Please sign in to comment.