WHHHEEEEEE OVERENGINEERING!!!
This commit is contained in:
parent
637c67a50d
commit
e555dddcc0
@ -4,7 +4,6 @@ import { prop, computed, container } from 'frptools';
|
||||
import {
|
||||
subscribeToRender,
|
||||
defineView,
|
||||
subscribeToRender,
|
||||
nodeParentWithType,
|
||||
defineElement as el
|
||||
} from '../utils/domvm.js';
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
subscribeToRender
|
||||
} from '../../utils/domvm.js';
|
||||
import { injectStyle, styled } from '../../services/style.js';
|
||||
import { DEFAULT_TRANSITION, CSS_FULL_SIZE, IMAGE_MARGIN } from '../styles.js';
|
||||
import { DEFAULT_TRANSITION, CSS_FULL_SIZE, IMAGE_MARGIN, CLICKABLE } from '../styles.js';
|
||||
import { Icon } from './icon.js';
|
||||
import { AttachmentImageView } from './attachmentImage.js';
|
||||
|
||||
@ -32,7 +32,7 @@ export function AlbumPhotoTemplate(vm, { doc }) {
|
||||
onmouseenter: [hover, true],
|
||||
onmouseleave: [hover, false],
|
||||
css: {
|
||||
cursor: selectMode ? 'pointer' : 'zoom-in'
|
||||
cursor: selectMode ? CLICKABLE.cursor : 'zoom-in'
|
||||
},
|
||||
_data: doc
|
||||
},
|
||||
@ -89,7 +89,7 @@ const image = styled('img', CSS_FULL_SIZE, DEFAULT_TRANSITION, {
|
||||
zIndex: 0
|
||||
});
|
||||
|
||||
const photoSelectButton = styled(DEFAULT_TRANSITION, {
|
||||
const photoSelectButton = styled(DEFAULT_TRANSITION, CLICKABLE, {
|
||||
position: 'absolute',
|
||||
top: '4%',
|
||||
left: '4%',
|
||||
@ -98,8 +98,7 @@ const photoSelectButton = styled(DEFAULT_TRANSITION, {
|
||||
borderRadius: '50%',
|
||||
padding: '2px',
|
||||
backgroundColor: 'transparent',
|
||||
opacity: 0,
|
||||
cursor: 'pointer'
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
const photoOverlay = styled(CSS_FULL_SIZE, DEFAULT_TRANSITION, {
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
patchNodeStyle
|
||||
} from '../../utils/domvm.js';
|
||||
import { injectStyle, styled } from '../../services/style.js';
|
||||
import { DEFAULT_TRANSITION } from '../styles.js';
|
||||
import { DEFAULT_TRANSITION, CLICKABLE } from '../styles.js';
|
||||
import { Icon } from './icon.js';
|
||||
import { AlbumPhotoTemplate } from './albumPhotoTemplate.js';
|
||||
import { extractID } from '../../utils/conversion.js';
|
||||
@ -71,8 +71,7 @@ const albumContent = styled({
|
||||
userSelect: 'none'
|
||||
});
|
||||
|
||||
const albumSelectButton = styled(DEFAULT_TRANSITION, {
|
||||
const albumSelectButton = styled(DEFAULT_TRANSITION, CLICKABLE, {
|
||||
paddingLeft: '0.5em',
|
||||
cursor: 'pointer',
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
@ -4,6 +4,7 @@ import { Icon } from './icon.js';
|
||||
import { defineElement as el, subscribeToRender } from '../../utils/domvm.js';
|
||||
import { injectStyle, styled } from '../../services/style.js';
|
||||
import { pick } from '../../utils/conversion.js';
|
||||
import { CLICKABLE } from '../styles.js';
|
||||
|
||||
let seq = 0;
|
||||
const getSeq = pick('_seq');
|
||||
@ -63,10 +64,7 @@ export function AppBarView(vm, params, key, opts) {
|
||||
[
|
||||
Icon({
|
||||
name: 'arrow_left',
|
||||
size: 0.75,
|
||||
attrs: {
|
||||
onclick: popState
|
||||
}
|
||||
size: 0.75
|
||||
})
|
||||
]
|
||||
)
|
||||
@ -86,9 +84,12 @@ const header = styled({
|
||||
alignItems: 'center'
|
||||
});
|
||||
|
||||
const backButtonContainer = styled({
|
||||
marginRight: '1em'
|
||||
});
|
||||
const backButtonContainer = styled(
|
||||
{
|
||||
marginRight: '1em'
|
||||
},
|
||||
CLICKABLE
|
||||
);
|
||||
|
||||
const headerRight = styled({
|
||||
display: 'flex',
|
||||
|
||||
@ -9,3 +9,7 @@ export const DEFAULT_TRANSITION = {
|
||||
transition:
|
||||
'transform 0.135s cubic-bezier(0, 0, 0.2, 1), opacity 0.135s cubic-bezier(0, 0, 0.2, 1)'
|
||||
};
|
||||
|
||||
export const CLICKABLE = {
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user