parent
321fa41930
commit
bdbbd06dad
73 changed files with 566 additions and 371 deletions
@ -0,0 +1,12 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Settings::BaseController < ApplicationController |
||||
layout 'admin' |
||||
|
||||
before_action :authenticate_user! |
||||
before_action :set_pack |
||||
|
||||
def set_pack |
||||
use_pack 'settings' |
||||
end |
||||
end |
@ -1 +0,0 @@ |
||||
// This file will be loaded on about pages, regardless of theme.
|
@ -1 +0,0 @@ |
||||
// This file will be loaded on home pages, regardless of theme.
|
@ -1 +1,25 @@ |
||||
// This file will be loaded on public pages, regardless of theme.
|
||||
|
||||
const { delegate } = require('rails-ujs'); |
||||
|
||||
delegate(document, '.webapp-btn', 'click', ({ target, button }) => { |
||||
if (button !== 0) { |
||||
return true; |
||||
} |
||||
window.location.href = target.href; |
||||
return false; |
||||
}); |
||||
|
||||
delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => { |
||||
const contentEl = target.parentNode.parentNode.querySelector('.e-content'); |
||||
|
||||
if (contentEl.style.display === 'block') { |
||||
contentEl.style.display = 'none'; |
||||
target.parentNode.style.marginBottom = 0; |
||||
} else { |
||||
contentEl.style.display = 'block'; |
||||
target.parentNode.style.marginBottom = null; |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
|
@ -1,65 +1,37 @@ |
||||
// This file will be loaded on settings pages, regardless of theme.
|
||||
|
||||
function main() { |
||||
const { length } = require('stringz'); |
||||
const { delegate } = require('rails-ujs'); |
||||
const { length } = require('stringz'); |
||||
const { delegate } = require('rails-ujs'); |
||||
|
||||
delegate(document, '.webapp-btn', 'click', ({ target, button }) => { |
||||
if (button !== 0) { |
||||
return true; |
||||
} |
||||
window.location.href = target.href; |
||||
return false; |
||||
}); |
||||
delegate(document, '.account_display_name', 'input', ({ target }) => { |
||||
const nameCounter = document.querySelector('.name-counter'); |
||||
|
||||
delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => { |
||||
const contentEl = target.parentNode.parentNode.querySelector('.e-content'); |
||||
|
||||
if (contentEl.style.display === 'block') { |
||||
contentEl.style.display = 'none'; |
||||
target.parentNode.style.marginBottom = 0; |
||||
} else { |
||||
contentEl.style.display = 'block'; |
||||
target.parentNode.style.marginBottom = null; |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
|
||||
delegate(document, '.account_display_name', 'input', ({ target }) => { |
||||
const nameCounter = document.querySelector('.name-counter'); |
||||
|
||||
if (nameCounter) { |
||||
nameCounter.textContent = 30 - length(target.value); |
||||
} |
||||
}); |
||||
|
||||
delegate(document, '.account_note', 'input', ({ target }) => { |
||||
const noteCounter = document.querySelector('.note-counter'); |
||||
if (nameCounter) { |
||||
nameCounter.textContent = 30 - length(target.value); |
||||
} |
||||
}); |
||||
|
||||
if (noteCounter) { |
||||
const noteWithoutMetadata = processBio(target.value).text; |
||||
noteCounter.textContent = 500 - length(noteWithoutMetadata); |
||||
} |
||||
}); |
||||
delegate(document, '.account_note', 'input', ({ target }) => { |
||||
const noteCounter = document.querySelector('.note-counter'); |
||||
|
||||
delegate(document, '#account_avatar', 'change', ({ target }) => { |
||||
const avatar = document.querySelector('.card.compact .avatar img'); |
||||
const [file] = target.files || []; |
||||
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; |
||||
if (noteCounter) { |
||||
const noteWithoutMetadata = processBio(target.value).text; |
||||
noteCounter.textContent = 500 - length(noteWithoutMetadata); |
||||
} |
||||
}); |
||||
|
||||
avatar.src = url; |
||||
}); |
||||
delegate(document, '#account_avatar', 'change', ({ target }) => { |
||||
const avatar = document.querySelector('.card.compact .avatar img'); |
||||
const [file] = target.files || []; |
||||
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; |
||||
|
||||
delegate(document, '#account_header', 'change', ({ target }) => { |
||||
const header = document.querySelector('.card.compact'); |
||||
const [file] = target.files || []; |
||||
const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc; |
||||
avatar.src = url; |
||||
}); |
||||
|
||||
header.style.backgroundImage = `url(${url})`; |
||||
}); |
||||
} |
||||
delegate(document, '#account_header', 'change', ({ target }) => { |
||||
const header = document.querySelector('.card.compact'); |
||||
const [file] = target.files || []; |
||||
const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc; |
||||
|
||||
loadPolyfills().then(main).catch(error => { |
||||
console.error(error); |
||||
header.style.backgroundImage = `url(${url})`; |
||||
}); |
||||
|
@ -1 +0,0 @@ |
||||
// This file will be loaded on share pages, regardless of theme.
|
@ -0,0 +1,14 @@ |
||||
# These packs will be loaded on every appropriate page, regardless of |
||||
# theme. |
||||
pack: |
||||
about: |
||||
admin: admin.js |
||||
auth: |
||||
common: common.js |
||||
embed: embed.js |
||||
error: |
||||
home: |
||||
modal: |
||||
public: public.js |
||||
settings: settings.js |
||||
share: |
@ -0,0 +1,9 @@ |
||||
let theLocale; |
||||
|
||||
export function setLocale(locale) { |
||||
theLocale = locale; |
||||
} |
||||
|
||||
export function getLocale() { |
||||
return theLocale; |
||||
} |
@ -1,9 +1 @@ |
||||
let theLocale; |
||||
|
||||
export function setLocale(locale) { |
||||
theLocale = locale; |
||||
} |
||||
|
||||
export function getLocale() { |
||||
return theLocale; |
||||
} |
||||
export * from 'locales'; |
||||
|
@ -0,0 +1,22 @@ |
||||
import loadPolyfills from '../mastodon/load_polyfills'; |
||||
|
||||
function loaded() { |
||||
const TimelineContainer = require('../mastodon/containers/timeline_container').default; |
||||
const React = require('react'); |
||||
const ReactDOM = require('react-dom'); |
||||
const mountNode = document.getElementById('mastodon-timeline'); |
||||
|
||||
if (mountNode !== null) { |
||||
const props = JSON.parse(mountNode.getAttribute('data-props')); |
||||
ReactDOM.render(<TimelineContainer {...props} />, mountNode); |
||||
} |
||||
} |
||||
|
||||
function main() { |
||||
const ready = require('../mastodon/ready').default; |
||||
ready(loaded); |
||||
} |
||||
|
||||
loadPolyfills().then(main).catch(error => { |
||||
console.error(error); |
||||
}); |
@ -0,0 +1,3 @@ |
||||
import 'font-awesome/css/font-awesome.css'; |
||||
import 'styles/application.scss' |
||||
require.context('../images/', true); |
@ -0,0 +1,75 @@ |
||||
import loadPolyfills from '../mastodon/load_polyfills'; |
||||
import ready from '../mastodon/ready'; |
||||
|
||||
function main() { |
||||
const IntlRelativeFormat = require('intl-relativeformat').default; |
||||
const emojify = require('../mastodon/features/emoji/emoji').default; |
||||
const { getLocale } = require('../mastodon/locales'); |
||||
const { localeData } = getLocale(); |
||||
const VideoContainer = require('../mastodon/containers/video_container').default; |
||||
const MediaGalleryContainer = require('../mastodon/containers/media_gallery_container').default; |
||||
const CardContainer = require('../mastodon/containers/card_container').default; |
||||
const React = require('react'); |
||||
const ReactDOM = require('react-dom'); |
||||
|
||||
localeData.forEach(IntlRelativeFormat.__addLocaleData); |
||||
|
||||
ready(() => { |
||||
const locale = document.documentElement.lang; |
||||
|
||||
const dateTimeFormat = new Intl.DateTimeFormat(locale, { |
||||
year: 'numeric', |
||||
month: 'long', |
||||
day: 'numeric', |
||||
hour: 'numeric', |
||||
minute: 'numeric', |
||||
}); |
||||
|
||||
const relativeFormat = new IntlRelativeFormat(locale); |
||||
|
||||
[].forEach.call(document.querySelectorAll('.emojify'), (content) => { |
||||
content.innerHTML = emojify(content.innerHTML); |
||||
}); |
||||
|
||||
[].forEach.call(document.querySelectorAll('time.formatted'), (content) => { |
||||
const datetime = new Date(content.getAttribute('datetime')); |
||||
const formattedDate = dateTimeFormat.format(datetime); |
||||
|
||||
content.title = formattedDate; |
||||
content.textContent = formattedDate; |
||||
}); |
||||
|
||||
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { |
||||
const datetime = new Date(content.getAttribute('datetime')); |
||||
|
||||
content.title = dateTimeFormat.format(datetime); |
||||
content.textContent = relativeFormat.format(datetime); |
||||
}); |
||||
|
||||
[].forEach.call(document.querySelectorAll('.logo-button'), (content) => { |
||||
content.addEventListener('click', (e) => { |
||||
e.preventDefault(); |
||||
window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes'); |
||||
}); |
||||
}); |
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => { |
||||
const props = JSON.parse(content.getAttribute('data-props')); |
||||
ReactDOM.render(<VideoContainer locale={locale} {...props} />, content); |
||||
}); |
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => { |
||||
const props = JSON.parse(content.getAttribute('data-props')); |
||||
ReactDOM.render(<MediaGalleryContainer locale={locale} {...props} />, content); |
||||
}); |
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => { |
||||
const props = JSON.parse(content.getAttribute('data-props')); |
||||
ReactDOM.render(<CardContainer locale={locale} {...props} />, content); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
loadPolyfills().then(main).catch(error => { |
||||
console.error(error); |
||||
}); |
@ -0,0 +1,22 @@ |
||||
import loadPolyfills from '../mastodon/load_polyfills'; |
||||
|
||||
function loaded() { |
||||
const ComposeContainer = require('../mastodon/containers/compose_container').default; |
||||
const React = require('react'); |
||||
const ReactDOM = require('react-dom'); |
||||
const mountNode = document.getElementById('mastodon-compose'); |
||||
|
||||
if (mountNode !== null) { |
||||
const props = JSON.parse(mountNode.getAttribute('data-props')); |
||||
ReactDOM.render(<ComposeContainer {...props} />, mountNode); |
||||
} |
||||
} |
||||
|
||||
function main() { |
||||
const ready = require('../mastodon/ready').default; |
||||
ready(loaded); |
||||
} |
||||
|
||||
loadPolyfills().then(main).catch(error => { |
||||
console.error(error); |
||||
}); |
@ -1,5 +0,0 @@ |
||||
// This makes our fonts available everywhere. |
||||
|
||||
@import 'fonts/roboto'; |
||||
@import 'fonts/roboto-mono'; |
||||
@import 'fonts/montserrat'; |
@ -1,3 +1,3 @@ |
||||
import 'font-awesome/css/font-awesome.css'; |
||||
require.context('../../images/', true); |
||||
import './styles/index.scss'; |
||||
require.context('images/', true); |
||||
import 'themes/glitch/styles/index.scss'; |
||||
|
@ -1,7 +1,7 @@ |
||||
import loadPolyfills from './util/load_polyfills'; |
||||
import loadPolyfills from 'themes/glitch/util/load_polyfills'; |
||||
|
||||
loadPolyfills().then(() => { |
||||
require('./util/main').default(); |
||||
require('themes/glitch/util/main').default(); |
||||
}).catch(e => { |
||||
console.error(e); |
||||
}); |
||||
|
@ -1,25 +1,34 @@ |
||||
# (REQUIRED) The location of the pack files. |
||||
pack: |
||||
about: packs/about.js |
||||
admin: null |
||||
common: packs/common.js |
||||
embed: null |
||||
home: packs/home.js |
||||
admin: |
||||
auth: |
||||
common: |
||||
filename: packs/common.js |
||||
stylesheet: true |
||||
embed: packs/public.js |
||||
error: |
||||
home: |
||||
filename: packs/home.js |
||||
preload: |
||||
- themes/glitch/async/getting_started |
||||
- themes/glitch/async/compose |
||||
- themes/glitch/async/home_timeline |
||||
- themes/glitch/async/notifications |
||||
stylesheet: true |
||||
modal: |
||||
public: packs/public.js |
||||
settings: null |
||||
settings: |
||||
share: packs/share.js |
||||
|
||||
# (OPTIONAL) The directory which contains the pack files. |
||||
# Defaults to the theme directory (`app/javascript/themes/[theme]`), |
||||
# which should be sufficient for like 99% of use-cases lol. |
||||
# pack_directory: app/javascript/packs |
||||
|
||||
# (OPTIONAL) Additional javascript resources to preload, for use with |
||||
# lazy-loaded components. It is **STRONGLY RECOMMENDED** that you |
||||
# derive these pathnames from `themes/[your-theme]` to ensure that |
||||
# they stay unique. |
||||
preload: |
||||
- themes/glitch/async/getting_started |
||||
- themes/glitch/async/compose |
||||
- themes/glitch/async/home_timeline |
||||
- themes/glitch/async/notifications |
||||
# pack_directory: app/javascript/packs |
||||
|
||||
# (OPTIONAL) By default the theme will fallback to the default theme |
||||
# if a particular pack is not provided. You can specify different |
||||
# fallbacks here, or disable fallback behaviours altogether by |
||||
# specifying a `null` value. |
||||
fallback: |
||||
|
@ -0,0 +1,10 @@ |
||||
// These lines are the same as in glitch:
|
||||
import 'font-awesome/css/font-awesome.css'; |
||||
require.context('../../images/', true); |
||||
|
||||
// …But we want to use our own styles instead.
|
||||
import 'styles/win95.scss'; |
||||
|
||||
// Be sure to make this style file import from
|
||||
// `themes/glitch/styles/index.scss` (the glitch styling), and not
|
||||
// `application.scss` (which are the vanilla styles).
|
@ -0,0 +1,23 @@ |
||||
# win95 theme. |
||||
|
||||
# Ported over from `cybrespace:mastodon/theme_win95`. |
||||
# <https://github.com/cybrespace/mastodon/tree/theme_win95> |
||||
|
||||
# You can use this theme file as inspiration for porting over |
||||
# a preëxisting Mastodon theme. |
||||
|
||||
# We only modify the `common` pack, which contains our styling. |
||||
pack: |
||||
common: |
||||
filename: index.js |
||||
stylesheet: true |
||||
# All unspecified packs will inherit from glitch. |
||||
|
||||
# By default, the glitch preloads will also be used here. You can |
||||
# disable them by setting `preload` to `null`. |
||||
|
||||
# preload: |
||||
|
||||
# The `fallback` parameter tells us to use glitch files for everything |
||||
# we haven't specified. |
||||
fallback: glitch |
@ -0,0 +1,10 @@ |
||||
- if theme |
||||
- if theme[:pack] != 'common' && theme[:common] |
||||
= render partial: 'layouts/theme', object: theme[:common] |
||||
- if theme[:pack] |
||||
= javascript_pack_tag theme[:name] ? "themes/#{theme[:name]}/#{theme[:pack]}" : "core/#{theme[:pack]}", integrity: true, crossorigin: 'anonymous' |
||||
- if theme[:stylesheet] |
||||
= stylesheet_pack_tag theme[:name] ? "themes/#{theme[:name]}/#{theme[:pack]}" : "core/#{theme[:pack]}", integrity: true, media: 'all' |
||||
- if theme[:preload] |
||||
- theme[:preload].each do |link| |
||||
%link{ href: asset_pack_path("#{link}.js"), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ |
@ -1,5 +1,4 @@ |
||||
- content_for :header_tags do |
||||
%script#initial-state{ type: 'application/json' }!= json_escape(@initial_state_json) |
||||
= javascript_pack_tag 'share', integrity: true, crossorigin: 'anonymous' |
||||
|
||||
#mastodon-compose{ data: { props: Oj.dump(default_props) } } |
||||
|
Loading…
Reference in new issue