Skip to content

Commit

Permalink
UI Improvements (#2067)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TaraRostami
TaraRostami committed Mar 20, 2024
1 parent a7418d9 commit 0bec29f
Show file tree
Hide file tree
Showing 17 changed files with 1,922 additions and 1,712 deletions.
Binary file modified media/3X-UI.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion sub/subJsonService.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ func NewSubJsonService(fragment string, mux string, rules string, subService *Su
defaultRules, _ := routing["rules"].([]interface{})
json.Unmarshal([]byte(rules), &newRules)
defaultRules = append(newRules, defaultRules...)
fmt.Printf("routing: %#v\n\nRules: %#v\n\n", routing, defaultRules)
routing["rules"] = defaultRules
configJson["routing"] = routing
}
Expand Down
159 changes: 148 additions & 11 deletions web/assets/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
--dark-color-codemirror-line-selection: rgba(0, 135, 113, 0.3);
--dark-color-login-background: var(--dark-color-background);
--dark-color-login-wave: var(--dark-color-surface-200);
--dark-color-tooltip: rgba(61, 76, 104, 0.9);
}

html[data-theme='ultra-dark'] {
Expand Down Expand Up @@ -69,6 +70,7 @@ html[data-theme='ultra-dark'] {
--dark-color-codemirror-line-selection: rgba(85, 85, 85, 0.4);
--dark-color-login-background: #0a2227;
--dark-color-login-wave: #0f2d32;
--dark-color-tooltip: rgba(88, 93, 100, 0.9);
.ant-dropdown-menu-dark {
background-color: var(--dark-color-surface-500);
}
Expand Down Expand Up @@ -143,10 +145,13 @@ html {
style attribute {
text-align: center;
}
.ant-table-tbody > tr > td,

.ant-table-thead > tr > th {
padding: 16px 8px;
}

.ant-table-tbody > tr > td {
padding: 12px 8px;
overflow-wrap: break-word;
}
.ant-table-thead > tr > th {
color: rgba(0, 0, 0, 0.85);
Expand All @@ -155,10 +160,6 @@ style attribute {
border-bottom: 1px solid #e8e8e8;
transition: background 0.3s ease;
}
.ant-table-row-cell-break-word {
word-wrap: break-word;
word-break: break-word;
}

.ant-table table {
width: 100%;
Expand Down Expand Up @@ -649,11 +650,17 @@ style attribute {
.dark .ant-modal-footer,
.dark .ant-collapse-content,
.dark .ant-calendar-footer,
.dark .ant-divider-horizontal.ant-divider-with-text-left:before,
.dark .ant-divider-horizontal.ant-divider-with-text-left:after,
.dark .ant-divider-horizontal.ant-divider-with-text-center:before,
.dark .ant-divider-horizontal.ant-divider-with-text-center:after {
border-top-color: var(--dark-color-surface-300);
}

.ant-divider-horizontal.ant-divider-with-text-left:before {
width: 10%;
}

.dark .ant-progress-text,
.dark .ant-card-head,
.dark .ant-form,
Expand Down Expand Up @@ -712,7 +719,6 @@ style attribute {
.dark .ant-select-dropdown,
.dark .ant-select-dropdown li,
.dark .ant-select-dropdown-menu-item,
.dark .ant-divider:not(.ant-divider-with-text-center),
.dark .client-table-header,
.dark .ant-select-selection--multiple .ant-select-selection__choice,
.dark .ant-calendar-time-picker-inner {
Expand Down Expand Up @@ -948,10 +954,15 @@ style attribute {
background-color: #fff;
}

.ant-checkbox-wrapper,
.ant-input-group-addon,
.ant-tabs-tab,
.ant-input::placeholder,
.ant-collapse-header,
.ant-menu,
.ant-radio-button-wrapper {
user-select: none;
-webkit-user-select: none;
user-select: none;
}

.ant-calendar-date,
Expand Down Expand Up @@ -1065,6 +1076,7 @@ li.ant-select-dropdown-menu-item:empty:after {
color: rgba(255, 255, 255, 0.35);
}

.dark .ant-divider:not(.ant-divider-with-text-center, .ant-divider-with-text-left, .ant-divider-with-text-right),
.ant-dropdown-menu-dark,
.dark .ant-calendar-year-panel-year:hover,
.dark .ant-calendar-month-panel-month:hover,
Expand Down Expand Up @@ -1216,15 +1228,39 @@ li.ant-select-dropdown-menu-item:empty:after {
overflow-y: auto;
}

.qr-bg {
.qr-cv {
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0.8;
transition: all 0.3s;
}

.qr-cv:hover {
opacity: 1;
}

.qr-cv:active {
transform: scale(0.98);
transition: all 0.1s;
}

.dark .qr-cv {
filter: invert(1);
}

.qr-bg {
background-color: #ffffff;
display: flex;
justify-content: center;
align-content: center;
padding: 0.5rem;
padding: 0.8rem;
border-radius: 1rem;
border: solid 1px #e8e8e8;
}

.dark .qr-bg {
background-color: var(--dark-color-surface-700);
border-color: var(--dark-color-surface-300);
}

.ant-input-group-addon:not(:first-child):not(:last-child) {
Expand Down Expand Up @@ -1276,3 +1312,104 @@ b, strong {
background-color: transparent !important;
cursor: default !important;
}

.dark .ant-tooltip-inner,
.dark .ant-tooltip-arrow:before {
background-color: var(--dark-color-tooltip);
}

.ant-select-sm .ant-select-selection__rendered {
margin-left: 10px;
}

.ant-collapse {
-moz-animation: collfade 0.3s ease;
-webkit-animation: 0.3s collfade 0.3s ease;
animation: collfade 0.3s ease;
}

@-webkit-keyframes collfade {
0% {
transform: scaleY(.8);
transform-origin: 0% 0%;
opacity: 0;
}

100% {
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
}

@keyframes collfade {
0% {
transform: scaleY(.8);
transform-origin: 0% 0%;
opacity: 0;
}

100% {
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
}

.ant-table-tbody>tr>td {
border-color: #f0f0f0;
}

.ant-table-row-expand-icon {
vertical-align: middle;
margin-inline-end: 8px;
position: relative;
transform: scale(0.9411764705882353);
}

.ant-table-row-collapsed::before {
transform: rotate(-180deg);
top: 7px;
inset-inline-end: 3px;
inset-inline-start: 3px;
height: 1px;
position: absolute;
background: currentcolor;
transition: transform 0.3s ease-out;
content: "";
}

.ant-table-row-collapsed::after {
transform: rotate(0deg);
top: 3px;
bottom: 3px;
inset-inline-start: 7px;
width: 1px;
position: absolute;
background: currentcolor;
transition: transform 0.3s ease-out;
content: "";
}

.ant-table-row-expanded::before {
top: 7px;
inset-inline-end: 3px;
inset-inline-start: 3px;
height: 1px;
position: absolute;
background: currentcolor;
transition: transform 0.3s ease-out;
content: "";
}

.ant-table-row-expanded::after {
top: 3px;
bottom: 3px;
inset-inline-start: 7px;
width: 1px;
transform: rotate(90deg);
position: absolute;
background: currentcolor;
transition: transform 0.3s ease-out;
content: "";
}
49 changes: 21 additions & 28 deletions web/html/common/qrcode_modal.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,23 @@
{{define "qrcodeModal"}}
<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
:dialog-style="{ top: '20px' }"
:closable="true"
:class="themeSwitcher.currentTheme"
:footer="null"
width="300px">
<a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
{{ i18n "pages.inbounds.clickOnQRcode" }}
</a-tag>
<template v-if="app.subSettings.enable && qrModal.subId">
<a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
<canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))"
id="qrCode-sub"
class="qr-bg">
</canvas>
<a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
<canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))"
id="qrCode-subJson"
style="width: 100%; height: 100%; display: flex; border-radius: 1rem;">
</canvas>
</template>
<a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
<template v-for="(row, index) in qrModal.qrcodes">
<a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
<canvas @click="copyToClipboard('qrCode-'+index, row.link)"
:id="'qrCode-'+index"
class="qr-bg"></canvas>
</template>
:dialog-style="{ top: '20px' }"
:closable="true"
:class="themeSwitcher.currentTheme"
:footer="null" width="300px">
<a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
{{ i18n "pages.inbounds.clickOnQRcode" }}
</a-tag>
<template v-if="app.subSettings.enable && qrModal.subId">
<a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
<div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas></div>
<a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
<div class="qr-bg"><canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas></div>
</template>
<a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
<template v-for="(row, index) in qrModal.qrcodes">
<a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
<div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas></div>
</template>
</a-modal>

<script>
Expand Down Expand Up @@ -87,8 +78,10 @@
setQrCode(elmentId, content) {
new QRious({
element: document.querySelector('#' + elmentId),
size: 260,
size: 300,
value: content,
background: 'transparent',
foreground: 'black'
});
},
genSubLink(subID) {
Expand Down
4 changes: 2 additions & 2 deletions web/html/xui/inbound_client_table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
<template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
</template>
<a-badge :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
<a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
</a-badge>
</a-tooltip>
[[ client.email ]]
Expand Down Expand Up @@ -258,7 +258,7 @@
</table>
</template>
<a-badge>
<a-icon v-if="!client.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
<a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
<a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;"><a-icon type="solution"></a-icon></a-button>
</a-badge>
</a-popover>
Expand Down
Loading

0 comments on commit 0bec29f

Please sign in to comment.