Skip to content

Commit

Permalink
更新样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangxiaoqi-tangxiao
tangxiaoqi-tangxiao committed Oct 9, 2024
1 parent af85a1c commit 29dfbda
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 28 deletions.
22 changes: 12 additions & 10 deletions Plugin/assets/default-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions Plugin/assets/empty.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 14 additions & 13 deletions Plugin/content/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ function createCard(link) {

const cardIcon = document.createElement('img');

cardIcon.src = 'assets/empty.svg';
db.getData("Icons", id).then((data) => {
if (data) {
cardIcon.src = data.base64;
Expand Down Expand Up @@ -679,7 +680,7 @@ function ContextMenu(e, link) {
const editCancel = document.getElementById('editCancel');
const editSave = document.getElementById('editSave');
const localPreviewImage = document.getElementById('localPreviewImage');
const icon = [...document.getElementsByClassName('icon')];
const iconBorder = [...document.getElementsByClassName('iconBorder')];
const PreviewImage = document.getElementById('PreviewImage');
const refreshIcon = document.getElementById("refreshIcon");
const defaultIcon = document.getElementById("defaultIcon");
Expand All @@ -692,17 +693,17 @@ function ContextMenu(e, link) {
if (data) {
defaultImage.src = data.base64;
defaultIcon.classList.remove("hidden");
icon.forEach((item) => {
iconBorder.forEach((item) => {
item.classList.remove("border-blue-400");
});
icon[0].classList.add("border-blue-400");
iconBorder[0].classList.add("border-blue-400");
} else {
defaultIcon.classList.add("hidden");
//默认官方图标选中
icon.forEach((item) => {
iconBorder.forEach((item) => {
item.classList.remove("border-blue-400");
});
icon[1].classList.add("border-blue-400");
iconBorder[1].classList.add("border-blue-400");
}
});
//删除本地上传图片
Expand Down Expand Up @@ -806,7 +807,7 @@ function BookmarkEditInitialize() {
const websiteName = document.getElementById('websiteName');
// const iconName = document.getElementById('iconName');
// const iconName2 = document.getElementById('iconName2');
const icons = [...document.getElementsByClassName('icon')];
const iconBorders = [...document.getElementsByClassName('iconBorder')];
const imageInput = document.getElementById('imageInput');
const localPreviewImage = document.getElementById('localPreviewImage');
const localPreviewSvg = document.getElementById('localPreviewSvg');
Expand Down Expand Up @@ -838,10 +839,10 @@ function BookmarkEditInitialize() {
websiteLink.oninput = debouncedSearch;

//选项卡切换
icons.forEach((item) => {
iconBorders.forEach((item) => {
item.onclick = () => {
icons.forEach((icon) => {
icon.classList.remove('border-blue-400');
iconBorders.forEach((Border) => {
Border.classList.remove('border-blue-400');
});
item.classList.add('border-blue-400');

Expand Down Expand Up @@ -905,7 +906,7 @@ function SaveBookmark(id, element) {
const PreviewImageError = document.getElementById('PreviewImageError');
const localPreviewImage = document.getElementById('localPreviewImage');

const icon = document.querySelector('.icon.border-blue-400');
const iconBorder = document.querySelector('.iconBorder.border-blue-400');

const img = element.querySelector('img');
const name = element.querySelector('h2');
Expand All @@ -925,7 +926,7 @@ function SaveBookmark(id, element) {
websiteNameError.classList.add('hidden');
}

if (localPreviewImage.src === location.href && icon.classList.contains('image')) {
if (localPreviewImage.src === location.href && iconBorder.classList.contains('image')) {
PreviewImageError.classList.remove('hidden');
return;
} else {
Expand All @@ -949,7 +950,7 @@ function SaveBookmark(id, element) {
linkText.textContent = websiteLink.value;
name.textContent = websiteName.value;

if (icon.classList.contains('image')) {//本地图片
if (iconBorder.classList.contains('image')) {//本地图片
img.src = localPreviewImage.src;
if (localPreviewImage.src != location.href) {
db.getData("Icons", id).then((data) => {
Expand All @@ -960,7 +961,7 @@ function SaveBookmark(id, element) {
}
});
}
} else if (!icon.classList.contains('default')) {//网络图片
} else if (!iconBorder.classList.contains('default')) {//网络图片
img.src = PreviewImage.src;
if (PreviewImage.src != location.href) {
db.getData("Icons", id).then((data) => {
Expand Down
11 changes: 6 additions & 5 deletions Plugin/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,14 +237,14 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
<div class="flex">
<div id="defaultIcon" class="hidden flex flex-col justify-center items-center mr-2">
<div
class="icon default cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
class="iconBorder default cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
<img id="defaultImage" class="w-full h-full rounded-lg" src="" alt="" srcset="">
</div>
<span class="dark:text-gray-400">默认</span>
</div>
<div class="flex flex-col justify-center items-center mr-2">
<div id="refreshIcon"
class="icon cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
class="iconBorder cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
<img id="PreviewImage" class="hidden w-full h-full rounded-lg" src="" alt="" srcset="">
<svg id="PreviewSvg" class="w-10 h-10" viewBox="0 0 172 216" fill="none"
xmlns="http://www.w3.org/2000/svg">
Expand All @@ -258,7 +258,7 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
</div>
<div class="flex flex-col justify-center items-center mr-2">
<div
class="icon image cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
class="iconBorder image cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
<img id="localPreviewImage" class="hidden w-full h-full rounded-lg" src="" alt="" srcset="">
<svg id="localPreviewSvg" class="w-10 h-10 text-gray-400 dark:text-gray-500"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
Expand All @@ -279,9 +279,10 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
</div>
<!-- 按钮居中 -->
<div class="flex justify-center mt-4 mb-2">
<button id="editSave" class="bg-blue-500 hover:bg-blue-400 text-white rounded-md px-4 py-2 mr-2">保存</button>
<button id="editSave"
class="bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-500 text-white dark:text-gray-300 rounded-md px-4 py-2 mr-2">保存</button>
<button id="editCancel"
class="bg-gray-300 dark:hover:bg-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-white rounded-md px-4 py-2">取消</button>
class="bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-200 dark:text-gray-300 rounded-md px-4 py-2">取消</button>
</div>
</div>
<input type="file" id="imageInput" accept="image/*" style="display: none;" />
Expand Down

0 comments on commit 29dfbda

Please sign in to comment.