sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Template Button güncellemesi

Browse source
This commit is contained in:
Sedat Öztürk 2026-03-30 23:40:20 +03:00
parent e9ce256c07
commit 3db9fc332b
21 changed files with 151 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
View file

@ -6144,6 +6144,12 @@
"tr": "Yapay zekanın iş süreçlerindeki etkileri ve geleceği...", "tr": "Yapay zekanın iş süreçlerindeki etkileri ve geleceği...",
"en": "The impacts and future of AI in business processes..." "en": "The impacts and future of AI in business processes..."
}, },
{
"resourceName": "Platform",
"key": "Public.blog.posts.web.excerpt",
"tr": "Modern web geliştirme teknikleri ve araçları...",
"en": "Modern web development techniques and tools..."
},
{ {
"resourceName": "Platform", "resourceName": "Platform",
"key": "Public.blog.posts.ai.title", "key": "Public.blog.posts.ai.title",
@ -7658,7 +7664,7 @@
}, },
{ {
"resourceName": "Platform", "resourceName": "Platform",
"key": "Public.services.integration.features.Api", "key": "Public.services.integration.features.api",
"tr": "Api Entegrasyonu", "tr": "Api Entegrasyonu",
"en": "Api Integration" "en": "Api Integration"
}, },

7
ui/src/components/codeLayout/ComponentSelector.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { ComponentInfo } from '../../proxy/developerKit/componentInfo'; import { ComponentInfo } from '../../proxy/developerKit/componentInfo';
import { Button } from '../ui';
interface ComponentSelectorProps { interface ComponentSelectorProps {
components: ComponentInfo[]; components: ComponentInfo[];
@ -20,13 +21,15 @@ const ComponentSelector: React.FC<ComponentSelectorProps> = ({
<label className="block text-sm font-medium text-gray-700"> <label className="block text-sm font-medium text-gray-700">
Select Component Select Component
</label> </label>
<button <Button
variant='solid'
size="xs"
onClick={onRefresh} onClick={onRefresh}
className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors" className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors"
title="Refresh component list" title="Refresh component list"
> >
Refresh Refresh
</button> </Button>
</div> </div>
<select <select
value={selectedComponentId || ''} value={selectedComponentId || ''}

25
ui/src/components/codeLayout/PropertyPanel.tsx
View file

@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
import TailwindModal from "./TailwindModal"; import TailwindModal from "./TailwindModal";
import { ComponentInfo, HookInfo, PropertyInfo } from "../../proxy/developerKit/componentInfo"; import { ComponentInfo, HookInfo, PropertyInfo } from "../../proxy/developerKit/componentInfo";
import { getComponentDefinition } from "./data/componentDefinitions"; import { getComponentDefinition } from "./data/componentDefinitions";
import { Button } from "../ui";
interface PropertyPanelProps { interface PropertyPanelProps {
selectedComponent: ComponentInfo | null; selectedComponent: ComponentInfo | null;
@ -525,7 +526,9 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
</div> </div>
</div> </div>
{/* Sil Butonu */} {/* Sil Butonu */}
<button <Button
variant="solid"
size="xs"
className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 transition-colors text-sm" className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 transition-colors text-sm"
onClick={() => { onClick={() => {
if (selectedComponent) { if (selectedComponent) {
@ -541,28 +544,32 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
title="Komponenti Sil" title="Komponenti Sil"
> >
Sil Sil
</button> </Button>
</div> </div>
{/* Footer Action Buttons - her iki tabda da sabit */} {/* Footer Action Buttons - her iki tabda da sabit */}
<div className="p-4 border-t"> <div className="p-4 border-t">
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button
size="xs"
variant="solid"
onClick={ onClick={
activeTab === "props" activeTab === "props"
? handleApplyPropChanges ? handleApplyPropChanges
: handleApplyHookChanges : handleApplyHookChanges
} }
disabled={activeTab === "props" ? !hasChanges : !hasHookChanges} disabled={activeTab === "props" ? !hasChanges : !hasHookChanges}
className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${ className={`flex-1 rounded-md font-medium transition-colors ${
(activeTab === "props" ? hasChanges : hasHookChanges) (activeTab === "props" ? hasChanges : hasHookChanges)
? "bg-green-500 text-white hover:bg-green-600" ? "bg-green-500 text-white hover:bg-green-600"
: "bg-gray-300 text-gray-500 cursor-not-allowed" : "bg-gray-300 text-gray-500 cursor-not-allowed"
}`} }`}
> >
Uygula Uygula
</button> </Button>
<button <Button
size="xs"
variant="default"
onClick={ onClick={
activeTab === "props" activeTab === "props"
? handleResetChanges ? handleResetChanges
@ -572,20 +579,20 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
} }
} }
disabled={activeTab === "props" ? !hasChanges : !hasHookChanges} disabled={activeTab === "props" ? !hasChanges : !hasHookChanges}
className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${ className={`flex-1 rounded-md font-medium transition-colors ${
(activeTab === "props" ? hasChanges : hasHookChanges) (activeTab === "props" ? hasChanges : hasHookChanges)
? "bg-red-500 text-white hover:bg-red-600" ? "bg-red-500 text-white hover:bg-red-600"
: "bg-gray-300 text-gray-500 cursor-not-allowed" : "bg-gray-300 text-gray-500 cursor-not-allowed"
}`} }`}
> >
İptal İptal
</button> </Button>
</div> </div>
</div> </div>
{/* Content */} {/* Content */}
{activeTab === "props" && ( {activeTab === "props" && (
<div className="flex-1 overflow-y-auto p-4 max-h-[calc(100vh-200px)]"> <div className="flex-1 text-black overflow-y-auto p-4 max-h-[calc(100vh-200px)]">
<h3 className="text-md font-medium text-gray-800 mb-4">Properties</h3> <h3 className="text-md font-medium text-gray-800 mb-4">Properties</h3>
{/* Properties */} {/* Properties */}
{properties.length > 0 && ( {properties.length > 0 && (

29
ui/src/components/codeLayout/TailwindModal.tsx
View file

@ -1,5 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { searchTailwindClasses, TAILWIND_CLASSES } from './data/tailwindClasses'; import { searchTailwindClasses, TAILWIND_CLASSES } from './data/tailwindClasses';
import { Button } from '../ui';
interface TailwindModalProps { interface TailwindModalProps {
isOpen: boolean; isOpen: boolean;
@ -61,7 +62,7 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
</div> </div>
{/* Search and Filter */} {/* Search and Filter */}
<div className="p-4 border-b bg-gray-50"> <div className="p-4 border-b bg-gray-50 text-black">
<div className="flex gap-4 mb-4"> <div className="flex gap-4 mb-4">
<input <input
type="text" type="text"
@ -106,25 +107,15 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
key={`${className}-${index}`} key={`${className}-${index}`}
className="group relative" className="group relative"
> >
<button <Button
variant='default'
onClick={() => handleClassSelect(className)} onClick={() => handleClassSelect(className)}
className="w-full text-left px-3 py-2 text-sm bg-gray-100 hover:bg-blue-100 rounded border hover:border-blue-300 transition-colors" className="w-full text-left px-3 py-2 text-sm bg-gray-100 hover:bg-blue-100 rounded border hover:border-blue-300 transition-colors"
> >
<span className="font-mono text-xs text-gray-600"> <span className="font-mono text-xs text-gray-600">
{className} {className}
</span> </span>
</button> </Button>
{/* Add to current value button */}
{currentValue && (
<button
onClick={() => handleAddToCurrentValue(className)}
className="absolute top-1 right-1 w-6 h-6 bg-blue-500 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-600"
title="Add to current value"
>
+
</button>
)}
</div> </div>
))} ))}
</div> </div>
@ -137,18 +128,20 @@ const TailwindModal: React.FC<TailwindModalProps> = ({
{filteredClasses.length} classes found {filteredClasses.length} classes found
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button
variant='default'
onClick={() => onSelectClass('')} onClick={() => onSelectClass('')}
className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors" className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
> >
Clear Clear
</button> </Button>
<button <Button
variant='solid'
onClick={onClose} onClick={onClose}
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
> >
Close Close
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

6
ui/src/views/NotFound.tsx
View file

@ -1,3 +1,4 @@
import { Button } from '@/components/ui'
import { APP_NAME } from '@/constants/app.constant' import { APP_NAME } from '@/constants/app.constant'
import { ROUTES_ENUM } from '@/routes/route.constant' import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
@ -27,14 +28,15 @@ const NotFoundPage = () => {
{translate('::Public.notFound.message')} {translate('::Public.notFound.message')}
</p> </p>
<div className="flex items-center justify-center font-inter"> <div className="flex items-center justify-center font-inter">
<button <Button
variant='solid'
onClick={() => onClick={() =>
navigate(isAdminPath ? ROUTES_ENUM.protected.dashboard : ROUTES_ENUM.public.home) navigate(isAdminPath ? ROUTES_ENUM.protected.dashboard : ROUTES_ENUM.public.home)
} }
className="px-6 py-3 bg-blue-500 rounded-xl shadow hover:bg-blue-600 transition" className="px-6 py-3 bg-blue-500 rounded-xl shadow hover:bg-blue-600 transition"
> >
{translate('::Public.notFound.button')} {translate('::Public.notFound.button')}
</button> </Button>
</div> </div>
</div> </div>
) )

6
ui/src/views/admin/files/components/Breadcrumb.tsx
View file

@ -2,6 +2,7 @@ import { forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { FaChevronRight, FaFolder, FaHome } from 'react-icons/fa' import { FaChevronRight, FaFolder, FaHome } from 'react-icons/fa'
import type { BreadcrumbItem } from '@/types/fileManagement' import type { BreadcrumbItem } from '@/types/fileManagement'
import { Button } from '@/components/ui'
export interface BreadcrumbProps { export interface BreadcrumbProps {
items: BreadcrumbItem[] items: BreadcrumbItem[]
@ -17,7 +18,8 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
{items.map((item, index) => ( {items.map((item, index) => (
<div key={item.path} className="flex items-center"> <div key={item.path} className="flex items-center">
{index > 0 && <FaChevronRight className="mx-2 h-4 w-4 text-gray-400" />} {index > 0 && <FaChevronRight className="mx-2 h-4 w-4 text-gray-400" />}
<button <Button
size="xs"
onClick={() => onNavigate(item)} onClick={() => onNavigate(item)}
className={classNames( className={classNames(
'flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors', 'flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
@ -33,7 +35,7 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
<FaFolder className="h-4 w-4 mr-1" /> <FaFolder className="h-4 w-4 mr-1" />
)} )}
<span className="truncate max-w-32">{item.name}</span> <span className="truncate max-w-32">{item.name}</span>
</button> </Button>
</div> </div>
))} ))}
</div> </div>

12
ui/src/views/admin/listForm/WizardStep2.tsx
View file

@ -473,20 +473,20 @@ const WizardStep2 = ({
extra={ extra={
selectCommandColumns.length > 0 ? ( selectCommandColumns.length > 0 ? (
<div className="flex items-center gap-2 ml-3"> <div className="flex items-center gap-2 ml-3">
<button <Button
type="button" variant='solid'
onClick={() => onToggleAllColumns(true)} onClick={() => onToggleAllColumns(true)}
className="text-xs px-2 py-0.5 rounded bg-indigo-500 text-white hover:bg-indigo-600" className="text-xs px-2 py-0.5 rounded bg-indigo-500 text-white hover:bg-indigo-600"
> >
{translate('::ListForms.Wizard.Step2.SelectAll') || 'Tümünü Seç'} {translate('::ListForms.Wizard.Step2.SelectAll') || 'Tümünü Seç'}
</button> </Button>
<button <Button
type="button" variant='default'
onClick={() => onToggleAllColumns(false)} onClick={() => onToggleAllColumns(false)}
className="text-xs px-2 py-0.5 rounded border border-gray-300 dark:border-gray-600 text-gray-500 hover:text-red-500 hover:border-red-400" className="text-xs px-2 py-0.5 rounded border border-gray-300 dark:border-gray-600 text-gray-500 hover:text-red-500 hover:border-red-400"
> >
{translate('::ListForms.Wizard.Step2.ClearAll') || 'Tümünü Kaldır'} {translate('::ListForms.Wizard.Step2.ClearAll') || 'Tümünü Kaldır'}
</button> </Button>
<span className="text-xs text-gray-400"> <span className="text-xs text-gray-400">
{selectedColumns.size}/{selectCommandColumns.length}{' '} {selectedColumns.size}/{selectCommandColumns.length}{' '}
{translate('::App.Listform.ListformField.Column')} {translate('::App.Listform.ListformField.Column')}

12
ui/src/views/admin/organization-unit/OrganizationUnits.tsx
View file

@ -430,24 +430,24 @@ const OrganizationUnits = () => {
<div className="file-actions"> <div className="file-actions">
<div className="flex gap-1 folderFileActions"> <div className="flex gap-1 folderFileActions">
<button <Button
onClick={() => setIsMoveAllUsersOpen(true)} onClick={() => setIsMoveAllUsersOpen(true)}
title={translate('::Abp.Identity.OrganizationUnit.MoveAllUsers')} title={translate('::Abp.Identity.OrganizationUnit.MoveAllUsers')}
> >
<FaUserPlus size="20" color="#2d6da3" /> <FaUserPlus size="20" color="#2d6da3" />
</button> </Button>
<button <Button
onClick={() => node.edit()} onClick={() => node.edit()}
title={translate('::Abp.Identity.OrganizationUnit.Rename')} title={translate('::Abp.Identity.OrganizationUnit.Rename')}
> >
<FaEdit size="20" className="text-teal-900" /> <FaEdit size="20" className="text-teal-900" />
</button> </Button>
<button <Button
onClick={() => setDeleteRow({ id: node.data.id, name: 'Organization Unit' })} onClick={() => setDeleteRow({ id: node.data.id, name: 'Organization Unit' })}
title={translate('::Delete')} title={translate('::Delete')}
> >
<FaTrashAlt size="20" className="text-red-500" /> <FaTrashAlt size="20" className="text-red-500" />
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

5
ui/src/views/forum/Forum.tsx
View file

@ -7,6 +7,7 @@ import { Container } from '@/components/shared'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { APP_NAME } from '@/constants/app.constant' import { APP_NAME } from '@/constants/app.constant'
import { Button } from '@/components/ui'
export function Forum() { export function Forum() {
const { translate } = useLocalization() const { translate } = useLocalization()
@ -63,9 +64,9 @@ export function Forum() {
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"> <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
<strong className="font-bold">Error: </strong> <strong className="font-bold">Error: </strong>
<span className="block sm:inline">{error}</span> <span className="block sm:inline">{error}</span>
<button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3"> <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
<span className="sr-only">Dismiss</span>× <span className="sr-only">Dismiss</span>×
</button> </Button>
</div> </div>
</div> </div>
)} )}

5
ui/src/views/forum/Management.tsx
View file

@ -5,6 +5,7 @@ import { Container } from '@/components/shared'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { APP_NAME } from '@/constants/app.constant' import { APP_NAME } from '@/constants/app.constant'
import { Button } from '@/components/ui'
export function Management() { export function Management() {
const { const {
@ -69,9 +70,9 @@ export function Management() {
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"> <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
<strong className="font-bold">Error: </strong> <strong className="font-bold">Error: </strong>
<span className="block sm:inline">{error}</span> <span className="block sm:inline">{error}</span>
<button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3"> <Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
<span className="sr-only">Dismiss</span>× <span className="sr-only">Dismiss</span>×
</button> </Button>
</div> </div>
</div> </div>
)} )}

5
ui/src/views/forum/admin/AdminView.tsx
View file

@ -6,6 +6,7 @@ import { PostManagement } from './PostManagement'
import { ForumCategory, ForumPost, ForumTopic } from '@/proxy/forum/forum' import { ForumCategory, ForumPost, ForumTopic } from '@/proxy/forum/forum'
import { AdminStats } from './Dashboard' import { AdminStats } from './Dashboard'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Button } from '@/components/ui'
interface AdminViewProps { interface AdminViewProps {
categories: ForumCategory[] categories: ForumCategory[]
@ -108,7 +109,7 @@ export function AdminView({
{navigationItems.map((item) => { {navigationItems.map((item) => {
const Icon = item.icon const Icon = item.icon
return ( return (
<button <Button
key={item.id} key={item.id}
onClick={() => setActiveSection(item.id)} onClick={() => setActiveSection(item.id)}
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${ className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
@ -119,7 +120,7 @@ export function AdminView({
> >
<Icon className="w-5 h-5" /> <Icon className="w-5 h-5" />
<span className="font-medium">{item.label}</span> <span className="font-medium">{item.label}</span>
</button> </Button>
) )
})} })}
</nav> </nav>

27
ui/src/views/forum/admin/CategoryManagement.tsx
View file

@ -165,14 +165,15 @@ export function CategoryManagement({
<h2 className="text-2xl font-bold text-gray-900"> <h2 className="text-2xl font-bold text-gray-900">
{translate('::App.Forum.CategoryManagement.Title')} {translate('::App.Forum.CategoryManagement.Title')}
</h2> </h2>
<button <Button
variant="solid"
onClick={() => setShowCreateForm(true)} onClick={() => setShowCreateForm(true)}
disabled={loading} disabled={loading}
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50" className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
> >
<FaPlus className="w-4 h-4" /> <FaPlus className="w-4 h-4" />
<span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span> <span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span>
</button> </Button>
</div> </div>
{/* Create/Edit Form */} {/* Create/Edit Form */}
@ -367,7 +368,8 @@ export function CategoryManagement({
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <Button
size='xs'
onClick={() => handleToggleActive(category)} onClick={() => handleToggleActive(category)}
className={`p-2 rounded-lg transition-colors ${ className={`p-2 rounded-lg transition-colors ${
category.isActive category.isActive
@ -381,9 +383,10 @@ export function CategoryManagement({
) : ( ) : (
<FaEyeSlash className="w-4 h-4" /> <FaEyeSlash className="w-4 h-4" />
)} )}
</button> </Button>
<button <Button
size='xs'
onClick={() => handleToggleLocked(category)} onClick={() => handleToggleLocked(category)}
className={`p-2 rounded-lg transition-colors ${ className={`p-2 rounded-lg transition-colors ${
category.isLocked category.isLocked
@ -397,23 +400,25 @@ export function CategoryManagement({
) : ( ) : (
<FaUnlock className="w-4 h-4" /> <FaUnlock className="w-4 h-4" />
)} )}
</button> </Button>
<button <Button
size='xs'
onClick={() => handleEdit(category)} onClick={() => handleEdit(category)}
className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors" className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
title={translate('::App.Forum.CategoryManagement.EditCategory')} title={translate('::App.Forum.CategoryManagement.EditCategory')}
> >
<FaEdit className="w-4 h-4" /> <FaEdit className="w-4 h-4" />
</button> </Button>
<button <Button
size='xs'
onClick={() => confirmDeleteCategory(category)} onClick={() => confirmDeleteCategory(category)}
className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors" className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
title={translate('::App.Forum.CategoryManagement.DeleteCategory')} title={translate('::App.Forum.CategoryManagement.DeleteCategory')}
> >
<FaTrash className="w-4 h-4" /> <FaTrash className="w-4 h-4" />
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

19
ui/src/views/forum/admin/PostManagement.tsx
View file

@ -164,14 +164,15 @@ export function PostManagement({
<h2 className="text-2xl font-bold text-gray-900"> <h2 className="text-2xl font-bold text-gray-900">
{translate('::App.Forum.PostManagement.Title')} {translate('::App.Forum.PostManagement.Title')}
</h2> </h2>
<button <Button
variant="solid"
onClick={() => setShowCreateForm(true)} onClick={() => setShowCreateForm(true)}
disabled={loading} disabled={loading}
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50" className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
> >
<FaPlus className="w-4 h-4" /> <FaPlus className="w-4 h-4" />
<span>{translate('::App.Forum.PostManagement.AddPost')}</span> <span>{translate('::App.Forum.PostManagement.AddPost')}</span>
</button> </Button>
</div> </div>
{/* Create/Edit Form */} {/* Create/Edit Form */}
@ -397,7 +398,7 @@ export function PostManagement({
</div> </div>
<div className="flex items-center space-x-2 ml-4"> <div className="flex items-center space-x-2 ml-4">
<button <Button
onClick={() => handleToggleAcceptedAnswer(post)} onClick={() => handleToggleAcceptedAnswer(post)}
className={`p-2 rounded-lg transition-colors ${ className={`p-2 rounded-lg transition-colors ${
post.isAcceptedAnswer post.isAcceptedAnswer
@ -415,23 +416,23 @@ export function PostManagement({
) : ( ) : (
<FaCircle className="w-4 h-4" /> <FaCircle className="w-4 h-4" />
)} )}
</button> </Button>
<button <Button
onClick={() => handleEdit(post)} onClick={() => handleEdit(post)}
className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors" className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
title={translate('::App.Forum.PostManagement.EditPost')} title={translate('::App.Forum.PostManagement.EditPost')}
> >
<FaEdit className="w-4 h-4" /> <FaEdit className="w-4 h-4" />
</button> </Button>
<button <Button
onClick={() => confirmDeletePost(post)} onClick={() => confirmDeletePost(post)}
className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors" className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
title={translate('::App.Forum.PostManagement.DeletePost')} title={translate('::App.Forum.PostManagement.DeletePost')}
> >
<FaTrashAlt className="w-4 h-4" /> <FaTrashAlt className="w-4 h-4" />
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

27
ui/src/views/forum/admin/TopicManagement.tsx
View file

@ -206,14 +206,15 @@ export function TopicManagement({
<h2 className="text-2xl font-bold text-gray-900"> <h2 className="text-2xl font-bold text-gray-900">
{translate('::App.Forum.TopicManagement.Title')} {translate('::App.Forum.TopicManagement.Title')}
</h2> </h2>
<button <Button
variant="solid"
onClick={() => setShowCreateForm(true)} onClick={() => setShowCreateForm(true)}
disabled={loading} disabled={loading}
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50" className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
> >
<FaPlus className="w-4 h-4" /> <FaPlus className="w-4 h-4" />
<span>{translate('::App.Forum.TopicManagement.AddTopic')}</span> <span>{translate('::App.Forum.TopicManagement.AddTopic')}</span>
</button> </Button>
</div> </div>
{/* Create/Edit Form */} {/* Create/Edit Form */}
@ -398,7 +399,7 @@ export function TopicManagement({
</div> </div>
<div className="flex items-center space-x-2 ml-4"> <div className="flex items-center space-x-2 ml-4">
<button <Button
onClick={() => handlePin(topic)} onClick={() => handlePin(topic)}
className={`p-2 rounded-lg transition-colors ${ className={`p-2 rounded-lg transition-colors ${
topic.isPinned topic.isPinned
@ -412,9 +413,9 @@ export function TopicManagement({
) : ( ) : (
<FaTree className="w-4 h-4" /> <FaTree className="w-4 h-4" />
)} )}
</button> </Button>
<button <Button
onClick={() => handleLock(topic)} onClick={() => handleLock(topic)}
className={`p-2 rounded-lg transition-colors ${ className={`p-2 rounded-lg transition-colors ${
topic.isLocked topic.isLocked
@ -428,9 +429,9 @@ export function TopicManagement({
) : ( ) : (
<FaUnlock className="w-4 h-4" /> <FaUnlock className="w-4 h-4" />
)} )}
</button> </Button>
<button <Button
onClick={() => handleSolved(topic)} onClick={() => handleSolved(topic)}
className={`p-2 rounded-lg transition-colors ${ className={`p-2 rounded-lg transition-colors ${
topic.isSolved topic.isSolved
@ -444,23 +445,23 @@ export function TopicManagement({
) : ( ) : (
<FaCircle className="w-4 h-4" /> <FaCircle className="w-4 h-4" />
)} )}
</button> </Button>
<button <Button
onClick={() => handleEdit(topic)} onClick={() => handleEdit(topic)}
className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors" className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
title={translate('::App.Forum.TopicManagement.EditTopic')} title={translate('::App.Forum.TopicManagement.EditTopic')}
> >
<FaEdit className="w-4 h-4" /> <FaEdit className="w-4 h-4" />
</button> </Button>
<button <Button
onClick={() => confirmDeleteTopic(topic)} onClick={() => confirmDeleteTopic(topic)}
className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors" className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
title={translate('::App.Forum.TopicManagement.DeleteTopic')} title={translate('::App.Forum.TopicManagement.DeleteTopic')}
> >
<FaTrashAlt className="w-4 h-4" /> <FaTrashAlt className="w-4 h-4" />
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

21
ui/src/views/forum/forum/ForumView.tsx
View file

@ -11,6 +11,7 @@ import { ForumTopicCard } from './ForumTopicCard'
import { useStoreState } from '@/store/store' import { useStoreState } from '@/store/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { forumService } from '@/services/forum.service' import { forumService } from '@/services/forum.service'
import { Button } from '@/components/ui'
interface ForumViewProps { interface ForumViewProps {
categories: ForumCategory[] categories: ForumCategory[]
@ -352,41 +353,45 @@ export function ForumView({
{/* Right Side: Actions + Search */} {/* Right Side: Actions + Search */}
<div className="flex items-center space-x-2 ml-auto"> <div className="flex items-center space-x-2 ml-auto">
{viewState === 'topics' && selectedCategory && !selectedCategory.isLocked && ( {viewState === 'topics' && selectedCategory && !selectedCategory.isLocked && (
<button <Button
variant='solid'
onClick={() => setShowCreateTopic(true)} onClick={() => setShowCreateTopic(true)}
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors" className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
> >
<FaPlus className="w-4 h-4" /> <FaPlus className="w-4 h-4" />
<span>{translate('::App.Forum.TopicManagement.NewTopic')}</span> <span>{translate('::App.Forum.TopicManagement.NewTopic')}</span>
</button> </Button>
)} )}
{viewState === 'posts' && selectedTopic && !selectedTopic.isLocked && ( {viewState === 'posts' && selectedTopic && !selectedTopic.isLocked && (
<button <Button
variant='solid'
onClick={() => setShowCreatePost(true)} onClick={() => setShowCreatePost(true)}
className="flex items-center space-x-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors" className="flex items-center space-x-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors"
> >
<FaPlus className="w-4 h-4" /> <FaPlus className="w-4 h-4" />
<span>{translate('::App.Forum.PostManagement.NewPost')}</span> <span>{translate('::App.Forum.PostManagement.NewPost')}</span>
</button> </Button>
)} )}
{/* Search */} {/* Search */}
<button <Button
onClick={() => setIsSearchModalOpen(true)} onClick={() => setIsSearchModalOpen(true)}
variant='default'
className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
> >
<FaSearch className="w-4 h-4 text-gray-400" /> <FaSearch className="w-4 h-4 text-gray-400" />
<span className="text-gray-500"> <span className="text-gray-500">
{translate('::App.Forum.TopicManagement.Searchtopics')} {translate('::App.Forum.TopicManagement.Searchtopics')}
</span> </span>
</button> </Button>
<button <Button
onClick={() => setIsSearchModalOpen(true)} onClick={() => setIsSearchModalOpen(true)}
variant='default'
className="md:hidden p-2 text-gray-400 hover:text-gray-600 transition-colors" className="md:hidden p-2 text-gray-400 hover:text-gray-600 transition-colors"
> >
<FaSearch className="w-5 h-5" /> <FaSearch className="w-5 h-5" />
</button> </Button>
</div> </div>
</div> </div>

12
ui/src/views/list/ChartDrawer.tsx
View file

@ -143,13 +143,13 @@ const ChartDrawer = ({
<span>📊</span> <span>📊</span>
{translate('::App.Platform.ChartDrawer.ChartSeries')} {translate('::App.Platform.ChartDrawer.ChartSeries')}
</h2> </h2>
<button <Button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="p-2 hover:bg-gray-200 rounded-full transition-colors" className="p-2 hover:bg-gray-200 rounded-full transition-colors"
> >
<FaTimes /> <FaTimes />
</button> </Button>
</div> </div>
<FormContainer size="sm" className="flex flex-col flex-1 overflow-hidden"> <FormContainer size="sm" className="flex flex-col flex-1 overflow-hidden">
@ -205,7 +205,7 @@ const ChartDrawer = ({
<Field name={`series[${index}].type`}> <Field name={`series[${index}].type`}>
{({ field, form }: FieldProps) => ( {({ field, form }: FieldProps) => (
<div className="relative"> <div className="relative">
<button <Button
type="button" type="button"
onClick={() => onClick={() =>
setSelectedSeriesIndex( setSelectedSeriesIndex(
@ -222,12 +222,12 @@ const ChartDrawer = ({
{chartSeriesTypeOptions.find((t) => t.label === field.value) {chartSeriesTypeOptions.find((t) => t.label === field.value)
?.label || field.value} ?.label || field.value}
</span> </span>
</button> </Button>
{selectedSeriesIndex === index && ( {selectedSeriesIndex === index && (
<div className="absolute z-50 mt-1 w-full bg-white border rounded-lg shadow-xl p-2"> <div className="absolute z-50 mt-1 w-full bg-white border rounded-lg shadow-xl p-2">
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{chartSeriesTypeOptions.map((chartType) => ( {chartSeriesTypeOptions.map((chartType) => (
<button <Button
key={chartType.label} key={chartType.label}
type="button" type="button"
onClick={() => { onClick={() => {
@ -244,7 +244,7 @@ const ChartDrawer = ({
<span className="text-xs font-medium"> <span className="text-xs font-medium">
{chartType.label} {chartType.label}
</span> </span>
</button> </Button>
))} ))}
</div> </div>
</div> </div>

6
ui/src/views/public/About.tsx
View file

@ -6,7 +6,7 @@ import { getAbout, saveAboutPage } from '@/services/about'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import Loading from '@/components/shared/Loading' import Loading from '@/components/shared/Loading'
import { APP_NAME } from '@/constants/app.constant' import { APP_NAME } from '@/constants/app.constant'
import { Notification, toast } from '@/components/ui' import { Button, Notification, toast } from '@/components/ui'
import { useStoreState } from '@/store' import { useStoreState } from '@/store'
import { useStoreActions } from '@/store' import { useStoreActions } from '@/store'
import DesignerDrawer from './designer/DesignerDrawer' import DesignerDrawer from './designer/DesignerDrawer'
@ -699,13 +699,13 @@ const About: React.FC = () => {
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}> <div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
{isDesignMode && !isPanelVisible && ( {isDesignMode && !isPanelVisible && (
<button <Button
type="button" type="button"
onClick={() => setIsPanelVisible(true)} onClick={() => setIsPanelVisible(true)}
className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl" className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
> >
{translate('::Public.designer.showPanel')} {translate('::Public.designer.showPanel')}
</button> </Button>
)} )}
{/* Hero Section */} {/* Hero Section */}

25
ui/src/views/public/Blog.tsx
View file

@ -8,6 +8,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { Loading } from '@/components/shared' import { Loading } from '@/components/shared'
import { APP_NAME } from '@/constants/app.constant' import { APP_NAME } from '@/constants/app.constant'
import { Button } from '@/components/ui'
const Blog = () => { const Blog = () => {
const { translate } = useLocalization() const { translate } = useLocalization()
@ -120,7 +121,7 @@ const Blog = () => {
{/* Category Filter */} {/* Category Filter */}
<div className="flex gap-2 flex-wrap"> <div className="flex gap-2 flex-wrap">
<button <Button
onClick={() => handleCategoryChange('')} onClick={() => handleCategoryChange('')}
className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${ className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
selectedCategory === '' selectedCategory === ''
@ -129,9 +130,9 @@ const Blog = () => {
}`} }`}
> >
{translate('::App.Reports.Search')} {translate('::App.Reports.Search')}
</button> </Button>
{categories.map((category) => ( {categories.map((category) => (
<button <Button
key={category.id} key={category.id}
onClick={() => handleCategoryChange(category.id)} onClick={() => handleCategoryChange(category.id)}
className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${ className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
@ -141,7 +142,7 @@ const Blog = () => {
}`} }`}
> >
{translate('::Public.' + category.name)} ({category.postCount}) {translate('::Public.' + category.name)} ({category.postCount})
</button> </Button>
))} ))}
</div> </div>
</div> </div>
@ -213,16 +214,16 @@ const Blog = () => {
{totalPages > 1 && ( {totalPages > 1 && (
<div className="mt-12 flex justify-center"> <div className="mt-12 flex justify-center">
<nav className="flex gap-2"> <nav className="flex gap-2">
<button <Button
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
> >
Önceki Önceki
</button> </Button>
{[...Array(totalPages)].map((_, i) => ( {[...Array(totalPages)].map((_, i) => (
<button <Button
key={i + 1} key={i + 1}
onClick={() => setCurrentPage(i + 1)} onClick={() => setCurrentPage(i + 1)}
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg ${
@ -232,16 +233,16 @@ const Blog = () => {
}`} }`}
> >
{i + 1} {i + 1}
</button> </Button>
))} ))}
<button <Button
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
> >
Sonraki Sonraki
</button> </Button>
</nav> </nav>
</div> </div>
)} )}
@ -262,9 +263,9 @@ const Blog = () => {
placeholder={translate('::Abp.Account.EmailAddress')} placeholder={translate('::Abp.Account.EmailAddress')}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/> />
<button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"> <Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
{translate('::Public.common.subscribe')} {translate('::Public.common.subscribe')}
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

6
ui/src/views/public/Contact.tsx
View file

@ -20,7 +20,7 @@ import DesignerDrawer from './designer/DesignerDrawer'
import SelectableBlock from './designer/SelectableBlock' import SelectableBlock from './designer/SelectableBlock'
import { DesignerSelection } from './designer/types' import { DesignerSelection } from './designer/types'
import { useDesignerState } from './designer/useDesignerState' import { useDesignerState } from './designer/useDesignerState'
import { Notification, toast } from '@/components/ui' import { Button, Notification, toast } from '@/components/ui'
interface ContactContent { interface ContactContent {
heroTitle: string heroTitle: string
@ -659,13 +659,13 @@ const Contact: React.FC = () => {
)} )}
{isDesignMode && !isPanelVisible && ( {isDesignMode && !isPanelVisible && (
<button <Button
type="button" type="button"
onClick={() => setIsPanelVisible(true)} onClick={() => setIsPanelVisible(true)}
className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl" className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
> >
{translate('::Public.designer.showPanel')} {translate('::Public.designer.showPanel')}
</button> </Button>
)} )}
<SelectableBlock <SelectableBlock

6
ui/src/views/public/Services.tsx
View file

@ -15,7 +15,7 @@ import DesignerDrawer from './designer/DesignerDrawer'
import SelectableBlock from './designer/SelectableBlock' import SelectableBlock from './designer/SelectableBlock'
import { DesignerSelection } from './designer/types' import { DesignerSelection } from './designer/types'
import { useDesignerState } from './designer/useDesignerState' import { useDesignerState } from './designer/useDesignerState'
import { Notification, toast } from '@/components/ui' import { Button, Notification, toast } from '@/components/ui'
interface ServiceCardContent { interface ServiceCardContent {
icon: string icon: string
@ -905,13 +905,13 @@ const Services: React.FC = () => {
></Helmet> ></Helmet>
{isDesignMode && !isPanelVisible && ( {isDesignMode && !isPanelVisible && (
<button <Button
type="button" type="button"
onClick={() => setIsPanelVisible(true)} onClick={() => setIsPanelVisible(true)}
className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl" className="fixed right-4 top-1/2 z-40 -translate-y-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-xl"
> >
{translate('::Public.designer.showPanel')} {translate('::Public.designer.showPanel')}
</button> </Button>
)} )}
{/* Hero Section */} {/* Hero Section */}

4
ui/src/views/public/designer/DesignerDrawer.tsx
View file

@ -72,7 +72,7 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
<div className="mt-4 flex flex-wrap gap-1.5"> <div className="mt-4 flex flex-wrap gap-1.5">
{languages.map((language) => ( {languages.map((language) => (
<button <Button
key={`${language.cultureName}-${language.key}`} key={`${language.cultureName}-${language.key}`}
type="button" type="button"
title={language.displayName} title={language.displayName}
@ -89,7 +89,7 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
shape="circle" shape="circle"
src={`/img/countries/${language.cultureName}.png`} src={`/img/countries/${language.cultureName}.png`}
/> />
</button> </Button>
))} ))}
</div> </div>
</div> </div>