From 6d520ff1ddb74e7257e1d943f8e91117079db675 Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Sun, 12 Sep 2021 13:24:51 +0530 Subject: New recipe: 'dialpad' (#695) --- recipes/dialpad/darkmode.css | 595 ++++++++++++++++++++++++++++++++++++++++++ recipes/dialpad/icon.svg | 17 ++ recipes/dialpad/index.js | 1 + recipes/dialpad/package.json | 11 + recipes/dialpad/webview.js | 16 ++ recipes/dialpad/whitemode.css | 3 + 6 files changed, 643 insertions(+) create mode 100644 recipes/dialpad/darkmode.css create mode 100644 recipes/dialpad/icon.svg create mode 100644 recipes/dialpad/index.js create mode 100644 recipes/dialpad/package.json create mode 100644 recipes/dialpad/webview.js create mode 100644 recipes/dialpad/whitemode.css (limited to 'recipes') diff --git a/recipes/dialpad/darkmode.css b/recipes/dialpad/darkmode.css new file mode 100644 index 0000000..0ec1e40 --- /dev/null +++ b/recipes/dialpad/darkmode.css @@ -0,0 +1,595 @@ +body { + background-color: #282828; + color: #ebdbb2; +} +.header-3, .header-4 { + color: #ebdbb2; +} +.link { + color: #458588; +} + +/* loading */ +.scroll-man-loading .table-loading { + background-image: url(/static/img/app/black_paging.gif) !important; +} + +/* headers/settings */ +#app-settings, #sm-container, #header-bar, #app-version-container { + background-color: #504945 !important; +} +.d-svg.d-svg--system { + fill: #ebdbb2; +} +.app-settings-action { + color: #ebdbb2; +} +.app-settings-btn { + border: 1px solid #ebdbb2; +} +.app-settings-btn:hover { + color: #ebdbb2; + border: 1px solid #ebdbb2; + background-color: hsla(0, 0%, 84.7%, .3); +} +.body-copy-4 { + color: #a89984; +} +.status-menu, .d-input--sm { + background-color: #282828; + border: 1px solid hsla(0, 0%, 84.7%, .3); + color: #ebdbb2; +} +.status-menu-timer div, .status-menu__save { + color: #458588 !important; +} +.status-menu__save:hover { + text-decoration: none; +} +.settings-link:hover, .sm-suggested-status:hover { + background-color: hsla(0, 0%, 84.7%, .3); +} +.wn-header { + border-bottom: 1px solid #504945; +} +.wn-log-link { + border-top: 1px solid #504945; +} +.wn-log-link a { + color: #458588; +} +.wn-row { + background-color: #3c3836; + border-bottom: 1px solid #504945; +} +.wn-row-seen { + background-color: #282828; +} +.wn-row-title, .wn-row-link a { + color: #458588; +} +.wn-row-description { + color: #ebdbb2; +} +.wn-row-date { + color: #ab9984; +} + +/* alerts */ +#harness-warning, .whats-new-alert-icon__container, #alertbar .alert2 { + /* I know this is a different color, but... man that alert is loud. */ + background-color: #af3a03; +} +#harness-download { + color: #ebdbb2; + background-color: #504945; +} +#alertbar-table>tbody>tr>td, .alertbar-external-link { + color: #ebdbb2; +} +svg.icon-dnd_off-inv, svg.icon-dropdown-inv, svg.icon-emoji-inv, svg.icon-error-inv, svg.icon-error_smallx, svg.icon-plus-inv, svg.icon-popup_x-inv, svg.icon-sad_face-inv { + fill: #ebdbb2; + stroke: #ebdbb2; +} +.snooze-dropdown-title { + border:1px solid #af3a03; +} +.body-copy-20 { + color: #af3a03; +} + +/* summary pages */ +.filtered-transcript-table:hover, table.filtered>tbody>tr:hover { + background-color: hsla(0, 0%, 84.7%, .3); +} +.filtered-transcript-table>tr>td, table.filtered>tbody>tr>td { + border-bottom: 1px solid #3c3836; +} +.filter-tabs { + border-bottom: 3px solid #504945; +} +.filter-tabs .item.selected { + border-bottom: 3px solid #458588; +} +.filter-tabs .item:hover { + color: #ebdbb2; +} +.filter-3 { + color: #ebdbb2; +} +.filter-4 { + color: #ab9984; +} +.subhead-9, .subhead-12 { + color: #a89984; +} +.filter-desc { + border-bottom: 1px solid #3c3836; +} + +#filter-icon svg { + fill: #a89984; + stroke: #a89984; +} +.tooltip-callout, .tooltip-content { + background-color: #282828; + color: #ebdbb2; +} +.tooltip-content { + border: 1px solid #3c3836; +} + +.filtered-transcript-table:hover, table.filtered>tbody>tr:hover { + /* + There's a bug which causes this to get applied *twice* on hover. That + doesn't matter when the background is white, but that doesn't work for us, + so we can't just do: + + background-color: hsla(0, 0%, 84.7%, .3); + + Fortunately, when can just pre-calculate this. Math to the rescue! + Convenient calculator: http://marcodiiga.github.io/rgba-to-rgb-conversion + + #282828 + hsla(0, 0%, 84.7%, .3) = #5d5d5d + */ + background-color: #5d5d5d; +} +.subhead-3 { + color: #bdae93; +} +svg.contact-fav-heart { + fill: #bdae93; + stroke: #bdae93; +} +svg.contact-fav-heart.contact-fav-heart-filled { + fill: #458588; + stroke: #458588; +} + +table.filtered.empty .filtered-transcript-table:hover, table.filtered.empty>tbody>tr:hover { + /* + I wonder why this rule exists? In vanilla Dialpad, it just forces the + background color to be white on hover for a bunch of resources... which are + already white. + */ + background-color: #282828; +} + +/* conversation view */ +.cr-text .cr-container { + background-color: #3c3836; +} +.cr-me.cr-text .cr-container { + /* the Gruvbox color looks too bright here */ + /* background-color: #83a598; */ + background-color: rgba(68, 85, 136, 0.5); +} +.feed-item-text, .feed-item-rich-media-inline { + background-color: #3c3836 !important; + --highlight-color: #504945 !important; +} +.feed-item-mms { + background-color: #3c3836 !important; +} +.rich-media-link, .rich-media-mention, .feed-rich-media-mention.base-rich-media-mention { + color: #458588 !important +} + +.contact-blocked { + color: #af3a03; +} +#unknown-number, .rate-item { + background-color: #458588; + color: #ebdbb2; +} + +.d-btn--primary { + background-color: #458588; + border-color: #458588; +} +.d-btn--primary:hover { + background-color: #83a598; +} +.d-btn--outlined { + border-color: #458588; +} + +.c-menu-box { + border: 1px solid hsla(0, 0%, 84.7%, .3); +} +.c-did-header { + background-color: #504945; +} +.c-did-list, .c-did-list .selected { + color: #ebdbb2; +} +.c-did-list li:hover { + background-color: hsla(0, 0%, 84.7%, .3); + color: #ebdbb2; +} + +.contact-bar-wrapper { + border-bottom: 1px solid #3c3836; +} +.contact-search-text { + color: #83a598; +} +svg.contact-search-svg { + fill: #83a598; +} +.body-copy-7, .body-copy-8, .body-copy-9, .body-copy-32, .body-copy-33, .stamp-2 { + color: #ebdbb2 !important; +} +.stamp-3 { + color: #a89984; +} + +.markdown-code-block, .rich-media-codeblock { + background-color: #32302f; + border: 1px solid #504945; + border-radius: 0; +} + +.feed-item-base:hover .feed-item-actions--transparent-background, .feed-item-actions { + background-color: hsla(0, 0%, 84.7%, .3) !important; +} + +.feed-item-rich-media-card { + background-color: hsla(0, 0%, 0%, 0) !important; +} + +.rich-media-uc-card { + border: 0rem !important; +} + +.rich-media-uc-card .rich-media-uc-card__content { + background-color: #3c3836 !important; +} + +#conversation-progress-bar { + background-color: #3c3836; +} +.message-text-container { + background-color: #282828; +} + +.feed-item-call--incoming, .feed-item-call--incoming .feed-item-call-highlights__content, .feed-item-call__footer--incoming, .feed-item-call__footer--incoming .feed-item-call-highlights__content, .feed-item-call--cancelled, .feed-item-call--cancelled .feed-item-call-highlights__content, .feed-item-call--outgoing, .feed-item-call--outgoing .feed-item-call-highlights__content, .feed-item-call__footer--cancelled, .feed-item-call__footer--cancelled .feed-item-call-highlights__content, .feed-item-call__footer--outgoing, .feed-item-call__footer--outgoing .feed-item-call-highlights__content { + background-color: #3c3836; +} +.feed-item-base:hover .feed-item-call--incoming, .feed-item-base:hover .feed-item-call--incoming .feed-item-call-highlights__content, .feed-item-base:hover .feed-item-call__footer--incoming, .feed-item-base:hover .feed-item-call__footer--incoming .feed-item-call-highlights__content, .feed-item-base:hover .feed-item-call--cancelled, .feed-item-base:hover .feed-item-call--cancelled .feed-item-call-highlights__content, .feed-item-base:hover .feed-item-call--outgoing, .feed-item-base:hover .feed-item-call--outgoing .feed-item-call-highlights__content, .feed-item-base:hover .feed-item-call__footer--cancelled, .feed-item-base:hover .feed-item-call__footer--cancelled .feed-item-call-highlights__content, .feed-item-base:hover .feed-item-call__footer--outgoing, .feed-item-base:hover .feed-item-call__footer--outgoing .feed-item-call-highlights__content { + background-color: hsla(0, 0%, 84.7%, .3); +} +.feed-item-base__time { + color: #ebdbb2 !important; +} +.feed-item-actions-button:hover { + background-color: hsla(0, 0%, 84.7%, .3) !important; +} +.feed-item-actions__summary { + color: #458588 !important; +} + +.feed-list__is-typing { + background-color: #504945 !important; + color: #ebdbb2 !important; + padding-left: 1rem; +} + +/* left bar */ +#sidebar { + border-right-color: #504945; +} +.leftbar, .leftbar-cta { + background-color: #504945; +} +.leftbar-section { + background-color: #504945; +} +.leftbar-cta__btn { + background-color: #258588; + border-left-color: #83a598; + border-right-color: #83a598; +} +.leftbar-cta__btn--first { + border-left-width: 0; +} +.leftbar-cta__btn--last { + border-right-width: 0; +} +.leftbar-cta__btn:hover { + background-color: #83a598; +} +.leftbar-section__list li a:hover, .leftbar-links__link:hover, .leftbar-links__link--selected { + background-color: hsla(0, 0%, 84.7%, .3);; +} +.leftbar-section__list li a, .leftbar-links__link, .leftbar-section-header { + color: #ebdbb2; +} +.leftbar-section-item__status { + color: #a89984; +} +.leftbar-section-item--selected .leftbar-section-item__status { + color: #ebdbb2; +} +.leftbar-section-item:active { + background-color: #504945; + border-color: #504945; +} + +/* right bar */ +#rightbar { + background-color: #282828; + border-left-color: #504945 !important; +} +.header-v2-5 { + color: #a89984; +} +.subhead-4 { + color: #ebdbb2; +} +.contact-info-divider { + border-top: 1px solid #3c3836; +} + +svg.icon-add-contact, svg.icon-add-field, svg.icon-new-tab, .hide-button svg, .remove-row svg, .contact-info-left-column .iblock svg.icon-contact-info { + stroke: #83a598; + fill: #83a598; +} +.subhead-2 { + color: #83a598; +} + +/* TODO: scrollbar colors? */ +.nav-divider { + border-color: #3c3836; +} +.body-copy-v2-1, .header-v2-11, .header-v2-12 { + color: #ebdbb2; +} +.contact-group-contact-row:hover { + background-color: hsla(0, 0%, 84.7%, .3); +} + +.wlink, a.wlink, .contact-label__add-or-edit, .contact-label__save { + color: #458588; +} + +/* tooltips */ +.c-menu-box { + background-color: #282828; +} +.c-menu .c-menu-item .c-menu-item-a:focus, .c-menu .c-menu-item .c-menu-item-a:hover { + background-color: rgba(68, 85, 136, 0.5); + color: #a89984; +} +.c-menu .c-menu-item .c-menu-item-a { + color: #a89984; +} + +/* new message */ +/* TODO font*/ +#new-message-search-overlay { + background-color: #282828; +} +.target-menu-single-item { + color: #458588; +} +#new-message-search-view .search-overlay #search-input::-webkit-input-placeholder, #search-input[contentEditable=true]:empty:before { + color: #ebdbb2; +} +.header-7, .header-8, .header-9 { + color: #ebdbb2; +} +#search-input:focus { + outline: none; +} +.stamp-4 { + color: #ebdbb2; +} + +/* search */ +.search-overlay { + background-color: #282828; +} +.search-overlay input#search-input { + color: #ebdbb2; +} +.search-overlay input#search-input::placeholder { + color: #ebdbb2; + opacity: 50%; +} +#multi-column-container { + background-color: #3c3836; +} +.filtered-transcript-table:hover, .frequent-contact-suggestions-column tr:hover, table.filtered>tbody>tr:hover { + background-color: hsla(0, 0%, 84.7%, .3); +} + +.search-tab__results--selected { + color: #ebdbb2; +} +.search-tab__badge--selected { + background-color: #458588; +} +svg.icon-contact-info { + fill: #458488; +} + +.search-overlay .selected { + background-color: hsla(0, 0%, 84.7%, .3); +} + +/* shared calls */ +.branding-background { + background: #458588; +} +.branding-header-type svg.voiceai-vi-mark { + height: 20px !important; /* not exactly "dark mode", but its nice when things are the right size... */ +} +.branding-main { + background-color: #282828; + border-radius: 0; +} + +.cr-search__input { + background-color: #3c3836 !important; + border: #3c3836 !important; + border-radius: 0 !important; + color: #ebdbb2 !important; +} +.cr-search__input::placeholder { + color: #ebdbb2 !important; + opacity: 50%; +} +.cr-share { + background-color: #458588 !important; + color: #ebdbb2 !important; +} + +.cr-nav-header { + background-color: #3c3836; + color: #ebdbb2; +} +.cr-nav-header__tooltip-icon { + background-color: #a89984; + color: #458588; +} +.cr-nav-category__container--selected, .cr-nav-category__container:active { + background-color: #a89984; +} +.cr-nav-category__container:hover:not(.cr-nav-category__container--selected) { + background-color: #bdae93; +} + +.cr-playbar-container { + background-color: #504945; +} +.cr-playbar .audio-seek-bar-clickable { + background-color: #fbf1c7; +} +.base-call-recording-controls__play-button .base-audio-icon-container { + background-color: #458588; + color: #ebdbb2; +} +svg.base-audio-icon { + fill: #ebdbb2; +} +.cr-playbar__recording-handle { + background-color: #d5c4a1 +} +.cr-playbar__recording-handle::before { + color: #458588; +} +.base-media-dropdown-speed-control__select-button { + color: #458588 !important; +} +.cr-playbar__show-caller-button { + color: #458588; + border-color: #a89984 !important; +} +.dropdown-menu-callout { + background-color: #504945; + border-color: #7c6f64; + border-radius: 0; +} +.dropdown-menu-item { + color: #ebdbb2; +} +.dropdown-menu-item--highlight, .dropdown-menu-item:hover { + background-color: hsla(0, 0%, 84.7%, .3); + border-radius: 0; +} + +.cr-tab-active { + border-bottom-color: #ebdbb2 !important; +} +.cr-participant-filter__text, .cr-participant-filter__text:hover { + color: #458588; +} +.vue-checkbox__input:checked { + background-color: #458588; + border-color: #458588; +} + +.cr-nav-header__tooltip { + border-radius: 0; + background-color: #504945; + border-color: #7c6f64; + color: #ebdbb2; +} +.cr-nav-header__tooltip-link { + color: #458588 !important; +} + +.cr-row-controls-wrapper--highlight, .cr-row-controls-wrapper--highlight:hover { + background-color: #504945 !important; +} +.cr-row-controls-wrapper:hover { + background-color: #7c6f64; +} + +.cr-excerpts-section-item { + background-color: #504945; +} +.cr-excerpts-section-item__header { + color: #ebdbb2; +} +.cr-excerpts-section-header:hover { + background-color: #7c6f64 !important; +} +.cr-excerpts-section-item__timestamp { + color: #a89984; +} +.cr-excerpts-section-item:hover { + background-color: #7c6f64; +} +.cr-excerpts-section-item--selected { + background-color: #665c54 !important; +} +.pageable-list-default-button { + background-color: #7c6f64 !important; + color: #ebdbb2 !important; +} +.cr-excerpts-section-header, .cr-excerpts-section-item { + border-radius: 0 !important; +} +.cr-excerpts-section-item__text .highlight, .cr-transcript-row-text .cr-transcript-row-text__text span.highlight { + border-radius: 0; + background-color: #928374 !important; + padding: 1px; /* readability */ +} + +.cr-ch-login-button { + background-color: #458588 !important; + color: #ebdbb2 !important; +} +.call-review-rightbar-transcript { + background-color: #504945; +} +.cr-rightbar-transcript__close-button { + right: 1.8rem; /* someone forgot about scrollbars */ +} + +.branding-footer-item-button { + color: #458588 !important; +} diff --git a/recipes/dialpad/icon.svg b/recipes/dialpad/icon.svg new file mode 100644 index 0000000..b08ac56 --- /dev/null +++ b/recipes/dialpad/icon.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/recipes/dialpad/index.js b/recipes/dialpad/index.js new file mode 100644 index 0000000..23607bd --- /dev/null +++ b/recipes/dialpad/index.js @@ -0,0 +1 @@ +module.exports = Ferdi => Ferdi; diff --git a/recipes/dialpad/package.json b/recipes/dialpad/package.json new file mode 100644 index 0000000..d2a97d2 --- /dev/null +++ b/recipes/dialpad/package.json @@ -0,0 +1,11 @@ +{ + "id": "dialpad", + "name": "Dialpad", + "version": "1.0.0", + "license": "MIT", + "repository": "https://github.com/TheKevJames/franz-recipe-dialpad", + "config": { + "serviceURL": "https://dialpad.com/app", + "hasNotificationSound": true + } +} diff --git a/recipes/dialpad/webview.js b/recipes/dialpad/webview.js new file mode 100644 index 0000000..2bf23f3 --- /dev/null +++ b/recipes/dialpad/webview.js @@ -0,0 +1,16 @@ +const _path = _interopRequireDefault(require('path')); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +module.exports = (Ferdi) => { + function getMessages() { + var unreadCount = 0; + $.each($('[data-qa-has-unreads]'), (idx, item) => unreadCount += Ferdi.safeParseInt(item.attributes["data-qa-has-unreads"].value)); + + Ferdi.setBadge(unreadCount); + } + + Ferdi.loop(getMessages); + + Ferdi.injectCSS(_path.default.join(__dirname, 'whitemode.css')); +}; diff --git a/recipes/dialpad/whitemode.css b/recipes/dialpad/whitemode.css new file mode 100644 index 0000000..c574989 --- /dev/null +++ b/recipes/dialpad/whitemode.css @@ -0,0 +1,3 @@ +#center-column { + background-color: #fff !important; +} -- cgit v1.2.3-54-g00ecf