Skip to content

Commit

Permalink
Updated modal design to KudoAI scripts' style
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamlui
adamlui committed Dec 19, 2024
1 parent 77069c7 commit f3d44c6
Show file tree
Hide file tree
Showing 15 changed files with 477 additions and 261 deletions.
62 changes: 36 additions & 26 deletions autoclear-chatgpt-history/greasemonkey/autoclear-chatgpt-history.user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@
// @description:zu Ziba itshala lokucabanga okuzoshintshwa ngokuzenzakalelayo uma ukubuka chatgpt.com
// @author Adam Lui
// @namespace https://github.com/adamlui
// @version 2024.12.19
// @version 2024.12.19.1
// @license MIT
// @icon https://media.autoclearchatgpt.com/images/icons/openai/black/icon48.png?a8868ef
// @icon64 https://media.autoclearchatgpt.com/images/icons/openai/black/icon64.png?a8868ef
Expand Down Expand Up @@ -268,12 +268,13 @@

// Init ENV context
const env = {
browser: { language: chatgpt.getUserLanguage() },
browser: { language: chatgpt.getUserLanguage(), isMobile: chatgpt.browser.isMobile() },
scriptManager: {
name: (() => { try { return GM_info.scriptHandler } catch (err) { return 'unknown' }})(),
version: (() => { try { return GM_info.version } catch (err) { return 'unknown' }})()
}
}
env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
const xhr = typeof GM != 'undefined' && GM.xmlHttpRequest || GM_xmlhttpRequest

