Merge pull request #57 from NodeBB/bootstrap5

bootstrap5
NodeBB · Sep 21, 2022 · 6f9d0f3 · 6f9d0f3
2 parents 2359752 + d377374
commit 6f9d0f3
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 92 deletions.
diff --git a/acp/admin.less b/acp/admin.less
diff --git a/acp/admin.scss b/acp/admin.scss
@@ -0,0 +1 @@
+@import "../build/acp/admin";
diff --git a/acp/src/Adjunct.svelte b/acp/src/Adjunct.svelte
@@ -175,11 +175,11 @@ function cancelDelete() {
         class="form-control"
         bind:value={newAlias}
       />
-      <div class="input-group-addon"><button class="btn btn-default" on:click={addAlias}>+</button></div>
+      <div class="input-group-addon"><button class="btn btn-outline-secondary" on:click={addAlias}>+</button></div>
     </div>
     <span>
       {#each aliases as a}
-      <button class="btn btn-info btn-xs" on:click={() => removeAlias(a)}>{a} x</button>
+      <button class="btn btn-info btn-sm" on:click={() => removeAlias(a)}>{a} x</button>
       {/each}
     </span>
   </td>
@@ -190,11 +190,11 @@ function cancelDelete() {
         class="form-control"
         bind:value={newAscii}
       />
-      <div class="input-group-addon"><button class="btn btn-default" on:click={addAscii}>+</button></div>
+      <div class="input-group-addon"><button class="btn btn-outline-secondary" on:click={addAscii}>+</button></div>
     </div>
     <span>
       {#each ascii as a}
-      <button class="btn btn-info btn-xs" on:click={() => removeAscii(a)}>{a} x</button>
+      <button class="btn btn-info btn-sm" on:click={() => removeAscii(a)}>{a} x</button>
       {/each}
     </span>
   </td>
@@ -224,7 +224,7 @@ function cancelDelete() {
 {#if deleting || deleted}
 <tr class:fadeout={deleted}>
   <td>
-    <button class="btn btn-default" type="button" disabled={deleted} on:click={cancelDelete}>Cancel</button>
+    <button class="btn btn-outline-secondary" type="button" disabled={deleted} on:click={cancelDelete}>Cancel</button>
   </td>
   <td colSpan={3}>
     <span class="help-block">Are you sure you want to delete this extension?</span>

diff --git a/acp/src/Customize.svelte b/acp/src/Customize.svelte
@@ -17,8 +17,8 @@ export function show(): void {
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="editModalLabel">Customize Emoji</h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
       </div>
       <div class="modal-body">
         <p>
@@ -27,17 +27,21 @@ export function show(): void {
           edited live, you must still <strong>Build Emoji Assets </strong>
           to actually use these customizations.
         </p>
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">Custom Emoji</h3>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Custom Emoji</h3>
+          </div>
+          <div class="card-body">
+            <EmojiList emojis={data.emojis} />
           </div>
-          <EmojiList emojis={data.emojis} />
         </div>
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">Custom Extensions</h3>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">Custom Extensions</h3>
+          </div>
+          <div class="card-body">
+            <ItemList record={data.adjuncts} />
           </div>
-          <ItemList record={data.adjuncts} />
         </div>
       </div>
     </div>

diff --git a/acp/src/Emoji.svelte b/acp/src/Emoji.svelte
@@ -187,7 +187,7 @@ function cancelDelete() {
   <td>
     <button
       type="button"
-      class="btn btn-default"
+      class="btn btn-outline-secondary"
       on:click={editImage}
     >{@html buildEmoji({
       character: '',
@@ -224,11 +224,11 @@ function cancelDelete() {
         class="form-control"
         bind:value={newAlias}
       />
-      <div class="input-group-addon"><button class="btn btn-default" on:click={addAlias}>+</button></div>
+      <div class="input-group-addon"><button class="btn btn-outline-secondary" on:click={addAlias}>+</button></div>
     </div>
     <span>
       {#each aliases as a}
-      <button class="btn btn-info btn-xs" on:click={() => removeAlias(a)}>{a} x</button>
+      <button class="btn btn-info btn-sm" on:click={() => removeAlias(a)}>{a} x</button>
       {/each}
     </span>
   </td>
@@ -239,11 +239,11 @@ function cancelDelete() {
         class="form-control"
         bind:value={newAscii}
       />
-      <div class="input-group-addon"><button class="btn btn-default" on:click={addAscii}>+</button></div>
+      <div class="input-group-addon"><button class="btn btn-outline-secondary" on:click={addAscii}>+</button></div>
     </div>
     <span>
       {#each ascii as a}
-      <button class="btn btn-info btn-xs" on:click={() => removeAscii(a)}>{a} x</button>
+      <button class="btn btn-info btn-sm" on:click={() => removeAscii(a)}>{a} x</button>
       {/each}
     </span>
   </td>
@@ -273,7 +273,7 @@ function cancelDelete() {
 {#if deleting || deleted}
 <tr class:fadeout={deleted}>
   <td>
-    <button class="btn btn-default" type="button" disabled={deleted} on:click={cancelDelete}>Cancel</button>
+    <button class="btn btn-outline-secondary" type="button" disabled={deleted} on:click={cancelDelete}>Cancel</button>
   </td>
   <td colSpan={3}>
     <span class="help-block">Are you sure you want to delete this emoji?</span>

diff --git a/acp/src/Settings.svelte b/acp/src/Settings.svelte
@@ -47,34 +47,34 @@ function showCustomize() {
 </script>
 
 <form id="emoji-settings">
-  <div class="panel panel-default">
-    <div class="panel-body">
-      <div class="form-group">
-        <label for="emoji-parseAscii">
-          <input id="emoji-parseAscii" type="checkbox" bind:checked={settings.parseAscii} />
-          <Translate src="[[admin/plugins/emoji:settings.parseAscii]]"/>
-        </label>
+  <div class="card">
+    <div class="card-body">
+      <div class="mb-3">
+        <div class="form-check">
+          <input id="emoji-parseAscii" type="checkbox" bind:checked={settings.parseAscii} class="form-check-input"/>
+          <label class="form-check-label" for="emoji-parseAscii"><Translate src="[[admin/plugins/emoji:settings.parseAscii]]"/></label>
+        </div>
       </div>
 
-      <div class="form-group">
-        <label for="emoji-parseNative">
-          <input id="emoji-parseNative" type="checkbox" bind:checked={settings.parseNative} />
-          <Translate src="[[admin/plugins/emoji:settings.parseNative]]"/>
-        </label>
+      <div class="mb-3">
+        <div class="form-check">
+          <input id="emoji-parseNative" type="checkbox" bind:checked={settings.parseNative} class="form-check-input" />
+          <label class="form-check-label" for="emoji-parseNative"><Translate src="[[admin/plugins/emoji:settings.parseNative]]"/></label>
+        </div>
       </div>
 
-      <div class="form-group">
-        <label for="emoji-customFirst">
-          <input id="emoji-customFirst" type="checkbox" bind:checked={settings.customFirst} />
-          <Translate src="[[admin/plugins/emoji:settings.customFirst]]"/>
-        </label>
+      <div class="mb-3">
+        <div class="form-check">
+          <input id="emoji-customFirst" type="checkbox" bind:checked={settings.customFirst} class="form-check-input"/>
+          <label class="form-check-label" for="emoji-customFirst"><Translate src="[[admin/plugins/emoji:settings.customFirst]]"/></label>
+        </div>
       </div>
     </div>
 
-    <div class="panel-footer">
-      <div class="form-group">
+    <div class="card-footer">
+      <div class="mb-3">
         <button type="button" on:click={buildAssets} class="btn btn-primary" aria-describedby="emoji-build_description"><Translate src="[[admin/plugins/emoji:build]]"/></button>
-        <p id="emoji-build_description" class="help-block">
+        <p id="emoji-build_description" class="form-text">
         <Translate src="[[admin/plugins/emoji:build_description]]"/>
         </p>
       </div>

diff --git a/lib/controllers.ts b/lib/controllers.ts
@@ -26,7 +26,7 @@ export default function controllers({ router, middleware }: {
       });
     }), err => setImmediate(next, err));
   };
-  setupAdminPageRoute(router, '/admin/plugins/emoji', middleware, [], renderAdmin);
+  setupAdminPageRoute(router, '/admin/plugins/emoji', renderAdmin);
 
   const updateSettings: RequestHandler = async (req, res) => {
     const data = req.body;

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "url": "https://github.com/NodeBB/nodebb-plugin-emoji.git"
   },
   "nbbpm": {
-    "compatibility": "^2.0.0"
+    "compatibility": "^3.0.0"
   },
   "keywords": [
     "nodebb",

diff --git a/plugin.json b/plugin.json
@@ -1,10 +1,10 @@
 {
   "library": "build/lib",
-  "less": [
-    "public/style.less"
+  "scss": [
+    "public/style.scss"
   ],
-  "acpLess": [
-    "acp/admin.less"
+  "acpScss": [
+    "acp/admin.scss"
   ],
   "modules": {
     "emoji.js": "build/public/lib/emoji.js",

diff --git a/public/lib/emoji-dialog.ts b/public/lib/emoji-dialog.ts
@@ -124,6 +124,7 @@ export function init(callback: Callback<JQuery>): void {
         dialog.find('.tab-pane.emoji-dialog-search-results').html(results);
         dialog.find('.emoji-dialog-search-results').removeClass('hidden');
         dialog.find('.nav-tabs .emoji-dialog-search-results a').tab('show');
+        dialog.find('.emoji-dialog-search').focus();
       });
 
       const tabContent = dialog.find('.emoji-tabs .tab-content');

diff --git a/public/style.less → public/style.scss b/public/style.less → public/style.scss
@@ -18,9 +18,9 @@
   flex-direction: column;
   justify-content: flex-start;
 
-  border: 1px solid @modal-content-border-color;
+  border: 1px solid $modal-content-border-color;
   border-radius: 11px;
-  background: @modal-content-bg;
+  background: $modal-content-bg;
   overflow: auto;
 
   .top-bar {
@@ -30,10 +30,9 @@
   }
 }
 
-
-@media (max-width: @screen-sm-max) {
+@include media-breakpoint-down(sm) {
   html.composing.emoji-insert .composer {
-    bottom: calc(~"40% - 36px");
+    bottom: calc(#{"40% - 36px"});
     height: auto;
   }
 
@@ -74,21 +73,14 @@
     .emoji-dialog-search {
       flex-grow: 2;
     }
-
-    button.close {
-      opacity: 1;
-      width: 30px;
-
-      color: @input-color;
-      border: 1px solid @input-border;
-    }
   }
 
   .nav-tabs {
     overflow: hidden;
     overflow-x: auto;
     white-space: nowrap;
     flex-shrink: 0;
+    flex-wrap: nowrap;
 
     > li, html[data-dir="rtl"] & > li {
       display: inline-block;

diff --git a/public/templates/partials/emoji-dialog.tpl b/public/templates/partials/emoji-dialog.tpl
@@ -1,32 +1,34 @@
 <div class="emoji-dialog" id="emoji-dialog">
   <div class="emoji-tabs">
     <div class="top-bar"></div>
-    
+
     <div class="emoji-dialog-search-container">
-      <input type="text" class="form-control emoji-dialog-search" placeholder="[[emoji:search.placeholder]]">
-
-      <button type="button" class="close form-control" data-dismiss="modal" aria-label="[[global:close]]">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      <div class="input-group">
+        <input type="text" class="form-control emoji-dialog-search" placeholder="[[emoji:search.placeholder]]">
+
+        <button type="button" class="close btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="[[global:close]]">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
     </div>
-      
+
     <ul class="nav nav-tabs" role="tablist">
-      <li role="presentation" class="emoji-dialog-search-results hidden">
-        <a href="#emoji-tab-search" aria-controls="search" role="tab" data-toggle="tab" data-ajaxify="false">
+      <li role="presentation" class="emoji-dialog-search-results hidden nav-item">
+        <a href="#emoji-tab-search" class="nav-link" aria-controls="search" role="tab" data-bs-toggle="tab" data-ajaxify="false">
           [[emoji:search.results]]
         </a>
       </li>
 
       {{{ each categories }}}
-      <li role="presentation" class="{{{ if @first }}}active{{{ end }}}">
-        <a href="#emoji-tab-{./name}" aria-controls="{./name}" role="tab" data-toggle="tab" data-ajaxify="false">
+      <li role="presentation" class="nav-item">
+        <a href="#emoji-tab-{./name}" class="nav-link {{{ if @first }}}active{{{ end }}}" aria-controls="{./name}" role="tab" data-bs-toggle="tab" data-ajaxify="false">
           [[emoji:categories.{./name}]]
         </a>
       </li>
       {{{ end }}}
 
-      <li role="presentation">
-        <button href="#emoji-tab-legal" class="btn btn-info" aria-controls="legal" role="tab" data-toggle="tab" data-ajaxify="false">
+      <li role="presentation" class="nav-item">
+        <button href="#emoji-tab-legal" class="nav-link text-bg-info" aria-controls="legal" role="tab" data-bs-toggle="tab" data-ajaxify="false">
           [[emoji:modal.legal]]
         </button>
       </li>
@@ -47,30 +49,36 @@
       {{{ end }}}
 
       <div role="tabpanel" class="tab-pane" id="emoji-tab-legal">
-        <div class="col-xs-12">
-          <p class="lead">
-            [[emoji:modal.legal.header]]
-          </p>
-        </div>
-        {{{ each packs }}}
-        <div class="col-xs-12">
-          <h3>[[emoji:modal.legal.set.header, {../name}, {../id}]]</h3>
-
-          {{{ if ./attribution }}}
-          <h4>[[emoji:modal.legal.set.attribution]]</h4>
-          <div class="well">
-            {./attribution}
+        <div class="row">
+          <div class="col-12 mb-3">
+            <p class="lead">
+              [[emoji:modal.legal.header]]
+            </p>
           </div>
-          {{{ end }}}
+          {{{ each packs }}}
+          <div class="col-12 mb-3">
+            <h3>[[emoji:modal.legal.set.header, {../name}, {../id}]]</h3>
 
-          {{{ if ./license }}}
-          <h4>[[emoji:modal.legal.set.license]]</h4>
-          <div class="well">
-            {./license}
+            {{{ if ./attribution }}}
+            <div class="mb-3">
+              <h4>[[emoji:modal.legal.set.attribution]]</h4>
+              <div class="card card-body text-bg-light">
+                {./attribution}
+              </div>
+            </div>
+            {{{ end }}}
+
+            {{{ if ./license }}}
+            <div class="mb-3">
+              <h4>[[emoji:modal.legal.set.license]]</h4>
+              <div class="card card-body text-bg-light">
+                {./license}
+              </div>
+            </div>
+            {{{ end }}}
           </div>
           {{{ end }}}
         </div>
-        {{{ end }}}
       </div>
     </div>
   </div>