Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

refactor(layout): HolyGrailLayout && re-org#1104

Merged
mydearxym merged 15 commits intodevfrom3-column-layout
Jul 2, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
15 commits
Select commitHold shift + click to select a range
733d548
chore: wip
mydearxymJun 29, 2021
5c985b1
chore: re-org & convert to ts
mydearxymJun 30, 2021
339f140
chore: wip
mydearxymJun 30, 2021
810b467
chore: add template for PublishButton
mydearxymJun 30, 2021
0cffeea
feat: add subed communities demo list
mydearxymJun 30, 2021
15866c1
chore: improve subscribe list in holygrail view
mydearxymJul 1, 2021
39fc554
chore: clean up
mydearxymJul 1, 2021
e17371c
refactor(navigator): convert to TS
mydearxymJul 1, 2021
b281230
chore: holy grail wip
mydearxymJul 2, 2021
5a649fa
chore: layout switch wip
mydearxymJul 2, 2021
5eb4a36
chore: layout switch wip
mydearxymJul 2, 2021
d0168e8
chore: adjust footer padding for classic layout
mydearxymJul 2, 2021
277ff29
chore(poststhread): move classicsidebar to own file
mydearxymJul 2, 2021
d7b092c
refactor(layout): extract thread sidebar
mydearxymJul 2, 2021
f55f0f7
refactor(layout): add missing LAPTOP_M_PADDING
mydearxymJul 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletionspublic/icons/static/article/unpin.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletionssrc/components/Buttons/FancyPublishButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
/*
*
* PublishButton
*
*/

import { memo, FC } from 'react'

import { ICON_CMD } from '@/config'
import { buildLog } from '@/utils'

import Tooltip from '@/components/Tooltip'
import {
Wrapper,
Label,
LabelIcon,
ActionLink,
Icon,
} from './styles/fancy_publish_button'

/* eslint-disable-next-line */
const log = buildLog('c:PublishButton:index')

type TProps = {
label?: string
labelIconSrc?: string
onPublish?: () => void
onVote?: () => void
onImport?: () => void
onFAQ?: () => void
}

const PublishButton: FC<TProps> = ({
label = '发布帖子 ',
labelIconSrc = `${ICON_CMD}/publish_pen.svg`,
onPublish = log,
onVote = log,
onImport = log,
onFAQ = log,
}) => {
return (
<Wrapper>
<Label>
<div>{label}</div>
<LabelIcon src={labelIconSrc} />
</Label>
<Tooltip content="发布帖子" placement="bottom" duration={0}>
<ActionLink onClick={onPublish}>
<Icon src={`${ICON_CMD}/publish_write.svg`} />
</ActionLink>
</Tooltip>
<Tooltip content="发布投票" placement="bottom" duration={0}>
<ActionLink onClick={onVote}>
<Icon src={`${ICON_CMD}/publish_vote.svg`} />
</ActionLink>
</Tooltip>
<Tooltip content="导入内容" placement="bottom" duration={0}>
<ActionLink onClick={onImport}>
<Icon src={`${ICON_CMD}/publish_import.svg`} />
</ActionLink>
</Tooltip>
<Tooltip content="发帖礼仪" placement="bottom" duration={0}>
<ActionLink onClick={onFAQ}>
<Icon src={`${ICON_CMD}/publish_faq.svg`} />
</ActionLink>
</Tooltip>
</Wrapper>
)
}

export default memo(PublishButton)
107 changes: 60 additions & 47 deletionssrc/components/Buttons/PublishButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,64 +6,77 @@

import { memo, FC } from 'react'

import { ICON_CMD } from '@/config'
import type { TThread } from '@/spec'

import { THREAD } from '@/constant'
import { ICON } from '@/config'
import { buildLog } from '@/utils'

import Tooltip from '@/components/Tooltip'
import {
Wrapper,
Label,
LabelIcon,
ActionLink,
Icon,
} from './styles/publish_button'
import DropdownButton from './DropdownButton'
import { Wrapper } from './styles/publish_button'

/* eslint-disable-next-line */
const log = buildLog('c:PublishButton:index')

const getOptions = (thread) => {
switch (thread) {
case THREAD.JOB: {
return [
{
key: 'publish',
icon: `${ICON}/edit/publish-write.svg`,
title: '我要招人',
desc: '发布后会第一次出现在相应版块首页。',
},
{
key: 'link',
link: 'https://newpage',
icon: `${ICON}/article/report.svg`,
title: '发布须知',
desc:
'请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
},
]
}
default: {
return [
{
key: 'publish',
icon: `${ICON}/edit/publish-write.svg`,
title: '发布帖子',
desc: '发布后会第一次出现在相应版块首页。',
},
{
key: 'link',
link: 'https://newpage',
icon: `${ICON}/article/report.svg`,
title: '发布须知',
desc:
'请确保你发布的内容符合社区的基本价值观和规范，否则会被限流或直接删除。',
},
]
}
}
}

