Skip to content

Commit e8c3c1b

Browse files
cklei-carlycklei-carly
committed
Add and integrate Version Diff component styles
Introduced version-diff.css for custom styles of the Version Diff component and imported it in index.css. Updated related Blade view files to utilize new styles for improved layout, readability, and UX.
1 parent 904e2a4 commit e8c3c1b

File tree

7 files changed

+350
-37
lines changed

7 files changed

+350
-37
lines changed

‎resources/css/components/version-diff.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* Version Diff Component Styles */
2+
.version-diff {
3+
/* Base container styles are handled by Tailwind classes */
4+
}
5+
6+
.version-diff-content {
7+
padding: 1rem 1.5rem;
8+
}
9+
10+
.version-diff-items {
11+
/* Spacing and layout handled by Tailwind classes */
12+
}
13+
14+
.version-diff-item {
15+
position: relative;
16+
}
17+
18+
/* Nested content improvements */
19+
.version-diff-nested-content {
20+
position: relative;
21+
}
22+
23+
/* Hover effects for better UX */
24+
.version-diff-item:hover {
25+
background-color: rgba(0, 0, 0, 0.02);
26+
}
27+
28+
.dark .version-diff-item:hover {
29+
background-color: rgba(255, 255, 255, 0.02);
30+
}
31+
32+
/* Better text selection and readability */
33+
.version-diff-item-key {
34+
user-select: text;
35+
word-break: break-word;
36+
hyphens: auto;
37+
}
38+
39+
.version-diff-item-value {
40+
user-select: text;
41+
word-break: break-word;
42+
hyphens: auto;
43+
line-height: 1.5;
44+
}
45+
46+
/* Improved nested level indicators */
47+
.version-diff-items[class*="ml-4"] {
48+
position: relative;
49+
}
50+
51+
.version-diff-items[class*="ml-4"]::before {
52+
content: '';
53+
position: absolute;
54+
left: -1px;
55+
top: 0;
56+
bottom: 0;
57+
width: 2px;
58+
background: linear-gradient(to bottom,
59+
theme('colors.gray.200') 0%,
60+
theme('colors.gray.100') 100%);
61+
}
62+
63+
.dark .version-diff-items[class*="ml-4"]::before {
64+
background: linear-gradient(to bottom,
65+
theme('colors.gray.600') 0%,
66+
theme('colors.gray.700') 100%);
67+
}
68+
69+
/* Type badges */
70+
.version-diff-item-type {
71+
font-size: 0.75rem;
72+
font-weight: 500;
73+
letter-spacing: 0.025em;
74+
}
75+
76+
/* Responsive improvements */
77+
@media (max-width: 640px) {
78+
.version-diff-content {
79+
padding: 0.75rem 1rem;
80+
}
81+
82+
.version-diff-item-key,
83+
.version-diff-item-value {
84+
font-size: 0.875rem;
85+
}
86+
87+
.version-diff-items[class*="ml-4"] {
88+
margin-left: 1rem;
89+
padding-left: 1rem;
90+
}
91+
}
92+
93+
/* Print styles */
94+
@media print {
95+
.version-diff {
96+
border: 1px solid #e5e7eb;
97+
box-shadow: none;
98+
}
99+
100+
.version-diff-item:hover {
101+
background-color: transparent;
102+
}
103+
104+
button {
105+
display: none;
106+
}
107+
}

‎resources/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import './components/alert.css';
1212
@import './components/code-editor.css';
1313
@import './components/markdown-editor.css';
14+
@import './components/version-diff.css';
1415

1516
@import '../../vendor/solution-forest/inspirecms-support/resources/css/diff-viewer.css';
1617
@import '../../vendor/solution-forest/inspirecms-support/resources/dist/components/tree-node.css';

