Merge pull request #4189 from dodona-edu/chore/remove-tokenfield

Remove tokenfield typeahead

Gemfile

@@ -120,9 +120,6 @@ gem 'has_scope', '~> 0.8.0'
 # generating zip files
 gem 'rubyzip', '~> 2.3.2'
 
-# bootstrap tokenizer
-gem 'bootstrap_tokenfield_rails', '~> 0.12.1'
-
 # memcache
 gem 'dalli', '~> 3.2.3'
 

Gemfile.lock

@@ -88,7 +88,6 @@ GEM
     bindex (0.8.1)
     bootsnap (1.14.0)
       msgpack (~> 1.2)
-    bootstrap_tokenfield_rails (0.12.1)
     builder (3.2.4)
     byebug (11.1.3)
     capistrano (3.17.0)
@@ -499,7 +498,6 @@ DEPENDENCIES
   autoprefixer-rails (~> 10.4.7)
   bcrypt_pbkdf
   bootsnap (~> 1.14.0)
-  bootstrap_tokenfield_rails (~> 0.12.1)
   builder (~> 3.2.4)
   byebug (~> 11.1.3)
   capistrano-passenger (~> 0.2.1)

app/assets/javascripts/application_old.js

@@ -14,5 +14,3 @@
 //= require ace-rails-ap
 //= require ace/ext-language_tools
 
-//= require bootstrap-tokenfield
-//= require typeahead.js/dist/typeahead.bundle.js

app/assets/stylesheets/base.css.scss

@@ -11,7 +11,6 @@
 
 @import "bootstrap_variable_overrides.css.scss";
 @import "mixins.css.scss";
-@import "vendor";
 @import "theme/rouge.css.scss";
 @import "theme/ace.css.scss";
 

app/assets/stylesheets/components.css.scss

@@ -19,7 +19,7 @@
 @import "components/table.css.scss";
 @import "components/table-toolbar.css.scss";
 @import "components/toast.css.scss";
-@import "components/tokenfield.css.scss";
+@import "components/token.css.scss";
 @import "components/tutor.css.scss";
 @import "components/visualisations.css.scss";
 @import "components/search_field.css.scss";

app/assets/stylesheets/components/table-toolbar.css.scss

@@ -80,22 +80,6 @@
   background-color: inherit;
 }
 
-.table-toolbar .table-toolbar-tools .search .tokenfield {
-  border: none;
-  box-shadow: none;
-
-  .twitter-typeahead .token-input.tt-hint {
-    color: $on-surface-muted;
-    margin-top: 7px;
-    margin-bottom: 6px;
-    margin-left: 12px;
-  }
-
-  input {
-    font-size: 18px;
-  }
-}
-
 .tt-header {
   padding-left: 5px;
 }

app/assets/stylesheets/components/token.css.scss

@@ -0,0 +1,79 @@
+.token {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.3846153846;
+  $token-height: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  height: $token-height;
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-width: 0;
+  text-transform: capitalize;
+  white-space: nowrap;
+  cursor: default;
+  margin-right: 8px;
+}
+
+.token .close {
+  font-size: 18px;
+  margin-left: 8px;
+  margin-right: -4px; // a token with a close button has a right padding of 8 instead of 12px
+  color: inherit;
+}
+
+.token .close:hover {
+  color: $on-surface;
+  cursor: pointer;
+}
+
+.token.accent-red {
+  color: $on-red-container;
+  background-color: $red-container;
+}
+
+.token.accent-pink {
+  color: $on-pink-container;
+  background-color: $pink-container;
+}
+
+.token.accent-purple {
+  color: $on-purple-container;
+  background-color: $purple-container;
+}
+
+.token.accent-deep-purple {
+  color: $on-deep-purple-container;
+  background-color: $deep-purple-container;
+}
+
+.token.accent-indigo {
+  color: $on-indigo-container;
+  background-color: $indigo-container;
+}
+
+.token.accent-teal {
+  color: $on-teal-container;
+  background-color: $teal-container;
+}
+
+.token.accent-orange {
+  color: $on-orange-container;
+  background-color: $orange-container;
+}
+
+.token.accent-brown {
+  color: $on-brown-container;
+  background-color: $brown-container;
+}
+
+.token.accent-blue-gray {
+  color: $on-blue-gray-container;
+  background-color: $blue-gray-container;
+}
+
+.search-tokens {
+  margin-left: 16px;
+}