type TProps = {
label?: string
labelIconSrc?: string
onPublish?: () => void
onVote?: () => void
onImport?: () => void
onFAQ?: () => void
thread?: TThread
onCreate?: () => void
}

const PublishButton: FC<TProps> = ({
label = '发布帖子 ',
labelIconSrc = `${ICON_CMD}/publish_pen.svg`,
onPublish = log,
onVote = log,
onImport = log,
onFAQ = log,
}) => {
const PublishButton: FC<TProps> = ({ thread = THREAD.POST, onCreate }) => {
return (
<Wrapper>
<Label>
<div>{label}</div>
<LabelIcon src={labelIconSrc} />
</Label>
<Tooltip content="发布帖子" placement="bottom" duration={0}>
<ActionLink onClick={onPublish}>
<Icon src={`${ICON_CMD}/publish_write.svg`} />
</ActionLink>
</Tooltip>
<Tooltip content="发布投票" placement="bottom" duration={0}>
<ActionLink onClick={onVote}>
<Icon src={`${ICON_CMD}/publish_vote.svg`} />
</ActionLink>
</Tooltip>
<Tooltip content="导入内容" placement="bottom" duration={0}>
<ActionLink onClick={onImport}>
<Icon src={`${ICON_CMD}/publish_import.svg`} />
</ActionLink>
</Tooltip>
<Tooltip content="发帖礼仪" placement="bottom" duration={0}>
<ActionLink onClick={onFAQ}>
<Icon src={`${ICON_CMD}/publish_faq.svg`} />
</ActionLink>
</Tooltip>
<DropdownButton
placement="bottom-end"
options={getOptions(thread)}
panelMinWidth="210px"
onClick={(key) => {
if (key === 'publish') onCreate()
}}
>
发布帖子
</DropdownButton>
</Wrapper>
)
}
Expand Down
1 change: 1 addition & 0 deletionssrc/components/Buttons/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
export { default as Button } from './Button'
export { default as ArrowButton } from './ArrowButton'
export { default as ArrowLink } from './ArrowLink'
// export { default as FancyPublishButton } from './FancyPublishButton'
export { default as PublishButton } from './PublishButton'
export { default as OrButton } from './OrButton'
export { default as DropdownButton } from './DropdownButton'
Expand Down
116 changes: 116 additions & 0 deletionssrc/components/Buttons/styles/fancy_publish_button.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
import styled from 'styled-components'

import Img from '@/Img'
import { css, theme } from '@/utils'

// see example: https://codepen.io/mydearxym2/pen/qBEvvpo

const commonHoverAffix = `
content: '';
position: absolute;
top: 0;
${css.flex('align-center')};
height: 100%;
transition: 0.25s linear;
z-index: 1;
`

export const Wrapper = styled.div`
position: relative;
${css.flex('align-both')};
width: 100%;
max-width: 300px;
height: 32px;
background-color: #3680ad; /* 消失的时候背景色 */
border-radius: 3px;
/*
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;

&:hover {
background-color: #22637e; /* #46627f; */
/*
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
*/
}

&:hover span {
opacity: 0;
z-index: -3;
}
&:hover:before {
opacity: 0.5;
transform: translateY(-100%);
}
&:hover:after {
opacity: 0.5;
transform: translateY(100%);
}

&:before {
${commonHoverAffix};
width: 70%;
left: 0;
justify-content: flex-end;
background-color: #3e8ebf;
}

&:after {
${commonHoverAffix};
width: 30%;
right: 0;
justify-content: flex-start;
background-color: #327faf;
}
`
export const Label = styled.span`
${css.flex('align-center', 'justify-between')};
padding-left: 16px;
padding-right: 16px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: ${theme('button.fg')};
font-family: 'Fira Mono', monospace;
font-size: 14px;
letter-spacing: 4px;
opacity: 1;
transition: opacity 0.25s;
z-index: 2;
`
export const LabelIcon = styled(Img)`
fill: ${theme('button.fg')};
${css.size(14)};
`
export const ActionLink = styled.a`
position: relative;
${css.flex('align-both')};
/* width: 25%; */
width: 45px;
/* height: 100%; */
height: 32px;
color: whitesmoke;
font-size: 24px;
text-decoration: none;
transition: 0.25s;

&:hover {
background: #18587a;
}
`
export const Icon = styled(Img)`
fill: ${theme('button.fg')};
${css.size(16)};

${ActionLink}:hover & {
fill: ${theme('button.hoverBg')};
cursor: pointer;
width: 18px;
height: 18px;
}
transition: all 0.25s;
`
Loading
[8]ページ先頭
©2009-2025 Movatter.jp