andrewwallacespeckle
e72b193f06
* Add settings tab. Update style of component * Structuring of files/components * Updates to TexInput * Add RadioGroup * Last FE work * FE Updates * Webhooks Settings Tab * Styling updates to webhooks * Title/Description Update * General Page done * Collaborators WIP * Styling updates * Add custom message to updateProject * Radio Group Same Height * Styling updates to radio group. Disabled state * Updates pre demo * Updates to icons & post demo changes * Major Updates * Unsaved Changes Dialog * Routing WIP * Remove StatsBlock * Auto update discussions on Private * Routing/Redirects * New input style * Invite Dialog * Fix mobile radiogroup * Mobile Improvements * Fix console warning * Fix build * Disabled States * Fix console * Unhide webhooks * Updates from testing * Responsive fixes * Alignment fixes * Fix textarea mobile height * Updates to GraphQL Fragments * Fix disabled state * WIP Arrows for scroll * Update PageTabs - broken * Fix to PageTabs * PageTab fix initial scroll * Hide Scrollbar * Better underline method * Fix mobile initial underline * Webhooks Empty State * Fix input border * Fix empty state * Input Styling updates * Remove mobile smaller text * Update disabled state for disabled items * Updates disabled sates on Settings Block * Fix build. Disable Invite * Fixes to invite permissions * Disable role select when invite is disabled * Small alignment fix * Fix webhooks empty state * cleaning up unnecessary vue files * story improvement * Remove DisabledMessage prop * Fix disabled prop on Button * Move team to Leave Fragment * Remove unused Disabled Message props * Add limit to graphql query * Updates to BlockDiscussions * add formatTriggers function to webhooks * Remove md from button. Improved switch * Update RadioGroup.stories.ts * Update RadioGroup to use defineModel * Various styling and copy updates - More concise and accurate copy - More readable - Works better on mobile * Updates to Invite Dialog * Custom success Message * Update slot names * Remove md in TextInput. Set h-8 to default * Changes from call with fabs * Replace isOwner with composable * Set SettingsBlock icon as optional * Comments from PR * Updates from PR * Final Tidy Ups * Fix Title/Description * Fix spacing issue on Webhooks page * Update borders and colors to align with Automate Makes the same changes that I recently made to the unreleased Automate tab * WEB-869 * Improve styling of radiogroup component Better borders, hover effect, bigger checkmark icon, more subtle active background color, same across breakpoints. * Adjust border styling of RadioGroup component * Improve circle around checkmark in RadioGroup * Split Tabs into 2 components * Restyle overflow arrows * Adjust gap and remove icons from vertical nav Too many icons on the screen got distracting. * Ensure active item visible * Increase gap on vertical nav * Update copy for Access and Discussions settings * Input Tidyup * WEB-877 update-collaborators-block * Update inputs to new style * Fix webhooks button hover state * Fix comment copy Appears in the access settings before embedding a model * Remove hover shadow from search input on Dashboard * Small change from Benjamin * Change collaborators permissions copy * Comments from PR #1 * Comments from PR #2 * Fix condition for EditableHeader * Updates from CR --------- Co-authored-by: Kristaps Fabians Geikins <fabis94@live.com> Co-authored-by: Benjamin Ottensten <benjamin.ottensten@gmail.com>
63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col w-full"
|
|
:class="
|
|
background
|
|
? 'bg-foundation border border-outline-3 rounded-lg overflow-hidden '
|
|
: ''
|
|
"
|
|
>
|
|
<div
|
|
class="flex items-center gap-4 justify-between transition"
|
|
:class="background ? 'pt-4 px-4 sm:pt-6 sm:px-6' : ''"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<component :is="icon" v-if="icon" class="h-5 w-5"></component>
|
|
<h3 class="text-xl font-bold">{{ title }}</h3>
|
|
</div>
|
|
<div v-if="$slots['top-buttons']" class="flex gap-4">
|
|
<slot name="top-buttons" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="$slots.introduction"
|
|
class="text-foreground"
|
|
:class="background ? 'px-4 sm:px-6 pt-4' : 'pt-6'"
|
|
>
|
|
<slot name="introduction" />
|
|
</div>
|
|
<div class="flex flex-col" :class="background ? 'p-4 sm:p-6' : ''">
|
|
<slot />
|
|
</div>
|
|
<div
|
|
v-if="disabledMessage || $slots['bottom-buttons']"
|
|
class="flex flex-col sm:flex-row gap-2 justify-between items-end sm:items-center bg-gray-50 dark:bg-foundation px-4 sm:px-6 py-4 border-t border-outline-3"
|
|
>
|
|
<div v-if="disabledMessage" class="text-xs flex gap-1 sm:items-center w-full">
|
|
<ExclamationCircleIcon
|
|
v-tippy="disabledMessage"
|
|
class="h-5 w-5 text-foreground-2"
|
|
/>
|
|
<span class="text-foreground-2">
|
|
You must be a project owner to edit project details
|
|
</span>
|
|
</div>
|
|
<div v-else></div>
|
|
<div v-if="$slots['bottom-buttons']" class="flex gap-2">
|
|
<slot name="bottom-buttons" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { PropAnyComponent } from '@speckle/ui-components'
|
|
import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
|
|
|
|
defineProps<{
|
|
title: string
|
|
icon?: PropAnyComponent
|
|
background?: boolean
|
|
disabledMessage?: string
|
|
}>()
|
|
</script>
|