diff --git a/package.json b/package.json index db1a97d8ae..75f0f83132 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,6 @@ "sorttable": "^1.0.2", "source-code-pro": "^2.38.0", "source-sans": "^3.28.0", - "spectrum-colorpicker": "^1.8.1", "stackframe": "^1.3.4", "stacktrace-gps": "^3.0.4", "style-loader": "^4.0.0", @@ -118,7 +117,6 @@ "@types/node": "^22.9.0", "@types/plotly.js": "^2.12.20", "@types/sortablejs": "^1.15.1", - "@types/spectrum": "^1.8.4", "@types/textarea-caret": "^3.0.3", "@types/throttle-debounce": "^5.0.2", "@types/tinycolor2": "^1.4.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 60b454ae3a..24a067ce2a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -244,9 +244,6 @@ importers: source-sans: specifier: ^3.28.0 version: 3.46.0(patch_hash=4n7ij66tzyhzaqnxsenbilrxr4) - spectrum-colorpicker: - specifier: ^1.8.1 - version: 1.8.1 stackframe: specifier: ^1.3.4 version: 1.3.4 @@ -368,9 +365,6 @@ importers: '@types/sortablejs': specifier: ^1.15.1 version: 1.15.8 - '@types/spectrum': - specifier: ^1.8.4 - version: 1.8.7 '@types/textarea-caret': specifier: ^3.0.3 version: 3.0.3 @@ -2668,9 +2662,6 @@ packages: '@types/sortablejs@1.15.8': resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==} - '@types/spectrum@1.8.7': - resolution: {integrity: sha512-zeLcQ1qyKJGyq7V3TzXwyKITcetm8BOMY/PI1qHLxeJrBFS9BtsHtLFfj+X2wU6B7TCqoes7ZMQeoFBxHxg/6g==} - '@types/supercluster@7.1.3': resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==} @@ -8072,9 +8063,6 @@ packages: resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==} engines: {node: '>=6.0.0'} - spectrum-colorpicker@1.8.1: - resolution: {integrity: sha512-x1picQ5giVso71ESII7jZ3+ZFdit8WthNkzwJqLNdPDPzrltKUQGpTohWyPfSAID+bK1zGdO6bDbSh1S6GoLYA==} - sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} @@ -11720,11 +11708,6 @@ snapshots: '@types/sortablejs@1.15.8': {} - '@types/spectrum@1.8.7': - dependencies: - '@types/jquery': 3.5.32 - '@types/tinycolor2': 1.4.6 - '@types/supercluster@7.1.3': dependencies: '@types/geojson': 7946.0.15 @@ -18589,8 +18572,6 @@ snapshots: transitivePeerDependencies: - supports-color - spectrum-colorpicker@1.8.1: {} - sprintf-js@1.0.3: {} sprintf-js@1.1.3: {} diff --git a/version.py b/version.py index 305423246d..f26602b4b4 100644 --- a/version.py +++ b/version.py @@ -49,4 +49,4 @@ API_FEATURE_LEVEL = 334 # Last bumped for adding empty_topic_name client capabi # historical commits sharing the same major version, in which case a # minor version bump suffices. -PROVISION_VERSION = (308, 0) # bumped 2025-01-03 to upgrade @uppy/core and @uppy/tus +PROVISION_VERSION = (309, 0) # bumped 2024-01-07 to remove spectrum-colorpicker diff --git a/web/src/bundles/app.ts b/web/src/bundles/app.ts index 52c927fcbc..29715f0d51 100644 --- a/web/src/bundles/app.ts +++ b/web/src/bundles/app.ts @@ -3,7 +3,6 @@ import "./common.ts"; // Import third party jQuery plugins import "jquery-caret-plugin/dist/jquery.caret"; import "../../third/jquery-idle/jquery.idle.js"; -import "spectrum-colorpicker"; import "jquery-validation"; // Import app JS @@ -18,7 +17,6 @@ import "tippy.js/dist/tippy.css"; // https://atomiks.github.io/tippyjs/v6/themes/#arrow-border import "tippy.js/dist/border.css"; import "tippy.js/themes/light-border.css"; -import "spectrum-colorpicker/spectrum.css"; import "katex/dist/katex.css"; import "flatpickr/dist/flatpickr.css"; import "flatpickr/dist/plugins/confirmDate/confirmDate.css"; diff --git a/web/src/global.ts b/web/src/global.ts index 3967b516e9..80b40a40b4 100644 --- a/web/src/global.ts +++ b/web/src/global.ts @@ -1,5 +1,3 @@ -/// - import type * as zulip_test_module from "./zulip_test.ts"; type JQueryCaretRange = { diff --git a/web/src/stream_color.ts b/web/src/stream_color.ts index 5309a9bbb8..2a4029ec16 100644 --- a/web/src/stream_color.ts +++ b/web/src/stream_color.ts @@ -2,13 +2,9 @@ import type {Colord} from "colord"; import {colord, extend} from "colord"; import lchPlugin from "colord/plugins/lch"; import mixPlugin from "colord/plugins/mix"; -import $ from "jquery"; -import type tinycolor from "tinycolor2"; -import {$t} from "./i18n.ts"; import * as settings_data from "./settings_data.ts"; import * as stream_data from "./stream_data.ts"; -import * as stream_settings_api from "./stream_settings_api.ts"; extend([lchPlugin, mixPlugin]); @@ -69,47 +65,3 @@ export const stream_color_palette = [ ["#a6dcbf", "#addfe5", "#a6c7e5", "#4f8de4", "#95a5fd", "#b0a5fd"], ["#c2c2c2", "#c8bebf", "#c6a8ad", "#e79ab5", "#bd86e5", "#9987e1"], ]; - -const subscriptions_table_colorpicker_options = { - clickoutFiresChange: true, - showPalette: true, - showInput: true, - palette: stream_color_palette, - change: picker_do_change_color, -}; - -export function set_colorpicker_color($colorpicker: JQuery, color: string): void { - $colorpicker.spectrum({ - ...subscriptions_table_colorpicker_options, - color, - }); -} - -export const sidebar_popover_colorpicker_options_full = { - clickoutFiresChange: false, - showPalette: true, - showInput: true, - flat: true, - cancelText: "", - chooseText: $t({defaultMessage: "Confirm"}), - palette: stream_color_palette, - change: picker_do_change_color, -}; - -function picker_do_change_color(this: HTMLElement, color: tinycolor.Instance): void { - $(".colorpicker").spectrum("destroy"); - $(".colorpicker").spectrum(sidebar_popover_colorpicker_options_full); - const stream_id = Number.parseInt($(this).attr("stream_id")!, 10); - const hex_color = color.toHexString(); - stream_settings_api.set_color(stream_id, hex_color); -} - -export const sidebar_popover_colorpicker_options = { - clickoutFiresChange: true, - showPaletteOnly: true, - showPalette: true, - showInput: true, - flat: true, - palette: stream_color_palette, - change: picker_do_change_color, -}; diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index 905354db62..fe0f516464 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -273,20 +273,6 @@ } } - #stream-actions-menu-popover .sp-container { - background-color: transparent; - - & button { - background-color: hsl(208deg 35% 11%); - border: 1px solid hsl(210deg 36% 4%); - color: hsl(236deg 31% 90%); - } - - .sp-picker-container { - border-left: solid 1px hsl(210deg 36% 4%); - } - } - .stream_header_colorblock.disabled { filter: brightness(50%); } diff --git a/web/styles/popovers.css b/web/styles/popovers.css index 4aff545cad..09b2290812 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -8,11 +8,6 @@ /* Basic Tippy popovers scale with the base font-size. */ font-size: var(--base-font-size-px); - .sp-input { - /* Override incorrect color for text in dark theme. */ - color: var(--color-text-default) !important; - } - .tippy-content { /* We set the font-size here to override the default value in the upstream tippy.css */ @@ -223,10 +218,6 @@ } } -.sp-container { - z-index: 106; -} - #stream-actions-menu-popover, #stream-card-popover { .popover-stream-name { @@ -250,48 +241,6 @@ .popover-stream-info-menu-description { color: var(--color-text-popover-menu); } - - .colorpicker-container { - display: none; - margin-right: 10px; - - .sp-container { - /* The base-font size for the color container is 12px, - inherited from the upstream spectrum.css file. */ - background-color: hsl(0deg 0% 100%); - cursor: pointer; - border: none; - - .sp-palette-container { - border-right: none; - } - - & input { - box-sizing: inherit; /* IE */ - box-sizing: initial; - - width: calc(100% - 13px); - } - - & button { - background-color: hsl(0deg 0% 100%); - background-image: none; - border: 1px solid hsl(0deg 0% 80%); - border-radius: 4px; - color: hsl(0deg 0% 25%); - /* 12px at 12px/1em */ - font-size: 1em; - padding: 6px; - text-transform: capitalize; - text-align: center; - text-shadow: none; - } - - .sp-picker-container { - border-left: solid 1px hsl(0deg 0% 88%); - } - } - } } #topic-actions-menu-popover { @@ -738,40 +687,6 @@ ul.popover-group-menu-member-list { } @media (width < $md_min) { - .colorpicker-popover { - display: flex !important; - justify-content: center; - align-items: center; - - /* these are to override JS embedded inline styles. */ - top: 0 !important; - left: 0 !important; - margin: 0 !important; - width: 100%; - height: 100%; - - background-color: hsl(0deg 0% 0% / 70%); - border-radius: 0; - border: none; - - pointer-events: none; - - .popover-inner { - background-color: hsl(0deg 0% 100%); - pointer-events: all; - } - - @media (width < $sm_min) { - .popover-inner { - width: 70%; - } - - .sp-picker-container { - border-left: none !important; - } - } - } - .popover-flex { position: absolute; top: 0 !important; diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index a094beb0e0..2fdfda4530 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -29,18 +29,6 @@ border-radius: 4px; } -.sp-preview { - width: 20px; - border: none; - box-shadow: 0 0 1px hsl(0deg 0% 0%); -} - -.sp-replacer { - margin-right: 12px; - border: none; - box-shadow: 0 0 2px hsl(0deg 0% 0% / 80%); -} - .stream-email .email-address { display: block; margin: auto; @@ -1068,10 +1056,6 @@ h4.user_group_setting_subsection_title { border-bottom: none; } - .sp-replacer { - box-shadow: none; - } - & input[type="radio"] { margin-right: 5px; } diff --git a/web/styles/zulip.css b/web/styles/zulip.css index db198e0b73..5ddaa11029 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -689,11 +689,6 @@ strong { white-space: pre-wrap; } -.sp-input { - width: calc(100% - 14px); - box-sizing: initial !important; -} - .logout { white-space: nowrap; }