‎resources/dist/inspirecms.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/views/components/version-diff/index.blade.php‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,71 @@
1-
@props(['items' => [], 'heading' => null])
2-
<div {{ $attributes->class(['version-diff bg-white dark:bg-gray-900 dark:divide-white/10 divide-y overflow-hidden ring-1 ring-gray-950/5 dark:ring-white/10 rounded-xl shadow-xs']) }}>
1+
@props(['items' => [], 'heading' => null, 'itemsCollapsible' => false, 'defaultCollapsedLevel' => 1])
2+
<div {{ $attributes->class([
3+
'version-diff',
4+
'bg-white dark:bg-gray-900',
5+
'border border-gray-200 dark:border-gray-700',
6+
'rounded-xl shadow-sm',
7+
'overflow-hidden',
8+
'divide-y divide-gray-200 dark:divide-gray-700'
9+
]) }} role="region" aria-label="Version differences" @if($itemsCollapsible) x-data="versionDiffController()" @endif>
310
@if (isset($heading))
4-
<div class="flex items-center gap-4 gap-x-6 bg-gray-50 px-4 py-2 dark:bg-white/5 sm:px-6">
5-
<h3 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
6-
{{ $heading }}
7-
</h3>
11+
<div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-3 sm:px-6 border-b border-gray-200 dark:border-gray-700">
12+
<div class="flex items-center justify-between">
13+
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
14+
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
15+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
16+
</svg>
17+
{{ $heading }}
18+
</h3>
19+
20+
@if ($itemsCollapsible)
21+
<div class="flex items-center gap-1">
22+
<button
23+
type="button"
24+
x-on:click="expandAll()"
25+
class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
26+
title="Expand All"
27+
>
28+
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
29+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
30+
</svg>
31+
Expand All
32+
</button>
33+
<button
34+
type="button"
35+
x-on:click="collapseAll()"
36+
class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
37+
title="Collapse All"
38+
>
39+
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
40+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/>
41+
</svg>
42+
Collapse All
43+
</button>
44+
</div>
45+
@endif
46+
</div>
847
</div>
948
@endif
10-
@if (isset($items) && is_array($items) && count($items) > 0)
11-
<x-inspirecms::version-diff.items :items="$items"/>
12-
@else
13-
<p class="text-gray-500 text-lg px-3 py-4">{{ __('inspirecms::resources/content-version.content_history_detail.empty_state') }}</p>
14-
@endif
49+
50+
<div class="version-diff-content px-3 py-2 sm:px-4 sm:py-3">
51+
@if (isset($items) && is_array($items) && count($items) > 0)
52+
<x-inspirecms::version-diff.items
53+
:items="$items"
54+
:level="0"
55+
:itemsCollapsible="$itemsCollapsible"
56+
:defaultCollapsedLevel="$defaultCollapsedLevel"/>
57+
@else
58+
<div class="text-center py-8">
59+
<svg class="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
60+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
61+
</svg>
62+
<p class="mt-3 text-gray-500 dark:text-gray-400 text-sm font-medium">
63+
No differences to display
64+
</p>
65+
<p class="mt-1 text-gray-400 dark:text-gray-500 text-xs">
66+
The content versions appear to be identical
67+
</p>
68+
</div>
69+
@endif
70+
</div>
1571
</div>

‎resources/views/components/version-diff/item.blade.php‎

Lines changed: 142 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,144 @@
1-
@props(['key', 'value'])
2-
@use('Illuminate\View\ComponentAttributeBag')
1+
@props(['key', 'value', 'level' => 0, 'itemsCollapsible' => false, 'defaultCollapsedLevel' => 1])
32

