Skip to content
Snippets Groups Projects
Commit a3adcfc3 authored by Davor Ivankovic's avatar Davor Ivankovic
Browse files

modifed css on AppSingle

parent 9bb54bce
No related branches found
No related tags found
1 merge request!53Implement fetching apps from BE
Hide whitespace changes
Inline Side-by-side
src/App.tsx
+ 2
− 1
View file @ a3adcfc3
......@@ -4,7 +4,7 @@ import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
import { useAuth } from 'src/services/auth';
import { Dashboard, Users, Login, Apps } from './modules';
import { Dashboard, Users, Login, Apps, AppSingle } from './modules';
import { Layout } from './components';
import { LoginCallback } from './modules/login/LoginCallback';
......@@ -46,6 +46,7 @@ function App() {
<Route index element={<Users />} />
</Route>
<Route path="/apps" element={<ProtectedRoute />}>
<Route path=":slug" element={<AppSingle />} />
<Route index element={<Apps />} />
</Route>
<Route path="*" element={<Navigate to="/dashboard" />} />
......
src/modules/apps/AppSingle.tsx
+ 35
− 69
View file @ a3adcfc3
import React from 'react';
import { ChevronRightIcon } from '@heroicons/react/solid';
import { useParams } from 'react-router-dom';
import _ from 'lodash';
import { XCircleIcon } from '@heroicons/react/outline';
import { Tabs, Banner } from 'src/components';
import { Link } from 'react-router-dom';
import { Tabs } from 'src/components';
import { appAccessList } from 'src/components/UserModal/consts';
import { AdvancedTab, GeneralTab } from './components';
const pages = [
......@@ -16,81 +17,46 @@ const tabs = [
];
export const AppSingle: React.FC = () => {
return (
<>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
<nav className="flex" aria-label="Breadcrumb">
<ol className="flex items-center space-x-4">
<li>
<div className="flex items-center">
<Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
<span>Dashboard</span>
</Link>
</div>
</li>
{pages.map((page) => (
<li key={page.name}>
<div className="flex items-center">
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
<Link
to={page.to}
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
aria-current={page.current ? 'page' : undefined}
>
{page.name}
</Link>
</div>
</li>
))}
</ol>
</nav>
</div>
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
<Banner title="Managing single app instances coming soon." titleSm="Comming soon!" />
</div>
const params = useParams();
const appSlug = params.slug;
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden opacity-40 cursor-default pointer-events-none select-none">
<div className="bg-white overflow-hidden shadow rounded-sm mb-5">
<div className="px-4 py-5 sm:p-6 flex justify-between items-center">
<div className="mr-4 flex items-center">
<img
className="h-24 w-24 rounded-md overflow-hidden mr-4"
src="./../assets/nextcloud.svg"
alt="Nextcloud"
/>
const appInfo = _.find(appAccessList, { name: appSlug });
<div>
<h2 className="text-2xl leading-8 font-bold">Nextcloud</h2>
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
</div>
</div>
<div className="flex flex-col">
<button
type="button"
className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
>
<XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
Disable App
</button>
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
>
View Documentation
</button>
</div>
return (
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden lg:flex lg:flex-row">
<div
className="block bg-white overflow-hidden shadow rounded-sm basis-4/12 mx-auto sm:px-6 lg:px-8 overflow-hidden block lg:flex-none"
style={{ height: 'fit-content' }}
>
<div className="px-4 py-5 sm:p-6 flex flex-col">
<img className="h-24 w-24 rounded-md overflow-hidden mr-4 mb-3" src={appInfo?.image} alt={appInfo?.label} />
<div className="mb-3">
<h2 className="text-2xl leading-8 font-bold">{appInfo?.label}</h2>
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
</div>
<button
type="button"
className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
>
<XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
Disable App
</button>
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
>
View Documentation
</button>
</div>
</div>
<div className="bg-white shadow rounded-sm">
<div className="mx-auto sm:mt-8 lg:mt-0 lg:px-8 overflow-hidden block">
<div className="bg-white sm:px-6 shadow rounded-sm basis-8/12">
<div className="px-4 py-5 sm:p-6">
<Tabs tabs={tabs} />
</div>
</div>
</div>
</>
</div>
);
};
src/modules/apps/components/GeneralTab/GeneralTab.tsx
+ 26
− 145
View file @ a3adcfc3
import React, { useState } from 'react';
import { RadioGroup } from '@headlessui/react';
import { Switch } from '@headlessui/react';
function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}
const settings = [
{ name: 'Public access', description: 'This project would be available to anyone who has the link' },
{ name: 'Private to Project Members', description: 'Only members of this project would be able to access' },
{ name: 'Private to you', description: 'You are the only one able to access this project' },
];
export const GeneralTab = () => {
const [selected, setSelected] = useState(settings[0]);
const [enabled, setEnabled] = useState(false);
return (
<div className="py-4">
<div>
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
<h3 className="text-lg font-medium leading-6 text-gray-900">Privacy</h3>
<p className="mt-1 text-sm text-gray-500">Change your app privacy</p>
</div>
<div className="mt-5 md:mt-0 md:col-span-2">
<div className="mt-1">
<RadioGroup value={selected} onChange={setSelected}>
<RadioGroup.Label className="sr-only">Privacy setting</RadioGroup.Label>
<div className="bg-white rounded-md -space-y-px">
{settings.map((setting, settingIdx) => (
<RadioGroup.Option
key={setting.name}
value={setting}
className={({ checked }) =>
classNames(
settingIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
settingIdx === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
checked ? 'bg-primary-50 border-primary-400 z-10' : 'border-gray-200',
'relative border p-4 flex cursor-pointer focus:outline-none',
)
}
>
{({ active, checked }) => (
<>
<span
className={classNames(
checked ? 'bg-primary-600 border-transparent' : 'bg-white border-gray-300',
active ? 'ring-2 ring-offset-2 ring-primary-100' : '',
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
)}
aria-hidden="true"
>
<span className="rounded-full bg-white w-1.5 h-1.5" />
</span>
<div className="ml-3 flex flex-col">
<RadioGroup.Label
as="span"
className={classNames(
checked ? 'text-primary-900' : 'text-gray-900',
'block text-sm font-medium',
)}
>
{setting.name}
</RadioGroup.Label>
<RadioGroup.Description
as="span"
className={classNames(checked ? 'text-primary-900' : 'text-gray-500', 'block text-sm')}
>
{setting.description}
</RadioGroup.Description>
</div>
</>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
</div>
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-2">
<h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
<p className="mt-1 text-sm text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
gravida at orci.
</p>
</div>
</div>
<div className="mt-10">
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
<h3 className="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
<p className="mt-1 text-sm text-gray-500">Change you notifications settings</p>
</div>
<div className="mt-5 md:mt-0 md:col-span-2">
<fieldset className="space-y-5 -mt-4">
<legend className="sr-only">Notifications</legend>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="comments"
aria-describedby="comments-description"
name="comments"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="comments" className="font-medium text-gray-700">
Comments
</label>
<p id="comments-description" className="text-gray-500">
Get notified when someones posts a comment on a posting.
</p>
</div>
</div>
<div>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="candidates"
aria-describedby="candidates-description"
name="candidates"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="candidates" className="font-medium text-gray-700">
Candidates
</label>
<p id="candidates-description" className="text-gray-500">
Get notified when a candidate applies for a job.
</p>
</div>
</div>
</div>
<div>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="offers"
aria-describedby="offers-description"
name="offers"
type="checkbox"
className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="offers" className="font-medium text-gray-700">
Offers
</label>
<p id="offers-description" className="text-gray-500">
Get notified when a candidate accepts or rejects an offer.
</p>
</div>
</div>
</div>
</fieldset>
</div>
<div className="my-auto ml-auto">
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-primary-600' : 'bg-gray-200',
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none',
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
)}
/>
</Switch>
</div>
</div>
</div>
......
src/modules/apps/consts.tsx
+ 10
− 2
View file @ a3adcfc3
import React from 'react';
import { CogIcon, PlusCircleIcon } from '@heroicons/react/outline';
import _ from 'lodash';
import { useNavigate } from 'react-router';
export const initialEditorYaml = () => {
return `luck: except
......@@ -93,14 +94,16 @@ export const columns: any = [
{
Header: ' ',
Cell: (e: any) => {
const navigate = useNavigate();
const appStatus = e.cell.row.original.status as AppStatus;
const appSlug = e.cell.row.original.slug;
if (appStatus === AppStatus.Installing) {
return null;
}
return (
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => {}}
onClick={() => navigate(`/apps/${appSlug}`)}
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
......@@ -118,25 +121,29 @@ export const data: any[] = [
{
id: 1,
name: 'Nextcloud',
slug: 'nextcloud',
status: AppStatus.Installed,
assetSrc: './assets/nextcloud.svg',
},
{
id: 2,
name: 'Wekan',
slug: 'wekan',
status: AppStatus.Installing,
assetSrc: './assets/wekan.svg',
},
{
id: 3,
name: 'Zulip',
slug: 'zulip',
status: AppStatus.NotInstalled,
assetSrc: './assets/zulip.svg',
},
{
id: 4,
name: 'Wordpress',
status: AppStatus.NotInstalled,
slug: 'wordpress',
status: AppStatus.Installed,
assetSrc: './assets/wordpress.svg',
},
];
......@@ -144,6 +151,7 @@ export const data: any[] = [
export interface AppInfo {
id: number;
name: string;
slug: string;
status: AppStatus;
assetSrc: string;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment