Merge pull request #16 from TakosThings/develop

0.0.6
TakosThings · Jan 29, 2022 · 8dfcb02 · 8dfcb02
2 parents 8ae65d3 + e40576e
commit 8dfcb02
Show file tree

Hide file tree

Showing 18 changed files with 496 additions and 17 deletions.
diff --git a/.docs/build_checklist.md b/.docs/build_checklist.md
@@ -0,0 +1,19 @@
+# Build checklist
+**Pre commit**
+- [ ] Update version in `/src/modules/core/metadata`
+- [ ] Execute `npm run build`
+
+**Commit**
+- [ ] Commit `/src/modules/core/metadata` only
+- [ ] Commit message is `Bump version > 0.0.*`
+
+**PR**
+- [ ] Correct version in PR title
+- [ ] Close any open issues in the pull commit
+
+**Release**
+- [ ] Correct tag version
+- [ ] Target correct branch (master)
+- [ ] Correct version in title
+- [ ] Changelog pasted into body
+- [ ] CSS files are uploaded
diff --git a/README.md b/README.md
@@ -8,12 +8,14 @@ The theme is still in-development.
 
 ## Requirements
 * Windows 10 or Windows 11
-* For non-Windows go to the [Design toolkits](https://docs.microsoft.com/en-gb/windows/apps/design/downloads/#fonts) page on Microsoft Docs and download and install:
+* Non-Windows users can download the Windows 11 fonts from [Design toolkits](https://docs.microsoft.com/en-gb/windows/apps/design/downloads/#fonts) on Microsoft Docs
   * Segoe UI Variable
   * Segoe Fluent Icons
   * Hololens icon font is used by the theme, but is not required
+### Optional Extras
+* [EmojiReplace](https://betterdiscord.app/theme/EmojiReplace) theme by DevilBro to get Windows 11 emoji on Discord
 
-## Getting help
+## Getting Help
 * Visit the [wiki](https://github.com/TakosThings/Fluent-Discord/wiki)
 * Open an [issue](https://github.com/TakosThings/Fluent-Discord/issues)
 * Join the [Discord server](https://discord.gg/ZYrCacRuez)

diff --git a/src/fluent.scss b/src/fluent.scss
@@ -61,10 +61,12 @@
 
 // Popouts
 // Order: None, alphabetic
+@import 'modules/popouts/emoji_picker';
 @import 'modules/popouts/inbox';
 @import 'modules/popouts/noise_cancellation';
 @import 'modules/popouts/pinned_messages';
 @import 'modules/popouts/rtc';
+@import 'modules/popouts/search';
 @import 'modules/popouts/threads';
 @import 'modules/popouts/user';
 

diff --git a/src/modules/core/_metadata.scss b/src/modules/core/_metadata.scss
@@ -1 +1 @@
-$version: "0.0.5";
+$version: "0.0.6";
diff --git a/src/modules/core/_options.scss b/src/modules/core/_options.scss
@@ -2,7 +2,15 @@
  * Start user options
  * Visit the wiki for information on this section
  * https://github.com/TakosThings/Fluent-Discord/wiki
- *
+*/
+
+/**
+ * Note on chat font size
+ * You may want to change your chat font scaling to '14px' to match the font size in Windows.
+ * This option is found in User settings > Appearance.
+*/
+
+ /**
  * Accent colour
  * Description: Change the accent colour.
  * Default:     The default accent colour is 'Default Blue' shown below as '0, 120, 215.

diff --git a/src/modules/home/_main.scss b/src/modules/home/_main.scss
@@ -53,6 +53,17 @@
             color: $TextFillColorPrimary;
         }
     }
+
+    // Add friend
+    .addFriendInputWrapper-kkoSV9{
+        padding: 0;
+        background-color: transparent;
+        border: 0;
+    }
+    // Remove hint text
+    .addFriendHint-1EVQJY{
+        display: none;
+    }
 }
 
 // Icon replacements

diff --git a/src/modules/icons/main/_toolbar.scss b/src/modules/icons/main/_toolbar.scss
@@ -44,6 +44,22 @@ html[lang^="en-"].theme-dark .toolbar-3_r2xA{
             content: "\E89F"; // More
         }
 
+        // Update
+        &[aria-label="#{map-get($translate, UPDATE_DOWNLOADED)}"]::before{
+            content: "\F83E"; // UpdateRestore
+        }
+        &[aria-label="#{map-get($translate, UPDATE_DOWNLOADED)}"]::after{
+            content: "";
+            width: 8px;
+            height: 8px;
+            position: absolute;
+            top: 19px;
+            left: 32px;
+            background-color: $Gold;
+
+            border-radius: 4px;
+        }
+
         // Help
         &[aria-label="#{map-get($translate, HELP)}"]{
             display: none;

diff --git a/src/modules/loadscreen/_loadscreen.scss b/src/modules/loadscreen/_loadscreen.scss
@@ -29,14 +29,14 @@
 
         opacity: 0;
         animation: fluent-loading-blobs 10s linear infinite;
-        animation-delay: 20s; // Delay starting animations
+        animation-delay: 5s; // Delay starting animations
     }
     &::after{
         transform: translate(192px, 64px);
 
         opacity: 0;
         animation: fluent-loading-blobs 17s linear infinite;
-        animation-delay: 35s; // Delay starting animations
+        animation-delay: 20s; // Delay starting animations
     }
 }
 

diff --git a/src/modules/main/channels/_channels.scss b/src/modules/main/channels/_channels.scss
@@ -242,15 +242,15 @@
     .unreadBottom-3Ojk6R{
         span{
             &::before{
-                content: "\F08E";
+                content: "\EDDC"; // CaretDownSolid8
             }
         }
     }
 
     .unreadTop-1DJtGv{
         span{
             &::before{
-                content: "\F090";
+                content: "\EDDB"; // CaretUpSolid8
             }
         }
     }

diff --git a/src/modules/main/chat/_chat.scss b/src/modules/main/chat/_chat.scss
@@ -131,3 +131,52 @@
         }
     }
 }
+
+// Loading chat messages
+.wrapper-3HVHpV{
+    background-color: transparent;
+    // The placeholding items wrappers
+    .wrapper-15CKyy{
+        display: none;
+    }
+    &::before,
+    &::after{
+        content: "";
+        height: 4px;
+        position: absolute;
+        // Hacks ahead
+        // 100vh - titlebar - toolbar - scrollbar spacer - chatbox - height of ::before,::after
+        bottom: calc(100vh - 170px);
+        left: 0;
+        border-radius: 2px;
+    }
+    &::before{
+        background-color: $AccentBase;
+        animation: fluent-indeterminate-loading-inc 3s infinite;
+    }
+    &::after{
+        background-color: $AccentBase;
+        animation: fluent-indeterminate-loading-dec 3s 1.5s infinite;
+    }
+
+    @keyframes fluent-indeterminate-loading-inc{
+        from{
+            left: -5%;
+            width: 5%;
+        }
+        to{
+            left: 130%;
+            width: 100%;
+        }
+    }
+    @keyframes fluent-indeterminate-loading-dec{
+        from{
+            left: -80%;
+            width: 80%;
+        }
+        to{
+            left: 110%;
+            width: 10%;
+        }
+    }
+}
diff --git a/src/modules/main/guilds/_guilds.scss b/src/modules/main/guilds/_guilds.scss
@@ -59,7 +59,7 @@
                 .childWrapper-1j_1ub{
                     background-color: transparent;
                     &::before{
-                        content: "\E80F";
+                        content: "\E80F"; // Home
                         color: $TextFillColorPrimary;
                         @include FontIconFluent;
                         font-size: 16px;
@@ -166,7 +166,7 @@
     .iconBadge-32fMme.participating-2Z81oO{
         background-color: $SystemFillColorSuccesBackground;
         &::before{
-            content: "\F0B9";
+            content: "\F0B9"; // Connected
             @include FontIconFluent;
             color: $SystemFillColorSuccess;
             font-size: 10px;
@@ -200,14 +200,14 @@
     .unreadMentionsIndicatorBottom-3RJMnQ{
         span{
             &::before{
-                content: "\F08E";
+                content: "\EDDC"; // CaretDownSolid8
             }
         }
     }
     .unreadMentionsIndicatorTop-2bTgUU{
         span{
             &::before{
-                content: "\F090";
+                content: "\EDDB"; // CaretUpSolid8
             }
         }
     }

diff --git a/src/modules/main/toolbar/_search.scss b/src/modules/main/toolbar/_search.scss
@@ -20,7 +20,7 @@
 
     // Icon when not active
     .search-1FM8Qc:not(.focused-8aNhVB):not(.open-3y3yI_)::before{
-        content: "\e721";
+        content: "\e721"; // Search
         width: 64px;
         font-size: 16px;
         @include FontIconFluent;