4-
<div {{
5-
$attributes
6-
->grid(['default' => 3, 'md' => 5])
7-
->merge(['class' => 'version-diff-item'])
8-
}}
9-
>
10-
<div {{ (new ComponentAttributeBag)->gridColumn(['default' => 1, 'md' => 1])->class(['version-diff-item-title font-semibold']) }}>{{ $key }}</div>
11-
<div {{ (new ComponentAttributeBag)->gridColumn(['default' => 2, 'md' => 4])->class(['testttt']) }} >
12-
@if (is_array($value))
13-
<x-inspirecms::version-diff.items :items="$value"/>
14-
@else
15-
{!! $value !!}
16-
@endif
17-
</div>
3+
<div {{ $attributes->merge(['class' => 'version-diff-item']) }}>
4+
@if (is_array($value))
5+
{{-- Array/Object display --}}
6+
@php
7+
$isCollapsible = $itemsCollapsible && count($value) > 0;
8+
$shouldStartCollapsed = $isCollapsible && ($level >= $defaultCollapsedLevel);
9+
@endphp
10+
11+
<div class="space-y-1" @if($isCollapsible) x-data="{ expanded: {{ $shouldStartCollapsed ? 'false' : 'true' }} }" data-collapsible-item="true" @endif>
12+
<div class="flex items-center justify-between">
13+
<div class="flex items-center gap-2">
14+
@if ($isCollapsible)
15+
<button
16+
type="button"
17+
@click="expanded = !expanded"
18+
class="flex-shrink-0 p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
19+
:aria-expanded="expanded"
20+
aria-label="Toggle section"
21+
>
22+
<svg
23+
class="w-3 h-3 text-gray-500 dark:text-gray-400 transition-transform duration-200"
24+
:class="{ 'rotate-90': expanded }"
25+
fill="none"
26+
stroke="currentColor"
27+
viewBox="0 0 24 24"
28+
>
29+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
30+
</svg>
31+
</button>
32+
@endif
33+
34+
<div @class([
35+
'version-diff-item-key',
36+
'font-semibold text-gray-800 dark:text-gray-200',
37+
'text-sm' => $level > 0,
38+
'text-base' => $level === 0,
39+
])>
40+
{{ $key }}
41+
</div>
42+
<div @class([
43+
'version-diff-item-type',
44+
'text-xs px-2.5 py-1 rounded-full font-medium',
45+
'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
46+
])>
47+
@if (count($value) === 0)
48+
Empty {{ is_array($value) ? 'array' : 'object' }}
49+
@else
50+
{{ count($value) }} {{ count($value) === 1 ? 'item' : 'items' }}
51+
@endif
52+
</div>
53+
</div>
54+
55+
@if (count($value) > 5)
56+
<div class="text-xs text-gray-500 dark:text-gray-400">
57+
{{ count($value) }} entries
58+
</div>
59+
@endif
60+
</div>
61+
62+
@if (count($value) > 0)
63+
<div
64+
@class([
65+
'version-diff-nested-content',
66+
])
67+
@if($isCollapsible)
68+
:class="{ 'hidden': !expanded }"
69+
@endif
70+
>
71+
<x-inspirecms::version-diff.items
72+
:items="$value"
73+
:level="$level + 1"
74+
:itemsCollapsible="$itemsCollapsible"
75+
:defaultCollapsedLevel="$defaultCollapsedLevel"
76+
/>
77+
</div>
78+
@endif
79+
</div>
80+
@else
81+
{{-- Simple key-value display --}}
82+
<div class="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-3">
83+
<div @class([
84+
'version-diff-item-key',
85+
'font-medium text-gray-700 dark:text-gray-300',
86+
'text-sm' => $level > 0,
87+
'text-base' => $level === 0,
88+
'flex-shrink-0',
89+
'min-w-0',
90+
'sm:w-1/3 lg:w-1/4',
91+
])>
92+
<span class="break-words">{{ $key }}</span>
93+
</div>
94+
95+
<div @class([
96+
'version-diff-item-value',
97+
'text-gray-900 dark:text-gray-100',
98+
'text-sm' => $level > 0,
99+
'text-base' => $level === 0,
100+
'flex-1',
101+
'min-w-0',
102+
// 'break-words',
103+
// 'whitespace-pre-wrap',
104+
])>
105+
@if (is_string($value) && strlen($value) > 500)
106+
<div x-data="{ expanded: false }" class="space-y-2">
107+
<div x-show="!expanded">
108+
<span>{{ substr($value, 0, 500) }}...</span>
109+
<button
110+
@click="expanded = true"
111+
class="ml-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm underline"
112+
>
113+
Show more
114+
</button>
115+
</div>
116+
<div x-show="expanded" x-cloak>
117+
<span>{!! $value !!}</span>
118+
<button
119+
@click="expanded = false"
120+
class="ml-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm underline"
121+
>
122+
Show less
123+
</button>
124+
</div>
125+
</div>
126+
@elseif (is_null($value))
127+
<span class="italic text-gray-400 dark:text-gray-500">null</span>
128+
@elseif (is_bool($value))
129+
<span @class([
130+
'font-medium',
131+
'text-green-600 dark:text-green-400' => $value,
132+
'text-red-600 dark:text-red-400' => !$value,
133+
])>
134+
{{ $value ? 'true' : 'false' }}
135+
</span>
136+
@elseif (is_numeric($value))
137+
<span class="font-mono text-purple-600 dark:text-purple-400">{{ $value }}</span>
138+
@else
139+
<span>{!! $value !!}</span>
140+
@endif
141+
</div>
142+
</div>
143+
@endif
18144
</div>

0 commit comments

Comments
 (0)