Add rounded square avatars theme option

d336ea7a13ad53c83810de3550444785f57ad3a9

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: fdc9a2a93be4deac11a34f314bc0fd175c3d601d
4 files changed, +9 -0Showing whitespace changes
public/css/toggle-dependent.css+5 -0
@@ -45,6 +45,11 @@ body.square-avatars .avatar img {
45 border-radius: var(--avatar-base-border-radius) !important;45 border-radius: var(--avatar-base-border-radius) !important;
46}46}
4747
48body.rounded-avatars .avatar,
49body.rounded-avatars .avatar img {
50 border-radius: var(--avatar-base-border-radius-rounded) !important;
51}
52
48/*char list grid mode*/53/*char list grid mode*/
4954
50body.charListGrid #rm_print_characters_block {55body.charListGrid #rm_print_characters_block {
public/index.html+1 -0
@@ -4348,6 +4348,7 @@
4348 <select id="avatar_style" class="widthNatural flex1 margin0 text_pole">4348 <select id="avatar_style" class="widthNatural flex1 margin0 text_pole">
4349 <option value="0" data-i18n="Circle">Circle</option>4349 <option value="0" data-i18n="Circle">Circle</option>
4350 <option value="2" data-i18n="Square">Square</option>4350 <option value="2" data-i18n="Square">Square</option>
4351 <option value="3" data-i18n="Rounded">Rounded</option>
4351 <option value="1" data-i18n="Rectangle">Rectangle</option>4352 <option value="1" data-i18n="Rectangle">Rectangle</option>
4352 </select>4353 </select>
4353 </div>4354 </div>
public/scripts/power-user.js+2 -0
@@ -96,6 +96,7 @@ const avatar_styles = {
96 ROUND: 0,96 ROUND: 0,
97 RECTANGULAR: 1,97 RECTANGULAR: 1,
98 SQUARE: 2,98 SQUARE: 2,
99 ROUNDED: 3,
99};100};
100101
101export const chat_styles = {102export const chat_styles = {
@@ -1021,6 +1022,7 @@ function applyNoShadows() {
1021function applyAvatarStyle() {1022function applyAvatarStyle() {
1022 $('body').toggleClass('big-avatars', power_user.avatar_style === avatar_styles.RECTANGULAR);1023 $('body').toggleClass('big-avatars', power_user.avatar_style === avatar_styles.RECTANGULAR);
1023 $('body').toggleClass('square-avatars', power_user.avatar_style === avatar_styles.SQUARE);1024 $('body').toggleClass('square-avatars', power_user.avatar_style === avatar_styles.SQUARE);
1025 $('body').toggleClass('rounded-avatars', power_user.avatar_style === avatar_styles.ROUNDED);
1024 $('#avatar_style').val(power_user.avatar_style).prop('selected', true);1026 $('#avatar_style').val(power_user.avatar_style).prop('selected', true);
1025}1027}
10261028
public/style.css+1 -0
@@ -117,6 +117,7 @@
117 --avatar-base-width: 50px;117 --avatar-base-width: 50px;
118 --avatar-base-border-radius: 2px;118 --avatar-base-border-radius: 2px;
119 --avatar-base-border-radius-round: 50%;119 --avatar-base-border-radius-round: 50%;
120 --avatar-base-border-radius-rounded: 10px;
120 --inline-avatar-small-factor: 0.6;121 --inline-avatar-small-factor: 0.6;
121122
122 --animation-duration: 125ms;123 --animation-duration: 125ms;