avatar修改提示

整理代码

views/user/info.php

@@ -293,6 +293,18 @@ $darkMode = Yii::$app->user->identity->dark_mode;
         </div>
     </div>
 <?php
+Modal::begin([
+    'title' => '<h4>更改用户头像</h4>',
+    'id' => 'avatarModal',
+//    'size' => 'modal-sm',
+]);
+
+echo Html::tag('div', '<i class="fa-solid fa-circle-info" id="info_icon"></i>
+<p>要修改头像，请前往Gravatar<a href="https://gravatar.com/" target=”_blank”><i class="fa-solid fa-arrow-up-right-from-square"></i></a>，使用相同的电子邮箱地址创建/登录账户后对头像进行管理</p>
+<br>Q: 修改头像后不起作用?<br>A: 尝试ctrl+F5强制刷新或清除cache后刷新页面<br><a href="https://support.gravatar.com/" target=”_blank”>更多帮助</a>', ['class' => 'modal-body']);
+
+Modal::end();
+
 Modal::begin([
     'title' => '<h4>确定？</h4>',
     'id' => 'deleteAccountModal',

web/css/user-info.css

@@ -94,9 +94,11 @@
     color: rgb(100, 96, 100);
     font-size: 0.95rem;
 }
+
 html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
     color: inherit;
 }
+
 .accordion-item {
     margin-bottom: 5px;
     border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
@@ -152,9 +154,11 @@ html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
     font-size: 0.75rem;
     color: rgb(140, 139, 139);
 }
+
 html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
     color: inherit;
 }
+
 .storage-columns p {
     margin-bottom: 0.5rem !important;
 }
@@ -187,12 +191,18 @@ html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
     border-radius: 4px;
 }
 
-#current{
+#current {
     font-weight: 600;
     font-size: 1.4rem;
     color: black;
     padding-left: 2px;
 }
-html[data-bs-theme="dark"] #current{
+
+html[data-bs-theme="dark"] #current {
     color: inherit;
 }
+
+#info_icon {
+    font-size: 2em;
+    line-height: 1.5;
+}

web/js/user-info.js

@@ -9,7 +9,7 @@ $(document).ready(function () {
     $('#totp-enabled').change(function () {
         if (this.checked) {
             $('#totpSetupModal').modal('show');
-        }else {
+        } else {
             $.post('index.php?r=user%2Fremove-two-factor', function () {
                 location.reload();
             });
@@ -18,18 +18,22 @@ $(document).ready(function () {
     $('#totpSetupModal').on('hidden.bs.modal', function () {
         $('#totp-enabled').prop('checked', false);
     });
-    $('#useDarkTheme').change(function() {
+    $('#useDarkTheme').change(function () {
         var darkMode = this.checked ? 1 : 0;
-        $.post('index.php?r=user%2Fset-theme', {dark_mode: darkMode}, function() {
+        $.post('index.php?r=user%2Fset-theme', {dark_mode: darkMode}, function () {
             location.reload();
         });
     });
 
-    $('#followSystemTheme').change(function() {
+    $('#followSystemTheme').change(function () {
         $('#useDarkTheme').prop('checked', false);
         var darkMode = this.checked ? 2 : 0;
-        $.post('index.php?r=user%2Fset-theme', {dark_mode: darkMode}, function() {
+        $.post('index.php?r=user%2Fset-theme', {dark_mode: darkMode}, function () {
             location.reload();
         });
     });
 });
+
+document.querySelector('.avatar-container').addEventListener('click', function () {
+    $('#avatarModal').modal('show');
+});