forked from XiaoLFeng/XF_Index
AddFeature：友链颜色显示和Tooltips显示
添加了对于暗色的支持模式 添加了编辑界面颜色标记 添加了编辑窗口的颜色显示 Signed-off-by: XiaoLFeng <gm@x-lf.cn>
This commit is contained in:
parent
1963214d14
commit
8a80bcdfdc
|
|
@ -39,10 +39,14 @@ public function ViewEdit(Request $request, $userId): Application|Factory|View|Re
|
|||
->orderBy('sort')
|
||||
->get()
|
||||
->toArray();
|
||||
$this->data['blogColor'] = DB::table('blog_color')
|
||||
$blogColor = DB::table('blog_color')
|
||||
->orderBy('id')
|
||||
->get()
|
||||
->toArray();
|
||||
for ($i = 0; !empty($blogColor[$i]->id); $i++) {
|
||||
$blogColor[$i]->colorDarkType = str_replace('dark:', '', $blogColor[$i]->colorDarkType);
|
||||
}
|
||||
$this->data['blogColor'] = $blogColor;
|
||||
// 没有查询到执行删除
|
||||
if ($this->data['blog'][0] == null) return Response::redirectTo(route('console.friends-link.list'));
|
||||
return view('console.friends-link.edit', $this->data);
|
||||
|
|
@ -86,6 +90,15 @@ protected function ViewList(Request $request): Factory|View|Application|Redirect
|
|||
$this->data['blog'] = DB::select("SELECT * FROM xf_index.blog_link WHERE blogName LIKE '%$request->search%' OR blogUrl LIKE '%$request->search%' ORDER BY id");
|
||||
}
|
||||
$this->data = array_merge($this->data, $dataMarge);
|
||||
$blogColor = DB::table('blog_color')
|
||||
->orderBy('id')
|
||||
->get()
|
||||
->toArray();
|
||||
for ($i = 0; !empty($blogColor[$i]->id); $i++) {
|
||||
$blogColor[$i]->colorLightType = str_replace('border-', 'ring-', $blogColor[$i]->colorLightType);
|
||||
$blogColor[$i]->colorDarkType = str_replace('border-', 'ring-', $blogColor[$i]->colorDarkType);
|
||||
}
|
||||
$this->data['blogColor'] = $blogColor;
|
||||
return view('console.friends-link.list', $this->data);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,9 +33,28 @@ class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg s
|
|||
<div class="grid grid-cols-10 gap-4 mb-4">
|
||||
<div class="col-span-10 lg:hidden gird grid-cols-1">
|
||||
<div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1">
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b class="text-black dark:text-white"></b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b class="text-black dark:text-white"></b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b class="text-black dark:text-white"></b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b
|
||||
class="text-black dark:text-white"></b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b
|
||||
class="text-black dark:text-white"></b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b
|
||||
class="text-black dark:text-white"></b> 条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block lg:hidden col-span-10">
|
||||
<div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1">
|
||||
<div class="p-2 xl:p-8 grid grid-cols-2">
|
||||
<button type="submit" class="m-2 text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-blue-800">
|
||||
<i class="bi bi-send"></i>
|
||||
<span class="ps-1">提交修改</span>
|
||||
</button>
|
||||
<button type="submit" class="m-2 text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-blue-800">
|
||||
<i class="bi bi-trash3"></i>
|
||||
<span class="ps-1">删除友链</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-10 lg:col-span-7 items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow">
|
||||
|
|
@ -186,26 +205,34 @@ class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 s
|
|||
</div>
|
||||
<div class="sm:hidden lg:block col-span-3">
|
||||
<div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1 mb-4">
|
||||
<div class="p-8 grid grid-cols-2">
|
||||
<button type="submit" class="m-2 text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-blue-800">
|
||||
<div class="p-2 xl:p-8 grid grid-cols-2">
|
||||
<button type="submit" class="m-2 text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-blue-800">
|
||||
<i class="bi bi-send"></i>
|
||||
<span class="ps-1">提交修改</span>
|
||||
</button>
|
||||
<button type="submit" class="m-2 text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-blue-800">
|
||||
<button type="submit" class="m-2 text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-blue-800">
|
||||
<i class="bi bi-trash3"></i>
|
||||
<span class="ps-1">删除友链</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1 mb-4">
|
||||
<div class="p-8 grid grid-cols-1">
|
||||
<div class="p-2 md:p-6 xl:p-8 grid grid-cols-1">
|
||||
<div class="text-lg font-bold mb-3">
|
||||
<i class="bi bi-eye"></i>
|
||||
<span class="ps-1">参考样式</span>
|
||||
</div>
|
||||
<div class="max-w-4xl mb-3">
|
||||
<div class="max-w-4xl mb-3" data-tooltip-target="friend-{{ $blog[0]->id }}">
|
||||
<div id="friend-{{ $blog[0]->id }}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium
|
||||
text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
||||
{{ $blog[0]->blogDescription }}
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
<div
|
||||
class="flex p-2 hover:bg-gray-100 bg-white border border-grey-200 rounded-lg shadow-lg sm:p-4 dark:bg-gray-800 dark:border-gray-700 grid-cols-2 m-1">
|
||||
class="flex p-2 hover:bg-gray-100 bg-white border-2 {{ $blogColor[$blog[0]->blogSetColor-1]->colorLightType }} rounded-lg
|
||||
shadow-lg sm:p-4 grid-cols-2 m-1">
|
||||
<img id="Lazy"
|
||||
class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 sm:me-4"
|
||||
src="{{ $blog[0]->blogIcon }}" alt="Bordered avatar">
|
||||
|
|
@ -215,9 +242,15 @@ class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 s
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-4xl">
|
||||
<div class="max-w-4xl" data-tooltip-target="friend-{{ $blog[0]->id }}">
|
||||
<div id="friend-{{ $blog[0]->id }}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium
|
||||
text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
||||
{{ $blog[0]->blogDescription }}
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
<div
|
||||
class="flex p-2 hover:bg-gray-700 border rounded-lg shadow-lg sm:p-4 bg-gray-800 border-gray-700 grid-cols-2 m-1">
|
||||
class="flex p-2 hover:bg-gray-700 border-2 rounded-lg shadow-lg sm:p-4 bg-gray-800
|
||||
{{ $blogColor[$blog[0]->blogSetColor-1]->colorDarkType }} grid-cols-2 m-1">
|
||||
<img id="LazyDark"
|
||||
class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 sm:me-4"
|
||||
src="{{ $blog[0]->blogIcon }}" alt="Bordered avatar">
|
||||
|
|
|
|||
|
|
@ -33,20 +33,27 @@ class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg s
|
|||
<div class="grid grid-cols-10 gap-4 mb-4">
|
||||
<div class="col-span-10 lg:hidden gird grid-cols-1">
|
||||
<div class="items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow grid grid-cols-1">
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b class="text-black dark:text-white">{{ $blogFriendsTotal }}</b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b class="text-black dark:text-white">{{ $blogFriendsBest }}</b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b class="text-black dark:text-white">{{ $blogFriendsCheck }}</b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pt-3"><i class="bi bi-person-check"></i> 当前友链 <b
|
||||
class="text-black dark:text-white">{{ $blogFriendsTotal }}</b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500"><i class="bi bi-person-hearts"></i> 超级友链 <b
|
||||
class="text-black dark:text-white">{{ $blogFriendsBest }}</b> 条</p>
|
||||
<p class="text-2xl text-center text-gray-400 dark:text-gray-500 pb-3"><i class="bi bi-person-check-fill"></i> 待审友链 <b
|
||||
class="text-black dark:text-white">{{ $blogFriendsCheck }}</b> 条</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-10 lg:col-span-7 items-center justify-center rounded bg-gray-50 dark:bg-gray-800 shadow">
|
||||
<div class="px-10 py-5">
|
||||
@if(!empty($blog) && empty($request->search))
|
||||
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
@foreach($blog as $blogValue)
|
||||
@foreach($blog as $blogValue)
|
||||
<li class="py-3 sm:py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img id="Lazy" class="w-10 h-10 rounded-full" src="{{ asset('images/avatar.png') }}" data-src="{{ $blogValue->blogIcon }}" alt="Neil image">
|
||||
<img id="Lazy"
|
||||
class="w-10 h-10 p-1 rounded-full ring-2 {{ $blogColor[$blogValue->blogSetColor-1]->colorLightType }}
|
||||
{{ $blogColor[$blogValue->blogSetColor-1]->colorDarkType }} sm:me-4"
|
||||
src="{{ asset('images/avatar.png') }}" data-src="{{ $blogValue->blogIcon }}"
|
||||
alt="Bordered avatar">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-bold text-gray-900 truncate dark:text-white">
|
||||
|
|
@ -57,21 +64,27 @@ class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg s
|
|||
</p>
|
||||
</div>
|
||||
<a href="?" type="button" class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
|
||||
<a href="{{ route('console.friends-link.edit',$blogValue->id) }}" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
<a href="{{ route('console.friends-link.edit',$blogValue->id) }}" type="button"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
<i class="bi bi-pencil"></i>
|
||||
<span class="ps-1">编辑</span>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</ul>
|
||||
<div class="justify-center items-center text-center">
|
||||
<ul class="inline-flex items-center -space-x-px py-3">
|
||||
<li>
|
||||
<a @if($request->page != 0)href="{{ route('console.friends-link.list','page='.$request->page-1) }}" @endif class="block px-3 py-2 ml-0 leading-tight text-gray-500 border border-gray-300 @if($request->page != 0)bg-white @else bg-gray-100 @endif rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
||||
<a @if($request->page != 0)href="{{ route('console.friends-link.list','page='.$request->page-1) }}"
|
||||
@endif class="block px-3 py-2 ml-0 leading-tight text-gray-500 border border-gray-300 @if($request->page != 0)bg-white @else bg-gray-100 @endif rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
||||
<span class="sr-only">Previous</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
@if($blogCount == 0)
|
||||
|
|
|
|||
|
|
@ -38,9 +38,8 @@ class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translat
|
|||
</div>
|
||||
<div
|
||||
class="flex p-2 hover:bg-gray-100 bg-white border-2 {{ $blogColor[$valueLink->blogSetColor-1]->colorLightType }} rounded-lg
|
||||
shadow-lg sm:p-4
|
||||
dark:bg-gray-800
|
||||
dark:hover:bg-gray-700 dark:border-gray-700 grid-cols-2 m-1">
|
||||
shadow-lg sm:p-4 dark:bg-gray-800 dark:hover:bg-gray-700 {{ $blogColor[$valueLink->blogSetColor-1]->colorDarkType }}
|
||||
grid-cols-2 m-1">
|
||||
<img id="Lazy"
|
||||
class="w-16 h-16 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500 me-2 sm:me-4"
|
||||
src="{{ asset('images/avatar.png') }}" data-src="{{ $valueLink->blogIcon }}"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user