refactor(frontend): update WeCom icon and styles in IM components
Replaced the WeCom SVG icon with a new design and updated the associated styles in the IMChannelPanel and SessionSourceFilter components to reflect the new color scheme. Adjusted layout properties for better responsiveness and visual consistency across the application.
This commit is contained in:
wizardchen
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#07c160" d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12S5.925 1 12 1m3.52 15.49a.35.35 0 0 0-.24.1c-.14.13-.16.34.02.53l.07.07c.44.44.74.99.85 1.57c0 .02.04.23.04.23c.05.19.15.37.29.5c.21.21.51.34.82.34c.3 0 .59-.12.8-.33c.44-.44.44-1.16 0-1.61c-.15-.15-.34-.26-.53-.3l-.15-.03c-.61-.11-1.17-.41-1.62-.86c-.03-.03-.07-.07-.1-.11c-.06-.074-.16-.1-.25-.1M11 4.75c-2.117 0-4.264.77-5.75 2.31C4.111 8.246 3.5 9.72 3.5 11.24c0 1.06.3 2.12.88 3.06c.47.695.993 1.371 1.66 1.89l-.384 1.624a.6.6 0 0 0 .856.673L8.64 17.41c.53.166 1.08.234 1.63.3a8.3 8.3 0 0 0 1.7-.03l.38-.05q.283-.046.564-.112a2.33 2.33 0 0 1-.92-1.605l-.254.037c-.62.067-1.232.03-1.85-.04c-.43-.057-.838-.185-1.25-.31l-1.02.5l.23-.67l-.74-.6c-.513-.401-.917-.934-1.28-1.47c-.4-.65-.61-1.38-.61-2.11c0-1.08.456-2.119 1.26-2.97c1.158-1.198 2.854-1.78 4.5-1.78c1.54 0 3.108.513 4.24 1.58c.365.365.707.75.95 1.21c.177.354.338.722.424 1.107a2.34 2.34 0 0 1 1.811.123c-.075-.716-.33-1.4-.665-2.04c-.329-.62-.776-1.155-1.27-1.65c-1.468-1.38-3.471-2.08-5.47-2.08m9.37 9.77a1.136 1.136 0 0 0-1.1.86l-.03.15a3.1 3.1 0 0 1-.86 1.63c-.04.03-.07.07-.11.1c-.14.13-.14.35 0 .49c.07.06.17.1.26.1h.01c.07 0 .15-.02.26-.13l.07-.07c.44-.44.99-.74 1.57-.85c.023 0 .227-.04.23-.04c.2-.06.37-.16.5-.3c.44-.44.44-1.17 0-1.61c-.21-.21-.5-.33-.8-.33m-4.21-1.07c-.08 0-.16.03-.27.14l-.07.07c-.44.44-.99.74-1.57.85c-.02 0-.23.04-.23.04c-.2.06-.37.16-.5.3c-.44.44-.44 1.17 0 1.61c.21.21.51.34.82.34c.3 0 .59-.12.8-.33c.15-.16.25-.34.29-.53a.4.4 0 0 0 .03-.16c.11-.61.41-1.18.86-1.63c.03-.03.06-.06.1-.09c.146-.115.13-.36 0-.49a.34.34 0 0 0-.26-.12m1.18-1.97c-.3 0-.59.12-.8.33c-.44.44-.44 1.16 0 1.61c.15.15.34.26.53.3c.054.006.144.029.15.03c.61.12 1.17.41 1.62.86c.03.03.07.07.1.11c.08.08.16.1.25.1c.1 0 .16-.04.23-.11c.12-.13.14-.32-.02-.52l-.08-.08c-.44-.44-.74-.99-.85-1.57c0-.02-.04-.23-.04-.23c-.05-.19-.15-.37-.29-.5c-.21-.21-.5-.33-.8-.33"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#0082EF" fill-rule="evenodd" d="M909.784 729.585a135.9 135.9 0 0 0-47.042 19.049a114.24 114.24 0 0 1-51.41 31.075c2.613-17.554 11.313-33.577 24.455-45.418a169.3 169.3 0 0 0 23.409-55.017c-.061-27.838 22.44-50.459 50.265-50.534c27.827-.076 50.45 22.423 50.539 50.26c.089 27.839-22.39 50.482-50.215 50.585zM817.568 608.83a168.8 168.8 0 0 0-54.808-23.68c-27.836 0-50.402-22.575-50.402-50.423s22.566-50.423 50.402-50.423s50.402 22.575 50.402 50.423a137.5 137.5 0 0 0 18.817 47.211a114.8 114.8 0 0 1 30.764 51.656a76.08 76.08 0 0 1-45.026-24.763h-.186zm-83.033-177.713C719.34 303.789 587.548 204.026 428.09 204.026c-169.874 0-308.088 113.097-308.088 252.19c2.72 78.1 43.941 149.778 110.063 191.385a311 311 0 0 0 33.602 21.588l-13.664 54.569c4.928 2.316 9.706 4.78 14.746 6.91l68.996-34.512c10.08 2.615 20.683 4.295 31.21 6.088c6.721 1.195 13.442 2.428 20.35 3.25a354.8 354.8 0 0 0 128.805-7.396a249 249 0 0 0 10.154 55.055a425.6 425.6 0 0 1-96.175 11.242a418 418 0 0 1-86.392-9.524l-125.186 62.526a27.62 27.62 0 0 1-29.98-3.137a28.02 28.02 0 0 1-9.67-28.611l22.401-90.239C117.176 643.186 66.463 553.506 64 456.216C64 285.973 227.004 148 428.09 148c190.93 0 347.29 124.527 362.521 282.818a245 245 0 0 0-26.47-2.614c-9.893.374-19.787 1.307-29.607 2.876zM618.237 629.934c16.764-3.362 32.706-9.786 47.042-19.049a114.24 114.24 0 0 1 51.447-31.001a76.47 76.47 0 0 1-24.491 45.344c-11.014 16.807-18.929 35.483-23.409 55.054c.041 27.833-22.468 50.435-50.29 50.497s-50.43-22.44-50.514-50.273c-.082-27.833 22.393-50.469 50.215-50.572m90.798 121.314c16.652 11.168 35.17 19.236 54.659 23.904c20.386 0 38.764 12.286 46.565 31.127s3.49 40.53-10.926 54.95a50.38 50.38 0 0 1-54.927 10.931c-18.834-7.804-31.114-26.19-31.114-46.585a136.7 136.7 0 0 0-18.668-47.285a114.7 114.7 0 0 1-30.54-51.805a76 76 0 0 1 44.951 25.062z"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -978,8 +978,8 @@ onUnmounted(() => {
|
||||
line-height: 18px;
|
||||
|
||||
&.wecom {
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
color: #07c160;
|
||||
background: rgba(0, 130, 239, 0.08);
|
||||
color: #0082ef;
|
||||
}
|
||||
|
||||
&.feishu {
|
||||
|
||||
@@ -26,7 +26,12 @@
|
||||
<t-icon v-else :name="iconFor(item)" class="session-source-filter__icon" size="14px" />
|
||||
<span class="session-source-filter__option-label" :title="item.label">{{ item.label }}</span>
|
||||
</span>
|
||||
<t-icon v-if="item.value === current" name="check" class="session-source-filter__check" size="13px" />
|
||||
<t-icon
|
||||
name="check"
|
||||
class="session-source-filter__check"
|
||||
:class="{ 'session-source-filter__check--visible': item.value === current }"
|
||||
size="13px"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
@@ -78,17 +83,27 @@ const updatePanelPosition = (): void => {
|
||||
const trigger = triggerRef.value
|
||||
if (!trigger) return
|
||||
const rect = trigger.getBoundingClientRect()
|
||||
const width = Math.max(rect.width, 168)
|
||||
const left = props.inline
|
||||
? Math.max(VIEWPORT_MARGIN, rect.right - width)
|
||||
: Math.max(
|
||||
VIEWPORT_MARGIN,
|
||||
Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN),
|
||||
)
|
||||
if (props.inline) {
|
||||
panelStyle.value = {
|
||||
top: `${rect.bottom + PANEL_GAP}px`,
|
||||
right: `${Math.max(VIEWPORT_MARGIN, window.innerWidth - rect.right)}px`,
|
||||
left: 'auto',
|
||||
}
|
||||
return
|
||||
}
|
||||
const panelWidth = Math.min(
|
||||
Math.max(rect.width, 108),
|
||||
window.innerWidth - VIEWPORT_MARGIN * 2,
|
||||
)
|
||||
const left = Math.max(
|
||||
VIEWPORT_MARGIN,
|
||||
Math.min(rect.left, window.innerWidth - panelWidth - VIEWPORT_MARGIN),
|
||||
)
|
||||
panelStyle.value = {
|
||||
top: `${rect.bottom + PANEL_GAP}px`,
|
||||
left: `${left}px`,
|
||||
width: `${width}px`,
|
||||
right: 'auto',
|
||||
minWidth: `${panelWidth}px`,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,7 +204,7 @@ onBeforeUnmount(() => {
|
||||
.session-source-filter__option-leading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -217,13 +232,12 @@ onBeforeUnmount(() => {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
object-fit: contain;
|
||||
opacity: 0.72;
|
||||
filter: grayscale(0.15);
|
||||
opacity: 0.82;
|
||||
|
||||
.session-source-filter--inline & {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: 0.55;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -257,29 +271,33 @@ onBeforeUnmount(() => {
|
||||
.session-source-filter__panel {
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
padding: 4px;
|
||||
width: max-content;
|
||||
min-width: 108px;
|
||||
max-width: min(200px, calc(100vw - 16px));
|
||||
padding: 3px;
|
||||
border: 1px solid var(--td-component-stroke);
|
||||
border-radius: 8px;
|
||||
border-radius: 7px;
|
||||
background: var(--td-bg-color-sidebar, var(--td-bg-color-container));
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.session-source-filter__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 5px 8px;
|
||||
min-height: 28px;
|
||||
padding: 4px 6px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
color: var(--td-text-color-primary);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
font-family: var(--app-font-family);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--td-bg-color-container-hover);
|
||||
@@ -294,20 +312,28 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.session-source-filter__logo {
|
||||
opacity: 0.9;
|
||||
opacity: 0.92;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-source-filter__option-label {
|
||||
font-size: 13px;
|
||||
font-weight: 430;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.session-source-filter__check {
|
||||
flex: 0 0 auto;
|
||||
color: var(--td-text-color-secondary);
|
||||
flex: 0 0 13px;
|
||||
width: 13px;
|
||||
margin-left: 2px;
|
||||
color: var(--td-text-color-placeholder);
|
||||
font-size: 12px !important;
|
||||
visibility: hidden;
|
||||
|
||||
&--visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user