diff --git a/Gemfile b/Gemfile index 78113d477c..a212112b7b 100644 --- a/Gemfile +++ b/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' diff --git a/Gemfile.lock b/Gemfile.lock index 35977f2fa5..38816fedf8 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/javascripts/application_old.js b/app/assets/javascripts/application_old.js index 5c0536e0ce..f223c48d9c 100644 --- a/app/assets/javascripts/application_old.js +++ b/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 diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss index ed13f57830..f7e9b01769 100644 --- a/app/assets/stylesheets/base.css.scss +++ b/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"; diff --git a/app/assets/stylesheets/components.css.scss b/app/assets/stylesheets/components.css.scss index d5802f1d96..06dc66ee61 100644 --- a/app/assets/stylesheets/components.css.scss +++ b/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"; diff --git a/app/assets/stylesheets/components/table-toolbar.css.scss b/app/assets/stylesheets/components/table-toolbar.css.scss index f9138dd74a..860d29cd3c 100644 --- a/app/assets/stylesheets/components/table-toolbar.css.scss +++ b/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; } diff --git a/app/assets/stylesheets/components/token.css.scss b/app/assets/stylesheets/components/token.css.scss new file mode 100644 index 0000000000..c1cbc44f9f --- /dev/null +++ b/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; +} diff --git a/app/assets/stylesheets/components/tokenfield.css.scss b/app/assets/stylesheets/components/tokenfield.css.scss deleted file mode 100644 index 5ec156ee13..0000000000 --- a/app/assets/stylesheets/components/tokenfield.css.scss +++ /dev/null @@ -1,281 +0,0 @@ -/*! - * this file was based on the following repository, but is heavily modified - * https://github.com/sliptree/bootstrap-tokenfield - * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT - */ -@use "sass:math"; - -.tokenfield { - height: auto; - min-height: 34px; - padding-bottom: 0; - z-index: 1; -} - -.tokenfield.focus { - border-color: #66afe9; - outline: 0; - box-shadow: - inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px rgba(102, 175, 233, 0.6); -} - -.tokenfield .token-input { - background: none; - width: 60px; - min-width: 60px; - border: 0; - height: 20px; - padding: 0; - margin-bottom: 6px; - box-shadow: none; -} - -.tokenfield .token-input:focus { - border-color: transparent; - outline: 0; - box-shadow: none; -} - -.tokenfield.disabled { - cursor: not-allowed; - background-color: #eeeeee; -} - -.tokenfield.disabled .token-input { - cursor: not-allowed; -} - -.tokenfield.disabled .token:hover { - cursor: not-allowed; - border-color: #d9d9d9; -} - -.tokenfield.disabled .token:hover .close { - cursor: not-allowed; - opacity: 0.2; - filter: alpha(opacity=20); -} - -.has-warning .tokenfield.focus { - border-color: #66512c; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; -} - -.has-error .tokenfield.focus { - border-color: #843534; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; -} - -.has-success .tokenfield.focus { - border-color: #2b542c; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; -} - -.tokenfield.form-control-sm, -.input-group-sm .tokenfield { - min-height: 30px; - padding-bottom: 0; -} - -.input-group-sm .token, -.tokenfield.form-control-sm .token { - height: 20px; - margin-bottom: 4px; -} - -.input-group-sm .token-input, -.tokenfield.form-control-sm .token-input { - height: 18px; - margin-bottom: 5px; -} - -.tokenfield.form-control-lg, -.input-group-lg .tokenfield { - height: auto; - min-height: 45px; - padding-bottom: 4px; -} - -.input-group-lg .token, -.tokenfield.form-control-lg .token { - height: 25px; -} - -.input-group-lg .token-label, -.tokenfield.form-control-lg .token-label { - line-height: 23px; -} - -.input-group-lg .token .close, -.tokenfield.form-control-lg .token .close { - line-height: 1.3em; -} - -.input-group-lg .token-input, -.tokenfield.form-control-lg .token-input { - height: 23px; - line-height: 23px; - margin-bottom: 6px; - vertical-align: top; -} - -.tokenfield.rtl { - direction: rtl; - text-align: right; -} - -.tokenfield.rtl .token { - margin: -1px 0 5px 5px; -} - -.tokenfield.rtl .token .token-label { - padding-left: 0; - padding-right: 4px; -} - -.tokenfield .token { - margin-bottom: 8px; - padding-right: 8px; -} - -.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; -} - -/* stylelint-disable-next-line no-duplicate-selectors */ -.tokenfield { - .form-control { - height: auto; - } - - /* stylelint-disable-next-line selector-id-pattern */ - #course_membership_course_labels-tokenfield { - height: auto; - padding: 0; - } - - /* stylelint-disable-next-line selector-id-pattern */ - #exercise_labels-tokenfield { - height: auto; - padding: 0; - } - - .tt-menu { - width: 100%; - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: $content-bg; - border: 1px solid $divider; - *border-right-width: 2px; - *border-bottom-width: 2px; - border-radius: $border-radius-base; - background-clip: padding-box; - } - - .tt-hint { - max-width: 100% !important; - width: unset !important; - } - - .tt-selectable { - cursor: pointer; - } - - .tokenfield-undeletable .btn-close { - display: none; - } - - /* Override inline styling of search bar */ - - .twitter-typeahead { - max-width: 100% !important; - width: 100% !important; - - input.token-input.tt-input { - max-width: 100% !important; - width: 100% !important; - } - } -} - -.tokenfield.form-control { - background-color: transparent; -} - -.search-tokens { - margin-left: 16px; -} diff --git a/bin/build-css b/bin/build-css index f6403ad44e..2fd27bd91e 100755 --- a/bin/build-css +++ b/bin/build-css @@ -7,6 +7,5 @@ --no-source-map \ --load-path=node_modules \ --load-path=./app/assets/stylesheets/ \ - --load-path=./vendor/assets/stylesheets/ \ --style compressed \ $@ diff --git a/config/deploy.rb b/config/deploy.rb index b719cf4f10..2cbbdf5ec0 100644 --- a/config/deploy.rb +++ b/config/deploy.rb @@ -29,7 +29,7 @@ set :linked_files, fetch(:linked_files, []).push('config/master.key') # Default value for linked_dirs is [] -set :linked_dirs, fetch(:linked_dirs, []).push('log', 'tmp/pids', 'tmp/cache', 'tmp/sockets', 'vendor/bundle', 'public/system', 'data/exercises', 'data/judges', 'data/storage', 'node_modules') +set :linked_dirs, fetch(:linked_dirs, []).push('log', 'tmp/pids', 'tmp/cache', 'tmp/sockets', 'public/system', 'data/exercises', 'data/judges', 'data/storage', 'node_modules') set :passenger_restart_with_touch, true diff --git a/package.json b/package.json index f4bba9a0b7..64b15a6a62 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "lit": "2.4.1", "node-polyglot": "^2.4.2", "sass": "^1.56.1", - "typeahead.js": "^0.11.1", "typescript": "^4.9.3", "webpack": "^5.75.0", "webpack-cli": "^4.9.2" diff --git a/tsconfig.json b/tsconfig.json index 6b2d72b02b..88655c3235 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,6 @@ "allowUmdGlobalAccess": true, "resolveJsonModule": true }, - "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public", "data"], + "exclude": ["**/*.spec.ts", "node_modules", "public", "data"], "compileOnSave": false } diff --git a/vendor/assets/stylesheets/.keep b/vendor/assets/stylesheets/.keep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/vendor/assets/stylesheets/bootstrap-tokenfield/tokenfield-typeahead.css.scss b/vendor/assets/stylesheets/bootstrap-tokenfield/tokenfield-typeahead.css.scss deleted file mode 100644 index 4ad279b9bd..0000000000 --- a/vendor/assets/stylesheets/bootstrap-tokenfield/tokenfield-typeahead.css.scss +++ /dev/null @@ -1,141 +0,0 @@ -/*! - * bootstrap-tokenfield - * https://github.com/sliptree/bootstrap-tokenfield - * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT - */ -/* General Typeahead styling, from http://jsfiddle.net/ragulka/Dy9au/1/ */ -.twitter-typeahead { - width: 100%; - position: relative; - vertical-align: top; -} -.twitter-typeahead .tt-input, -.twitter-typeahead .tt-hint { - margin: 0; - width: 100%; - vertical-align: middle; - background-color: #ffffff; -} -.twitter-typeahead .tt-hint { - color: #999999; - z-index: 1; - border: 1px solid transparent; -} -.twitter-typeahead .tt-input { - color: #555555; - z-index: 2; -} -.twitter-typeahead .tt-input, -.twitter-typeahead .tt-hint { - height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.428571429; -} -.twitter-typeahead .form-control-sm.tt-input, -.twitter-typeahead .hint-sm.tt-hint { - border-radius: 3px; -} -.twitter-typeahead .form-control-lg.tt-input, -.twitter-typeahead .hint-lg.tt-hint { - border-radius: 6px; -} -.input-group .twitter-typeahead:first-child .tt-input, -.input-group .twitter-typeahead:first-child .tt-hint { - border-radius: 4px 0 0 4px !important; -} -.input-group .twitter-typeahead:last-child .tt-input, -.input-group .twitter-typeahead:last-child .tt-hint { - border-radius: 0 4px 4px 0 !important; -} -.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, -.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { - border-radius: 3px 0 0 3px !important; -} -.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, -.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { - border-radius: 0 3px 3px 0 !important; -} -.form-control-sm.tt-input, -.hint-sm.tt-hint, -.input-group.input-group-sm .tt-input, -.input-group.input-group-sm .tt-hint { - height: 30px; - padding: 5px 10px; - font-size: 12px; - line-height: 1.5; -} -.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, -.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { - border-radius: 6px 0 0 6px !important; -} -.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, -.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { - border-radius: 0 6px 6px 0 !important; -} -.form-control-lg.tt-input, -.hint-lg.tt-hint, -.input-group.input-group-lg .tt-input, -.input-group.input-group-lg .tt-hint { - height: 45px; - padding: 10px 16px; - font-size: 18px; - line-height: 1.33; -} -.tt-dropdown-menu { - width: 100%; - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: #ffffff; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); - *border-right-width: 2px; - *border-bottom-width: 2px; - border-radius: 6px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -} -.tt-suggestion { - display: block; - padding: 3px 20px; -} -.tt-suggestion.tt-cursor { - color: #262626; - background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); - background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); -} -.tt-suggestion.tt-cursor a { - color: #ffffff; -} -.tt-suggestion p { - margin: 0; -} -/* Tokenfield-specific Typeahead styling */ -.tokenfield .twitter-typeahead { - width: auto; -} -.tokenfield .twitter-typeahead .tt-hint { - padding: 0; - height: 20px; -} -.tokenfield.form-control-sm .twitter-typeahead .tt-input, -.tokenfield.form-control-sm .twitter-typeahead .tt-hint { - height: 18px; - font-size: 12px; - line-height: 1.5; -} -.tokenfield.form-control-lg .twitter-typeahead .tt-input, -.tokenfield.form-control-lg .twitter-typeahead .tt-hint { - height: 23px; - font-size: 18px; - line-height: 1.33; -} -.tokenfield .twitter-typeahead .tt-suggestions { - font-size: 14px; -} diff --git a/vendor/assets/stylesheets/vendor.scss b/vendor/assets/stylesheets/vendor.scss deleted file mode 100644 index 86c4c7370e..0000000000 --- a/vendor/assets/stylesheets/vendor.scss +++ /dev/null @@ -1,2 +0,0 @@ -// all pages -@import "bootstrap-tokenfield/tokenfield-typeahead.css.scss"; diff --git a/yarn.lock b/yarn.lock index 0b8c7d558e..7140dbf04f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5122,7 +5122,7 @@ jest@^26.6.3: import-local "^3.0.2" jest-cli "^26.6.3" -jquery@>=1.7, jquery@^3.6.1: +jquery@^3.6.1: version "3.6.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.1.tgz#fab0408f8b45fc19f956205773b62b292c147a16" integrity sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw== @@ -7012,13 +7012,6 @@ type-fest@^0.8.1: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== -typeahead.js@^0.11.1: - version "0.11.1" - resolved "https://registry.yarnpkg.com/typeahead.js/-/typeahead.js-0.11.1.tgz#4e64e671b22310a8606f4aec805924ba84b015b8" - integrity sha1-TmTmcbIjEKhgb0rsgFkkuoSwFbg= - dependencies: - jquery ">=1.7" - typedarray-to-buffer@^3.1.5: version "3.1.5" resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"