// Init APP data
Expand Down Expand Up @@ -515,25 +516,40 @@
}
this.styles.innerText = (
`.${this.class} {`
+ 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
+ 'position: absolute ;' // to be click-draggable
+ `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : '#b5b5b5' } !important ;`
+ `background-image: linear-gradient(180deg, ${
chatgpt.isDarkMode() ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) ;`
+ 'opacity: 0 ;' // to fade-in
+ 'transform: translateX(-4px) translateY(7px) !important ;' // offset to move-in from
+ 'transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-ins
+ 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ `.${this.class}-bg { transition: background-color .25s ease }` // speed to show dim bg
+ `.${this.class}-bg.animated > div {` // modal fade/translate-in
+ 'z-index: 13456 ; opacity: 0.98 ; transform: translate(0,0) !important }'
+ `.${this.class} [class*="modal-close-btn"] {`
+ 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
+ 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
+ `.${this.class} [class*="modal-close-btn"] path {`
+ `${ chatgpt.isDarkMode() ? 'stroke: white ; fill: white' : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+ ( chatgpt.isDarkMode() ? // invert dark mode hover paths
`.${this.class} [class*="modal-close-btn"]:hover path { stroke: black ; fill: black }` : '' )
+ `.${this.class} [class*="modal-close-btn"]:hover { background-color: #f2f2f2 }` // hover underlay
+ `.${this.class} [class*="modal-close-btn"] svg { margin: 11.5px }` // center SVG for hover underlay
+ `.${this.class} a { color: #${ chatgpt.isDarkMode() ? '00cfff' : '1e9ebb' } !important }`
+ `.${this.class} button {`
+ 'font-size: 0.77rem ; text-transform: uppercase ;' // shrink/uppercase labels
+ 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels
+ 'border-radius: 0 !important ;' // square borders
+ 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
+ 'cursor: pointer !important ;' // add finger cursor
+ 'padding: 5px !important ; min-width: 102px }' // resize
+ `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : 'black' } !important ;`
+ 'padding: 8px !important ; min-width: 102px }' // resize
+ `.${this.class} button:hover {` // add zoom, re-scheme
+ 'transform: scale(1.055) ; color: black !important ;'
+ `background-color: #${ chatgpt.isDarkMode() ? '00cfff' : '9cdaff' } !important }`
+ ( !env.browser.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},

Expand Down Expand Up @@ -585,38 +601,34 @@

about() {

// Init styles
const headingStyle = 'font-size: 1.15rem',
pStyle = 'position: relative ; left: 3px',
pBrStyle = 'position: relative ; left: 4px ',
aStyle = 'color: ' + ( chatgpt.isDarkMode() ? '#c67afb' : '#8325c4' ) // purple

// Show modal
const aboutModal = modals.alert(
`${app.symbol} ${app.msgs.appName}`, // title
`<span style="${headingStyle}"><b>🏷️ <i>${app.msgs.about_version}</i></b>: </span>`
+ `<span style="${pStyle}">${app.version}</span>\n`
+ `<span style="${headingStyle}"><b>⚡ <i>${app.msgs.about_poweredBy}</i></b>: </span>`
+ `<span style="${pStyle}">`
+ `<a style="${aStyle}" href="${app.urls.chatgptJS}" target="_blank" rel="noopener">`
+ `chatgpt.js</a> v${app.chatgptJSver}</span>\n`
+ `<span style="${headingStyle}"><b>📜 <i>${app.msgs.about_sourceCode}</i></b>:</span>\n`
+ `<span style="${pBrStyle}"><a href="${app.urls.gitHub}" target="_blank" rel="nopener">`
+ app.urls.gitHub + '</a></span>',
`🏷️ ${app.msgs.about_version}: <span class="about-em">${app.version}</span>\n`
+ `⚡ ${app.msgs.about_poweredBy}: `
+ `<a href="${app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`
+ ` v${app.chatgptJSver}\n`
+ `📜 ${app.msgs.about_sourceCode}: `
+ `<a href="${app.urls.gitHub}" target="_blank" rel="nopener">`
+ app.urls.gitHub + '</a>',
[ // buttons
function checkForUpdates() { updateCheck() },
function getSupport(){},
function rateUs() {},
function moreAIextensions(){}
], '', 546 // set width
], '', 656 // set width
)

// Format text
aboutModal.querySelector('h2').style.cssText = 'text-align: center ; font-size: 37px ; padding: 9px'
aboutModal.querySelector('p').style.cssText = 'text-align: center'
aboutModal.querySelector('h2').style.cssText = (
'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
aboutModal.querySelector('p').style.cssText = (
'text-align: center ; overflow-wrap: anywhere ;'
+ `margin: ${ env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )

// Hack buttons
aboutModal.querySelectorAll('button').forEach(btn => {
btn.style.cssText = 'height: 58px ; min-width: 136px ; text-align: center'

// Replace link buttons w/ clones that don't dismiss modal
if (/support|rate|extensions/i.test(btn.textContent)) {
Expand Down Expand Up @@ -911,8 +923,6 @@

menu.register() // create browser toolbar menu

modals.open('about')

// Init UI props
await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]) // initial UI loaded
await chatgpt.sidebar.isLoaded()
Expand All @@ -933,8 +943,8 @@
toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() }
}).observe(document.body, { attributes: true, subtree: true })

// Monitor SCHEME CHANGES to update sidebar toggle color
new MutationObserver(() => toggles.sidebar.updateColor())
// Monitor SCHEME CHANGES to update sidebar toggle + modal colors
new MutationObserver(() => { toggles.sidebar.updateColor() ; modals.stylize() })
.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })

// Disable distracting SIDEBAR CLICK-ZOOM effect
Expand Down
79 changes: 51 additions & 28 deletions chatgpt-auto-continue/chromium/extension/components/modals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
// updateCheck (userscript only) }
// isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
Expand Down Expand Up @@ -43,8 +43,14 @@ window.modals = {

init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
dom.fillStarryBG(modal)
modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
modal.onmousedown = this.dragHandlers.mousedown // add drag handler
dom.fillStarryBG(modal) // add Rising Stars bg
setTimeout(() => {
modal.parentNode.style.backgroundColor = ( // dim bg
`rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
}, 100) // delay for transition fx
},

stylize() {
Expand All @@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
`.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
+ ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
`.${this.class} {`
+ 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
+ 'position: absolute ;' // to be click-draggable
+ `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : '#b5b5b5' } !important ;`
+ `background-image: linear-gradient(180deg, ${
chatgpt.isDarkMode() ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) ;`
+ 'opacity: 0 ;' // to fade-in
+ 'transform: translateX(-4px) translateY(7px) !important ;' // offset to move-in from
+ 'transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-ins
+ 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ `.${this.class}-bg { transition: background-color .25s ease }` // speed to show dim bg
+ `.${this.class}-bg.animated > div {` // modal fade/translate-in
+ 'z-index: 13456 ; opacity: 0.98 ; transform: translate(0,0) !important }'
+ `.${this.class} [class*="modal-close-btn"] {`
+ 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
+ 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
+ `.${this.class} [class*="modal-close-btn"] path {`
+ `${ chatgpt.isDarkMode() ? 'stroke: white ; fill: white' : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+ ( chatgpt.isDarkMode() ? // invert dark mode hover paths
`.${this.class} [class*="modal-close-btn"]:hover path { stroke: black ; fill: black }` : '' )
+ `.${this.class} [class*="modal-close-btn"]:hover { background-color: #f2f2f2 }` // hover underlay
+ `.${this.class} [class*="modal-close-btn"] svg { margin: 11.5px }` // center SVG for hover underlay
+ `.${this.class} a { color: #${ chatgpt.isDarkMode() ? '00cfff' : '1e9ebb' } !important }`
+ `.${this.class} button {`
+ 'font-size: 0.77rem ; text-transform: uppercase ;' // shrink/uppercase labels
+ 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels
+ 'border-radius: 0 !important ;' // square borders
+ 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
+ 'cursor: pointer !important ;' // add finger cursor
+ 'padding: 5px !important ; min-width: 102px }' // resize
+ `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : 'black' } !important ;`
+ 'padding: 8px !important ; min-width: 102px }' // resize
+ `.${this.class} button:hover {` // add zoom, re-scheme
+ 'transform: scale(1.055) ; color: black !important ;'
+ `background-color: #${ chatgpt.isDarkMode() ? '00cfff' : '9cdaff' } !important }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},

Expand Down Expand Up @@ -116,12 +145,6 @@ window.modals = {

about() {

// Init styles
const headingStyle = 'font-size: 1.15rem',
pStyle = 'position: relative ; left: 3px',
pBrStyle = 'position: relative ; left: 4px ',
aStyle = 'color: ' + ( chatgpt.isDarkMode() ? '#c67afb' : '#8325c4' ) // purple

// Init buttons
const modalBtns = [
function getSupport(){},
Expand All @@ -134,28 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
`<span style="${headingStyle}"><b>🏷️ <i>${this.getMsg('about_version')}</i></b>: </span>`
+ `<span style="${pStyle}">${this.dependencies.app.version}</span>\n`
+ `<span style="${headingStyle}"><b>⚡ <i>${this.getMsg('about_poweredBy')}</i></b>: </span>`
+ `<span style="${pStyle}">`
+ `<a style="${aStyle}" href="${this.dependencies.app.urls.chatgptJS}" target="_blank"`
+ ` rel="noopener">chatgpt.js</a> v${this.dependencies.app.chatgptJSver}</span>\n`
+ `<span style="${headingStyle}"><b>📜 <i>${this.getMsg('about_sourceCode')}</i></b>:</span>\n`
+ `<span style="${pBrStyle}"><a href="${this.dependencies.app.urls.gitHub}" target="_blank"`
+ ` rel="noopener">${this.dependencies.app.urls.gitHub}</a></span>`,
modalBtns, '',
/Chromium|Firefox/.test(this.env.runtime) ? 529 : 546 // set width
`🏷️ ${this.getMsg('about_version')}: <span class="about-em">${this.dependencies.app.version}</span>\n`
+ `⚡ ${this.getMsg('about_poweredBy')}: `
+ `<a href="${this.dependencies.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`
+ ` v${this.dependencies.app.chatgptJSver}\n`
+ `📜 ${this.getMsg('about_sourceCode')}: `
+ `<a href="${this.dependencies.app.urls.gitHub}" target="_blank" rel="nopener">`
+ this.dependencies.app.urls.gitHub + '</a>',
modalBtns, '', 656
)

// Format text
aboutModal.querySelector('h2').style.cssText = 'text-align: center ; font-size: 37px ; padding: 9px'
aboutModal.querySelector('p').style.cssText = 'text-align: center'
aboutModal.querySelector('h2').style.cssText = (
'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
aboutModal.querySelector('p').style.cssText = (
'text-align: center ; overflow-wrap: anywhere ;'
+ `margin: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )

// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
btn.style.cssText = 'cursor: pointer !important ;'
+ `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`

// Replace link buttons w/ clones that don't dismiss modal
if (/support|rate|extensions/i.test(btn.textContent)) {
Expand Down
7 changes: 6 additions & 1 deletion chatgpt-auto-continue/chromium/extension/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@

// Init ENV context
const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)

// Import APP data
const { app } = await chrome.storage.sync.get('app')
modals.dependencies.import({ app, isMobile: env.browser.isMobile })
modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })

// Add CHROME MSG listener
chrome.runtime.onMessage.addListener(req => {
Expand Down Expand Up @@ -88,4 +89,8 @@
notify(`${chrome.i18n.getMessage('mode_autoContinue')}: ${ chrome.i18n.getMessage('state_on').toUpperCase()}`)
}

// Monitor SCHEME CHANGES to update modal colors
new MutationObserver(() => { modals.stylize() })
.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })

})()
Loading

0 comments on commit f3d44c6

Please sign in to comment.