commit 9dde10a9bf441267ebe1e7db5db5861d775dc15c
parent c7827f91203836305bdafaa2ddcd31824ac8b61b
Author: n0tr1v <n0tr1v@protonmail.com>
Date: Mon, 5 Dec 2022 01:49:12 -0500
fancy new checkboxes to keep any competitor years behind
Diffstat:
3 files changed, 156 insertions(+), 32 deletions(-)
diff --git a/pkg/web/public/css/style.css b/pkg/web/public/css/style.css
@@ -69,4 +69,79 @@ textarea.transparent-input {
}
.bg-label.link {
color: #7abaff;
+}
+
+.form-check-1 {
+ padding-left: 2.80rem;
+}
+.checkbox-wrapper.form-check-input {
+ margin-top: 0.1rem;
+ margin-left: -2.80rem;
+}
+
+.checkbox-wrapper input[type="checkbox"] {
+ visibility: hidden;
+ display: none;
+}
+
+.checkbox-wrapper .toggle {
+ position: relative;
+ display: block;
+ width: 40px;
+ height: 20px;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+ transform: translate3d(0, 0, 0);
+}
+.checkbox-wrapper .toggle:before {
+ content: "";
+ position: relative;
+ top: 3px;
+ left: 3px;
+ width: 34px;
+ height: 14px;
+ display: block;
+ background: #9A9999;
+ border-radius: 8px;
+ transition: background 0.2s ease;
+}
+.checkbox-wrapper .toggle span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 20px;
+ height: 20px;
+ display: block;
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
+ transition: all 0.2s ease;
+}
+.checkbox-wrapper .toggle span:before {
+ content: "";
+ position: absolute;
+ display: block;
+ margin: -18px;
+ width: 56px;
+ height: 56px;
+ background: rgba(79, 46, 220, 0.5);
+ border-radius: 50%;
+ transform: scale(0);
+ opacity: 1;
+ pointer-events: none;
+}
+
+.checkbox-wrapper .my-cbx:checked + .toggle:before {
+ background: #947ADA;
+}
+.checkbox-wrapper .my-cbx:checked + .toggle span {
+ background: #4F2EDC;
+ transform: translateX(20px);
+ transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
+ box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
+}
+.checkbox-wrapper .my-cbx:checked + .toggle span:before {
+ transform: scale(1);
+ opacity: 0;
+ transition: all 0.4s ease;
}
\ No newline at end of file
diff --git a/pkg/web/public/views/pages/settings/chat-pm.gohtml b/pkg/web/public/views/pages/settings/chat-pm.gohtml
@@ -45,8 +45,11 @@
</select>
</div>
<div class="form-group">
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="block_new_users_pm" id="block_new_users_pm" value="1"{{ if .Data.BlockNewUsersPm }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="block_new_users_pm" id="block_new_users_pm" value="1"{{ if .Data.BlockNewUsersPm }} checked{{ end }} />
+ <label for="block_new_users_pm" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="block_new_users_pm">{{ t "Block new users PM (unless whitelisted)" . }}</label>
</div>
</div>
diff --git a/pkg/web/public/views/pages/settings/chat.gohtml b/pkg/web/public/views/pages/settings/chat.gohtml
@@ -60,12 +60,19 @@
</select>
</div>
<div class="form-group">
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="chat_bold" id="chat_bold" value="1"{{ if .Data.ChatBold }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="chat_bold" id="chat_bold" value="1"{{ if .Data.ChatBold }} checked{{ end }} />
+ <label for="chat_bold" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="chat_bold">{{ t "Bold" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="chat_italic" id="chat_italic" value="1"{{ if .Data.ChatItalic }} checked{{ end }} />
+
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="chat_italic" id="chat_italic" value="1"{{ if .Data.ChatItalic }} checked{{ end }} />
+ <label for="chat_italic" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="chat_italic">{{ t "Italic" . }}</label>
</div>
</div>
@@ -76,8 +83,11 @@
<hr />
<div class="form-group">
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="chat_read_marker_enabled" id="chat_read_marker_enabled" value="1"{{ if .Data.ChatReadMarkerEnabled }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="chat_read_marker_enabled" id="chat_read_marker_enabled" value="1"{{ if .Data.ChatReadMarkerEnabled }} checked{{ end }} />
+ <label for="chat_read_marker_enabled" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="chat_read_marker_enabled">{{ t "Enable read marker" . }}</label>
</div>
</div>
@@ -96,53 +106,89 @@
<hr />
<div class="form-group">
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="hide_ignored_users_from_list" id="hide_ignored_users_from_list" value="1"{{ if .Data.HideIgnoredUsersFromList }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="hide_ignored_users_from_list" id="hide_ignored_users_from_list" value="1"{{ if .Data.HideIgnoredUsersFromList }} checked{{ end }} />
+ <label for="hide_ignored_users_from_list" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="hide_ignored_users_from_list">{{ t "Hide ignored users from users lists" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="hide_right_column" id="hide_right_column" value="1"{{ if .Data.HideRightColumn }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="hide_right_column" id="hide_right_column" value="1"{{ if .Data.HideRightColumn }} checked{{ end }} />
+ <label for="hide_right_column" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="hide_right_column">{{ t "Hide right column" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="chat_bar_at_bottom" id="chat_bar_at_bottom" value="1"{{ if .Data.ChatBarAtBottom }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="chat_bar_at_bottom" id="chat_bar_at_bottom" value="1"{{ if .Data.ChatBarAtBottom }} checked{{ end }} />
+ <label for="chat_bar_at_bottom" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="chat_bar_at_bottom">{{ t "Chat bar at bottom" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="autocomplete_commands_enabled" id="autocomplete_commands_enabled" value="1"{{ if .Data.AutocompleteCommandsEnabled }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="autocomplete_commands_enabled" id="autocomplete_commands_enabled" value="1"{{ if .Data.AutocompleteCommandsEnabled }} checked{{ end }} />
+ <label for="autocomplete_commands_enabled" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="autocomplete_commands_enabled">{{ t "Autocomplete slash commands" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="afk_indicator_enabled" id="afk_indicator_enabled" value="1"{{ if .Data.AfkIndicatorEnabled }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="afk_indicator_enabled" id="afk_indicator_enabled" value="1"{{ if .Data.AfkIndicatorEnabled }} checked{{ end }} />
+ <label for="afk_indicator_enabled" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="afk_indicator_enabled">{{ t "Display afk indicator" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="display_delete_button" id="display_delete_button" value="1"{{ if .Data.DisplayDeleteButton }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="display_delete_button" id="display_delete_button" value="1"{{ if .Data.DisplayDeleteButton }} checked{{ end }} />
+ <label for="display_delete_button" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="display_delete_button">{{ t "Display delete button" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="notify_chess_games" id="notify_chess_games" value="1"{{ if .Data.NotifyChessGames }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="notify_chess_games" id="notify_chess_games" value="1"{{ if .Data.NotifyChessGames }} checked{{ end }} />
+ <label for="notify_chess_games" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="notify_chess_games">{{ t "Notify chess games" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="notify_chess_move" id="notify_chess_move" value="1"{{ if .Data.NotifyChessMove }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="notify_chess_move" id="notify_chess_move" value="1"{{ if .Data.NotifyChessMove }} checked{{ end }} />
+ <label for="notify_chess_move" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="notify_chess_move">{{ t "Notify chess move" . }}</label>
</div>
{{ if $.AuthUser.IsModerator }}
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="display_hellbanned" id="display_hellbanned" value="1"{{ if .Data.DisplayHellbanned }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="display_hellbanned" id="display_hellbanned" value="1"{{ if .Data.DisplayHellbanned }} checked{{ end }} />
+ <label for="display_hellbanned" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="display_hellbanned">{{ t "Display hellbanned messages" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="display_moderators" id="display_moderators" value="1"{{ if .Data.DisplayModerators }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="display_moderators" id="display_moderators" value="1"{{ if .Data.DisplayModerators }} checked{{ end }} />
+ <label for="display_moderators" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="display_moderators">{{ t "Display moderators messages" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="display_hellban_button" id="display_hellban_button" value="1"{{ if .Data.DisplayHellbanButton }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="display_hellban_button" id="display_hellban_button" value="1"{{ if .Data.DisplayHellbanButton }} checked{{ end }} />
+ <label for="display_hellban_button" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="display_hellban_button">{{ t "Display hellban button" . }}</label>
</div>
- <div class="form-check">
- <input type="checkbox" class="form-check-input" name="display_kick_button" id="display_kick_button" value="1"{{ if .Data.DisplayKickButton }} checked{{ end }} />
+ <div class="form-check form-check-1">
+ <div class="checkbox-wrapper form-check-input">
+ <input class="my-cbx" type="checkbox" name="display_kick_button" id="display_kick_button" value="1"{{ if .Data.DisplayKickButton }} checked{{ end }} />
+ <label for="display_kick_button" class="toggle"><span></span></label>
+ </div>
<label class="form-check-label" for="display_kick_button">{{ t "Display kick button" . }}</label>
</div>
{{ end }}
