Test time: " + diff + " seconds"); + }, + /** + * @private + */ + processWrite: function (db, i) { + // logger.consoles.original.log("processWrite"); + var transaction = db.transaction(["customers"], "readwrite"); + + // Do something when all the data is added to the database. + transaction.oncomplete = function (event) { + // logger.consoles.original.log("processWrite.transaction.oncomplete"); + }; + + transaction.onerror = function (event) { + // Don't forget to handle errors! + // logger.consoles.original.error("processWrite.transaction.onerror: "+event.code); + }; + + var objectStore = transaction.objectStore("customers"); + + var data = { ssn: i, name: "Bill", age: 35, email: "mail" + i + "@rtlservice.com" } + var request = objectStore.put(data); + request.onsuccess = function (event) { + // event.target.result == customerData[i].ssn; + // logger.consoles.original.log("processWrite.transaction...onsuccess: "+event.target.result); + if (i == logger.debug.totalNumberOfWrites - 1) { + logger.debug.testFinished(); + } + }; + request.onerror = function () { + logger.consoles.original.error("addPublication error", this.error); + } + }, + status: function (str) { + document.getElementById(logger.debug.statusElementId).innerHTML = str; + } + } +} \ No newline at end of file diff --git a/src/@app/libs.js b/src/@app/libs.js index 36442218..024e6f07 100644 --- a/src/@app/libs.js +++ b/src/@app/libs.js @@ -2,4 +2,5 @@ export * from './libs/comty_ng/pre.js'; export * from './libs/yulio_id/pre.js'; export * from './libs/app_functions/pre.js'; -export * from './libs/api_call/pre.js'; \ No newline at end of file +export * from './libs/api_call/pre.js'; +export * from './libs/apis/pre.js' \ No newline at end of file diff --git a/src/@app/libs/apis/pre.js b/src/@app/libs/apis/pre.js new file mode 100644 index 00000000..d2146fb9 --- /dev/null +++ b/src/@app/libs/apis/pre.js @@ -0,0 +1 @@ +export * from './unsplash.js' \ No newline at end of file diff --git a/src/@app/libs/apis/unsplash.js b/src/@app/libs/apis/unsplash.js new file mode 100644 index 00000000..98a45260 --- /dev/null +++ b/src/@app/libs/apis/unsplash.js @@ -0,0 +1,16 @@ +import axios from 'axios' +import * as app from 'app' +import keys from 'keys' + +export const api_unsplash = { + search: async (key, callback) => { + if (!key) return false + const response = await axios.get(app.endpoints.unsplash_endpoints.search, { + params: { query: key}, + headers: { + Authorization: `Client-ID ${keys.unsplash_key}` + } + }) + return callback(response.data.results) + } +} \ No newline at end of file diff --git a/src/@app/libs/app_functions/modals.js b/src/@app/libs/app_functions/modals.js index 6b576dad..996f7a56 100644 --- a/src/@app/libs/app_functions/modals.js +++ b/src/@app/libs/app_functions/modals.js @@ -1,7 +1,7 @@ import React from 'react' import * as app from 'app' import * as antd from 'antd' -import * as Icons from '@ant-design/icons' +import * as Icons from 'components/Icons' import styles from './modals.less'; import classnames from 'classnames' @@ -19,12 +19,12 @@ class __Model_postreport extends React.PureComponent { return false } app.notify.info('This post has been reported successfully, our team will review it and inform you about problem resolution ...') - app.FeedHandler.refresh() - app.FeedHandler.goToElement(this.props.id) + app.RenderFeed.RefreshFeed() + app.RenderFeed.goToElement(this.props.id) }, payload) } setTimeout(() => { - app.OverlaySwap.close() + app.SwapMode.close() }, 500) } @@ -116,7 +116,7 @@ export const app_modals = { icon:
+ An wild error appear! :
+
+
+
+ ),
+ placement: 'bottomLeft',
+ })
+ },
+ proccess: (...res) => {
+ notification.open({
+ icon: +
+
+ {res.toString()}
+
+ {res}
,
+ placement: 'bottomLeft',
+ })
+ },
+ }
\ No newline at end of file
diff --git a/src/@app/libs/app_functions/pre.js b/src/@app/libs/app_functions/pre.js
index 1e0bd8f3..d045ff3a 100644
--- a/src/@app/libs/app_functions/pre.js
+++ b/src/@app/libs/app_functions/pre.js
@@ -1,53 +1,21 @@
-import { RenderFeed } from 'components/MainFeed'
import { transitionToogle } from '../../../pages/login'
import { SetControls, CloseControls } from 'components/Layout/ControlBar'
-import { SwapMode } from 'components/Layout/Overlay'
+
import umiRouter from 'umi/router'
import * as app from 'app'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import React from 'react'
+import { SwapMode } from 'components/Layout/Overlay'
+import { RenderFeed } from 'components/MainFeed'
+import { updateTheme } from '../../../layouts/PrimaryLayout'
+
export * from './modals.js'
+export * from './notify.js'
export {SwapMode}
-
-export function SetupApp() {
- // TODO: Default sets
- app.notify.success('Authorised, please wait...')
- const resourceLoad = localStorage.getItem('resource_bundle')
- if (!resourceLoad) {
- localStorage.setItem('resource_bundle', 'light_ng')
- }
- setTimeout(() => {
- app.router.push('main')
- }, 500)
-}
-
-export const CheckThisApp = {
- desktop_mode: () => {
- const a = localStorage.getItem('desktop_src')
- if (a == 'true') {
- return true
- }
- return false
- },
-}
-
-export const OverlaySwap = {
- close: () => {
- SwapMode.close()
- },
- openPost: e => {
- SwapMode.openPost(e)
- },
- openSearch: e => {
- SwapMode.openSearch(e)
- },
- openFragment: e =>{
- SwapMode.openFragment(e)
- }
-}
+export {RenderFeed}
export const ControlBar = {
set: e => {
@@ -58,30 +26,6 @@ export const ControlBar = {
},
}
-export const FeedHandler = {
- refresh: () => {
- RenderFeed.RefreshFeed()
- },
- killByID: (post_id) => {
- RenderFeed.killByID(post_id)
- },
- addToRend: (payload) => {
- RenderFeed.addToRend(payload)
- },
- goToElement: post_id => {
- RenderFeed.goToElement(post_id)
- },
- sync: data => {
- RenderFeed.sync(data)
- }
-}
-
-export const LoginPage = {
- transitionToogle: () => {
- transitionToogle()
- },
-}
-
export const router = {
go: e => {
goTo.element('primaryContent')
@@ -118,6 +62,7 @@ export const goTo = {
try {
document.getElementById(element).scrollIntoView()
} catch (error) {
+ console.debug(error)
return false
}
}
@@ -204,3 +149,52 @@ export const app_session = {
},
}
+export const app_theme = {
+ getString: () => {
+ return localStorage.getItem('theme_style')
+ },
+ set: (data, process) => {
+ if (!data){
+ return false
+ }
+ let newdata = []
+ if(process){
+ let style = data
+ let mix = []
+ try {
+ style[key] = value
+ const obj = Object.entries(style)
+ obj.forEach((e) => {
+ mix.push({key: e[0], value: e[1]})
+ })
+ newdata = JSON.stringify(mix)
+ } catch (error) {
+ console.log(error)
+ return false
+ }
+ }else{
+ newdata = data
+ }
+
+ localStorage.setItem('theme_style', newdata)
+ app_theme.update()
+ },
+ getStyle: () => {
+ let final = {}
+ const storaged = localStorage.getItem('theme_style')
+ if (storaged) {
+ try {
+ let scheme = JSON.parse(storaged)
+ scheme.forEach((e)=>{
+ final[e.key] = e.value
+ })
+ } catch (error) {
+ console.log(error)
+ }
+ }
+ return final
+ },
+ update: () => {
+ return updateTheme(app_theme.getStyle())
+ }
+}
\ No newline at end of file
diff --git a/src/@app/libs/comty_ng/pre.js b/src/@app/libs/comty_ng/pre.js
index b74bd209..15577525 100644
--- a/src/@app/libs/comty_ng/pre.js
+++ b/src/@app/libs/comty_ng/pre.js
@@ -1,5 +1,5 @@
import { token_data } from 'app'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
export * from './comty_post.js'
export * from './comty_user.js'
diff --git a/src/components/CustomIcons/index.js b/src/components/CustomIcons/index.js
deleted file mode 100755
index d71bfcfc..00000000
--- a/src/components/CustomIcons/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const VerifiedBadge = () => ()
-const CommonThings = () => ()
-const SunSVG = () => ()
-const MoonSVG = () => ()
-const RobotOutlined = () => ()
-const SavedPost = () => ()
-const SavedPostColor = () => ()
-const SavedPostGrey = () => ()
-
-const CustomIcons = {SavedPostGrey, SavedPostColor, VerifiedBadge, CommonThings, SunSVG, MoonSVG, RobotOutlined, SavedPost}
-export default CustomIcons
diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js
index c6716fda..58bb3292 100755
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@@ -3,7 +3,7 @@ import * as antd from 'antd'
import * as app from 'app'
import styles from './index.less'
import classnames from 'classnames'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
export const SetHeaderSearchType = {
disable: () => {
diff --git a/src/components/Icons/custom.js b/src/components/Icons/custom.js
new file mode 100644
index 00000000..0f7317c1
--- /dev/null
+++ b/src/components/Icons/custom.js
@@ -0,0 +1,8 @@
+export const VerifiedBadge = () => ()
+export const Patreon = () => (
+)
\ No newline at end of file
diff --git a/src/components/Icons/index.js b/src/components/Icons/index.js
new file mode 100644
index 00000000..049e1e42
--- /dev/null
+++ b/src/components/Icons/index.js
@@ -0,0 +1,4 @@
+export * from 'feather-reactjs'
+export * from '@ant-design/icons'
+export * from './custom'
+
diff --git a/src/components/Layout/Overlay/components/component.tsx b/src/components/Layout/Overlay/components/component.tsx
index 8413cbb2..0da8dc14 100644
--- a/src/components/Layout/Overlay/components/component.tsx
+++ b/src/components/Layout/Overlay/components/component.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import styles from '../index.less'
export interface Card_Component_props {
diff --git a/src/components/Layout/Overlay/components/layout/__pri.tsx b/src/components/Layout/Overlay/components/layout/__pri.tsx
index 96e849e8..5bbe4c77 100644
--- a/src/components/Layout/Overlay/components/layout/__pri.tsx
+++ b/src/components/Layout/Overlay/components/layout/__pri.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import styles from '../../index.less'
import classnames from 'classnames'
import reactable from 'reactablejs'
diff --git a/src/components/Layout/Overlay/components/layout/__sec.tsx b/src/components/Layout/Overlay/components/layout/__sec.tsx
index 75d02b8b..54606072 100644
--- a/src/components/Layout/Overlay/components/layout/__sec.tsx
+++ b/src/components/Layout/Overlay/components/layout/__sec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import * as app from 'app'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import styles from '../../index.less'
import classnames from 'classnames'
import reactable from 'reactablejs'
diff --git a/src/components/Layout/Overlay/components/main/__searchBar.less b/src/components/Layout/Overlay/components/main/__searchBar.less
index ef4f4a74..57f9785a 100644
--- a/src/components/Layout/Overlay/components/main/__searchBar.less
+++ b/src/components/Layout/Overlay/components/main/__searchBar.less
@@ -11,7 +11,7 @@
border: 0!important;
outline: 0!important;
color: #273346;
- padding: 0 48px;
+ padding: 0 0 0 48px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 16px;
diff --git a/src/components/Layout/Overlay/components/swapper/__priPost.js b/src/components/Layout/Overlay/components/swapper/__priPost.js
index e399b2f8..528752c4 100644
--- a/src/components/Layout/Overlay/components/swapper/__priPost.js
+++ b/src/components/Layout/Overlay/components/swapper/__priPost.js
@@ -3,58 +3,26 @@ import styles from './__priPost.less'
import * as antd from 'antd'
import * as app from 'app'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import Icon from '@ant-design/icons'
-import { MediaPlayer } from 'components'
-
-const VerifiedBadge = () => (
-
- )
+import { MediaPlayer, PostCard } from 'components'
export default class __priPost extends React.PureComponent {
- renderContent(payload) {
- const { id, postText, postFile_full, post_time, publisher } = payload
- const {isMobile}= this.props
-
- return (
-
- {postFile_full ?
- )
- }
-
+
render() {
const {payload} = this.props
if (!payload) {
return This post not exists!!!
} const { id, postText, postFile_full, post_time, publisher } = payload + const {isMobile}= this.props + return ( -
-
-
-
-
- {publisher.username}{' '}
- {app.booleanFix(publisher.verified) ? (
-
-
-
- {publisher.username}{' '}
- {app.booleanFix(publisher.verified) ? (
-
- - {post_time} {app.IsThisUser.dev() ? `| #${id}` : null}{' '} -
-
+
)
}
diff --git a/src/components/Layout/Overlay/components/swapper/__priPost.less b/src/components/Layout/Overlay/components/swapper/__priPost.less
index 47497108..c882cb91 100644
--- a/src/components/Layout/Overlay/components/swapper/__priPost.less
+++ b/src/components/Layout/Overlay/components/swapper/__priPost.less
@@ -1,33 +1,27 @@
@import '~themes/index.less';
.contentWrapper {
- margin: auto;
width: 100%;
- padding: 20px;
+ height: 100%;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ align-items: center;
+ margin: auto;
+
+ background: rgba(158, 158, 158, 0.5); // Make sure this color has an opacity of less than 1
+ backdrop-filter: blur(10px); // This be the blur
+
+ display: flex;
+ align-items: center;
+ transition: all @__Global_SwapAnimDuration ease-in-out;
+
}
-
-.UserContainer {
- display: flex;
+.contentBody{
+
position: relative;
- float: right;
- z-index: 150;
- transform: translate(0, -40px);
-
- .UserContainer_text {
- margin: 0 8px;
-
- h4 {
- text-align: right;
- }
-
- p {
- word-break: break-all;
- text-align: right;
- font-size: 11px;
- color: #eeeeee !important;
- }
- }
-
-
- }
\ No newline at end of file
+ width: calc(100% - @Overlay_container2_active_width);
+}
\ No newline at end of file
diff --git a/src/components/Layout/Overlay/components/swapper/__priSearch.js b/src/components/Layout/Overlay/components/swapper/__priSearch.js
index f096632b..f4ea9af9 100644
--- a/src/components/Layout/Overlay/components/swapper/__priSearch.js
+++ b/src/components/Layout/Overlay/components/swapper/__priSearch.js
@@ -72,16 +72,18 @@ export default class __priSearch extends React.PureComponent {
}
}
EntryComponent = (t, source) => {
- function onclick(e){
+
+ function goToEntry(e){
if(!e) return false
app.router.go(`@${e}`)
}
+
try {
return (
+
- {this.renderContent(payload)}
onclick(item.username) }>
+
goToEntry(item.username) }>
- <__priSearch lost_focus={() => SwapMode.close()} payload={tmp} />
+ <__priSearch payload={tmp} />
return OverlayLayoutComponent.setState({
diff --git a/src/components/Layout/Overlay/index.less b/src/components/Layout/Overlay/index.less
index 267d5f6f..fa34e372 100644
--- a/src/components/Layout/Overlay/index.less
+++ b/src/components/Layout/Overlay/index.less
@@ -51,12 +51,12 @@
.Overlay_wrapper {
right: 0;
top: 0;
- overflow: hidden;
-
+ z-index: 50;
+
height: 100vh;
- width: 100%;
- max-width: @Overlay_wrapper_maxwidth;
-
+ // 150px extra for left-sider
+ width: calc( 100% + 150px );
+ backdrop-filter: blur(2px);
&.mobile{
overflow-y: scroll;
flex-direction: column;
@@ -67,13 +67,14 @@
position: absolute;
width: 100%;
height: 100%;
- max-width: none;
+ width: none;
}
}
&.expand{
- max-width: calc(@Overlay_wrapper_maxwidth + 150px);
+ max-width: calc(100% + 150px);
}
+
transition: all @__Global_SwapAnimDuration ease-in-out;
}
@@ -82,25 +83,40 @@
height: 100%;
width: 100%;
+ max-width: @Overlay_wrapper_maxwidth;
+ min-width: 200px;
+
display: flex;
z-index: 50;
right: 0;
padding: 30px 30px 30px 35px;
+
+ @media (max-width: @bp-medium) {
+ padding: 30px 5px 30px 5px;
+ }
+
color: @Overlay_container1_def_color;
- background-color: #F8F6F8;
&.half {
background-color: #2d2d2d;
color: @Overlay_container1_active_color;
+ max-width: calc(100% + 150px);
}
&.full_open {
- width: @Overlay_wrapper_showFull_width;
+ max-width: none;
+ background-color: transparent;
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
}
&.mobile {
+ min-width: unset;
+ max-width: unset;
+
width: 100%;
height: 0;
bottom: 0;
diff --git a/src/components/Layout/Sider/default.js b/src/components/Layout/Sider/default.js
index 35b0810d..68148b81 100755
--- a/src/components/Layout/Sider/default.js
+++ b/src/components/Layout/Sider/default.js
@@ -1,22 +1,77 @@
import React from 'react'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
+
import Icon from '@ant-design/icons'
import { withI18n, Trans } from '@lingui/react'
import styles from './default.less'
import * as app from 'app'
-import CustomIcons from '../../CustomIcons'
+import classnames from 'classnames'
@withI18n()
export default class Sider_Default extends React.PureComponent {
+ state = {
+ loading: true,
+ menus: null
+ }
+
+ require(e){
+ switch (e) {
+ case 'login':
+ return true
+ case 'admin':
+ return true
+ default:
+ return true
+ }
+ }
+
+ componentDidMount(){
+ try {
+ let tmp = [];
+ const { menus } = this.props
+ menus.forEach(e => {
+ if (this.require(e.require)) {
+ tmp.push(e)
+ }
+ });
+ this.setState({ menus: tmp, loading: false })
+ } catch (error) {
+ console.log(error)
+
+ }
+ }
+
+ renderMenus(data){
+ try {
+ return data.map(e => {
+ return(
+
+ {e.icon}
+
+ {e.title}
+
+
+ )
+ })
+ } catch (error) {
+ console.log(error)
+ return null
+ }
+ }
+
render() {
- const { handleClickMenu, logo } = this.props
+ const { handleClickMenu, logo, theme } = this.props
+ const predominantColor = theme.predominantColor || "#333"
+
+ if (this.state.loading) return
![]()
-
-
- Explore
-
-
-
-
-
- Saves
-
-
-
-
-
-
-
- Marketplace
-
-
-
-
-
-
-
- Chats
-
-
+ {this.renderMenus(this.state.menus)}
@@ -69,8 +98,9 @@ export default class Sider_Default extends React.PureComponent {
SwapThisPost()} />
,
]
- const actions = customActions || defaultActions
const MoreMenu = (
@@ -223,7 +257,7 @@ class PostCard extends React.PureComponent {
{app.booleanFix(publisher.verified) ? (
+
diff --git a/src/components/Layout/Overlay/components/swapper/__secComments.js b/src/components/Layout/Overlay/components/swapper/__secComments.js index 865768f1..3fb109d1 100644 --- a/src/components/Layout/Overlay/components/swapper/__secComments.js +++ b/src/components/Layout/Overlay/components/swapper/__secComments.js @@ -4,7 +4,7 @@ import { SearchCard, Feather } from 'components' import * as antd from 'antd' import * as app from 'app' -import * as Icons from '@ant-design/icons' +import * as Icons from 'components/Icons' import Icon from '@ant-design/icons' const VerifiedBadge = () => ( diff --git a/src/components/Layout/Overlay/index.js b/src/components/Layout/Overlay/index.js index 98a7bf03..578a4982 100644 --- a/src/components/Layout/Overlay/index.js +++ b/src/components/Layout/Overlay/index.js @@ -1,7 +1,7 @@ import React from 'react' import * as app from 'app' import * as antd from 'antd' -import * as Icons from '@ant-design/icons' +import * as Icons from 'components/Icons' import styles from './index.less' import classnames from 'classnames' import reactable from 'reactablejs' @@ -111,7 +111,7 @@ export const SwapMode = {
- <__priSearch lost_focus={() => SwapMode.close()} payload={tmp} />
+ <__priSearch payload={tmp} />
Loading
return (
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less
index b95ad596..e2de252c 100755
--- a/src/layouts/PrimaryLayout.less
+++ b/src/layouts/PrimaryLayout.less
@@ -12,16 +12,24 @@
}
.primary_layout {
+ background-repeat: repeat-x;
+ background-size: cover;
+ background-position-y: center;
+
overflow: hidden;
- background-color: @primary_layout_backgroud;
+ background-color: transparent;
margin: auto;
+ height: 100vh;
+ width: 100vw;
+
+ transition: all @__Global_Components_transitions_dur linear;
+
&.mobile{
>.primary_layout_container {
- border-radius: 0;
- margin: 0;
padding: 0;
overflow-y: overlay;
overflow-x: hidden;
+ min-width: unset;
}
.primary_layout_content{
padding: 35px 15px 15px 15px;
@@ -31,25 +39,40 @@
// PRIMARY LAYOUT
.primary_layout_container {
- transition: background-color @__Global_layout_transitions-dur linear;
- background-color: @primary_layout_container_backgroud;
- border-radius: @primary_layout_container_border-rd;
+ background-color: transparent;
+ transition: all @__Global_Components_transitions_dur linear;
overflow-x: hidden;
- margin: 0 0 0 10px;
- width: 100vw;
+ // overflow-y: overlay;
+
+ width: auto;
height: 100vh;
position: relative;
bottom: 0;
+ display: flex;
align-self: center;
- float: left;
+
+ max-width: 750px;
+
+ min-width: 570px;
+
+ @media (min-width: @bp-medium) {
+ min-width: 650px;
+ }
+ @media (min-width: @bp-large) {
+ min-width: 850px;
+ }
+
}
.primary_layout_content {
vertical-align: middle;
width: 100%;
- float: right;
padding: @primary_layout_content_padding;
transition: all @__Global_layout_transitions-dur ease;
+
+ @media (max-width: @bp-medium) {
+ padding: 0;
+ }
}
diff --git a/src/layouts/PublicLayout.js b/src/layouts/PublicLayout.js
index caaaf5cc..9a655c3d 100755
--- a/src/layouts/PublicLayout.js
+++ b/src/layouts/PublicLayout.js
@@ -1,3 +1,67 @@
-export default ({ children }) => {
- return children
+import React from 'react'
+import store from 'store'
+
+import {
+ MyLayout,
+ PageTransition,
+} from 'components'
+import { enquireScreen, unenquireScreen } from 'enquire-js'
+import classnames from 'classnames'
+
+import * as antd from 'antd'
+import * as Icons from 'components/Icons'
+
+import styles from './PrimaryLayout.less'
+
+const { Content } = antd.Layout
+
+export default class PublicLayout extends React.Component {
+ constructor(props) {
+ super(props)
+ window.PrimaryComponent = this
+ this.state = {
+ isMobile: false,
+ }
+ }
+
+ componentDidMount() {
+ this.enquireHandler = enquireScreen(mobile => {
+ const { isMobile } = this.state
+ if (isMobile !== mobile) {
+ this.setState({
+ isMobile: mobile,
+ })
+ store.set('mobile_src', mobile)
+ }
+ })
+ }
+
+ componentWillUnmount() {
+ unenquireScreen(this.enquireHandler)
+ }
+
+
+ render() {
+ const { children } = this.props
+ const { isMobile } = this.state
+ return (
+
+
+
+
+ )
+ }
}
diff --git a/src/models/app.js b/src/models/app.js
index 9d73c041..42601b10 100755
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -1,7 +1,7 @@
/* global window */
import { router } from 'utils'
import store from 'store'
-import { pathMatchRegexp } from 'utils'
+import { pathMatchRegexp, queryLayout } from 'utils'
import config from 'config'
import * as app from 'app'
@@ -42,23 +42,23 @@ export default {
},
effects: {
*query({ payload }, { call, put, select }) {
+ // if (queryLayout(config.layouts, window.location.pathname) == 'public') {
+ // return true
+ // }
const validBackup = app.validate.backup()
if (app.validate.session() == true) {
if (pathMatchRegexp(['/', '/login'], window.location.pathname)) {
- router.push({ pathname: '/main' })
+ router.push({ pathname: `${config.MainPath}` })
}
app._app.query()
return true
- } else if (!pathMatchRegexp(['', '/login'], window.location.pathname)) {
+ } else if (!pathMatchRegexp(['', '/login'], window.location.pathname) && queryLayout(config.layouts, window.location.pathname) !== 'public') {
if (validBackup == true) {
app._app.logout()
} else {
router.push({ pathname: '/login' })
}
}
- if (pathMatchRegexp([''], window.location.pathname)) {
- router.push({ pathname: '/login' })
- }
},
},
reducers: {
diff --git a/src/pages/debug/index.js b/src/pages/debug/index.js
new file mode 100644
index 00000000..05a3679a
--- /dev/null
+++ b/src/pages/debug/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import * as app from 'app'
+
+export default class Debug extends React.Component{
+
+ render(){
+ return(
+ <>
+
+ + + + + ) + } +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 5df7edbe..e7ee7acd 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -3,7 +3,9 @@ import * as app from 'app' class Index extends PureComponent { render() { - app.router.go(`login`) + return( + + ) } } diff --git a/src/pages/login/index.js b/src/pages/login/index.js index 65c1b59b..df4d9527 100755 --- a/src/pages/login/index.js +++ b/src/pages/login/index.js @@ -4,7 +4,7 @@ import styles from './index.less' import classnames from 'classnames' import * as antd from 'antd' -import * as Icons from '@ant-design/icons' +import * as Icons from 'components/Icons' import { RegistrationForm } from './register.js' import { NormalLoginForm } from './login.js' diff --git a/src/pages/login/login.js b/src/pages/login/login.js index d41d39e9..51db4903 100755 --- a/src/pages/login/login.js +++ b/src/pages/login/login.js @@ -94,7 +94,6 @@ export class NormalLoginForm extends React.PureComponent { switch (res) { case '200': { this.anim_transition(300) - app.LoginPage.transitionToogle() return } case '400': { diff --git a/src/pages/main/index.js b/src/pages/main/index.js index 36ad00c9..0f5aafe4 100755 --- a/src/pages/main/index.js +++ b/src/pages/main/index.js @@ -6,10 +6,10 @@ import styles from './index.less' export default class Main extends React.Component { render() { return ( -
+ if( this.state.err_tick > 2) return
+
+
+
+
}
}
diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js
index 43f55588..d965b033 100755
--- a/src/pages/settings/components/base.js
+++ b/src/pages/settings/components/base.js
@@ -3,9 +3,8 @@ import { List, Switch, Button, notification, InputNumber } from 'antd'
import { ListSettings } from '../../../../globals/settings.js'
import { ControlBar } from 'app'
import * as app from 'app'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import Icon from '@ant-design/icons'
-import { CustomIcons } from 'components'
class Base extends Component {
constructor(props) {
diff --git a/src/pages/settings/components/earnings/index.js b/src/pages/settings/components/earnings/index.js
index e27fae79..3444a281 100755
--- a/src/pages/settings/components/earnings/index.js
+++ b/src/pages/settings/components/earnings/index.js
@@ -1,7 +1,7 @@
import React from 'react'
import * as app from 'app'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
export default class Earnings extends React.Component {
diff --git a/src/pages/settings/components/help/index.js b/src/pages/settings/components/help/index.js
new file mode 100644
index 00000000..75efbdc3
--- /dev/null
+++ b/src/pages/settings/components/help/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default class Help extends React.Component{
+ render(){
+ return <>
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/pages/settings/components/notification/index.js b/src/pages/settings/components/notification/index.js
index 193f8801..f5afa9e2 100755
--- a/src/pages/settings/components/notification/index.js
+++ b/src/pages/settings/components/notification/index.js
@@ -1,6 +1,6 @@
import React from 'react'
import * as app from 'app'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import styles from './index.less'
export default class NotificationView extends React.Component {
diff --git a/src/pages/settings/components/security/index.js b/src/pages/settings/components/security/index.js
index c97de7a9..c939d78b 100755
--- a/src/pages/settings/components/security/index.js
+++ b/src/pages/settings/components/security/index.js
@@ -1,6 +1,6 @@
import React from 'react'
import * as app from 'app'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import * as antd from 'antd'
import styles from './index.less'
diff --git a/src/pages/settings/components/theme/index.js b/src/pages/settings/components/theme/index.js
new file mode 100644
index 00000000..bf8c0600
--- /dev/null
+++ b/src/pages/settings/components/theme/index.js
@@ -0,0 +1,230 @@
+import React from 'react'
+import * as Feather from 'feather-reactjs'
+import * as app from 'app'
+import * as antd from 'antd'
+
+import { SketchPicker } from 'react-color';
+
+import ColorThief from 'colorthief/dist/color-thief'
+var colorThief = new ColorThief();
+
+
+class BackgroundColor extends React.Component{
+ state = {
+ selected: "#fff"
+ }
+ sendChanges(){
+ this.props.changeColor(this.state.selected)
+ }
+ selectColor = (color) =>{
+ this.setState({selected: color.hex})
+ }
+ render(){
+ return <>
+ this.sendChanges()}> Change
+
+ }
+}
+
+class BackgroundImage extends React.Component{
+ state = {
+ results: []
+ }
+
+ search(key){
+ if (!key) return false
+ app.api_unsplash.search(key, (res) =>{
+ console.log(res)
+ this.setState({ results: res })
+ })
+ }
+ returnString(url){
+ this.props.selectImg(`url(${url})`)
+ }
+ render(){
+ return (
+ <>
+
+ this.search(value)} />
+ ( ![]()
this.returnString(item.urls.full)} src={item.urls.small} /> ) }/>
+
+ )
+ }
+}
+
+export default class ThemeSettings extends React.PureComponent{
+ state = {
+ helper_visible: false,
+ helper_fragment: null,
+ style: [],
+ }
+
+ componentDidMount(){
+ this.decodeData()
+ }
+
+ decodeData(){
+ const storaged = app.app_theme.getString()
+ try {
+ if (storaged) {
+ this.decode(storaged, (res) => {
+ this.setState({ style: res })
+ })
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ }
+
+ encode(data, callback){
+ if (!data) return false
+ try {
+ let mix = []
+ const obj = Object.entries(data)
+ obj.forEach((e) => {
+ mix.push({key: e[0], value: e[1]})
+ })
+ return callback(JSON.stringify(mix))
+ } catch (error) {
+ console.log(error)
+ return false
+ }
+ }
+ decode(data, callback){
+ if (!data) return false
+ try {
+ const scheme = JSON.parse(data)
+ let mix = {};
+ scheme.forEach((e)=>{
+ mix[e.key] = e.value
+ })
+ return callback(mix)
+ } catch (error) {
+ console.log(error)
+ return false
+ }
+ }
+
+ handleChanges(key, value){
+ let { style } = this.state
+ try {
+ switch (key) {
+ case "backgroundImage":{
+ if(style.backgroundColor){
+ this.handleRemove("backgroudColor")
+ }
+ style[key] = value
+ this.encode(style, (res) => {
+ app.app_theme.set(res)
+ this.setPredominantColor(value)
+ })
+ return true
+ }
+ case "backgroundColor":{
+ if(style.backgroundImage){
+ this.handleRemove("backgroundImage")
+ }
+ style[key] = value
+ this.encode(style, (res) => {
+ app.app_theme.set(res)
+ this.handleChanges("predominantColor", value)
+ })
+ }
+ default:{
+ style[key] = value
+ this.encode(style, (res) => {
+ app.app_theme.set(res)
+ })
+ }
+ }
+ this.decodeData()
+ } catch (error) {
+ console.log(error)
+ }
+ }
+
+ resetStyles(){
+ app.app_theme.set([])
+ }
+
+ handleRemove(key){
+ try {
+ const storaged = JSON.parse(app.app_theme.getString())
+ let mix = {};
+ storaged.forEach((e)=>{
+ return e.key !== key? mix[e.key] = e.value : null
+ })
+ console.log(mix)
+ this.encode(mix, (res)=> {
+ app.app_theme.set(res)
+ this.decodeData()
+ })
+ } catch (error) {
+ console.log(error)
+ return false
+ }
+
+ }
+
+ setPredominantColor(furl){
+ const _this = this
+ const img = new Image();
+ const url = ((furl.replace("url", "")).substring(1)).slice(0, -1);
+
+ img.crossOrigin = 'Anonymous';
+ img.src = url
+
+ img.addEventListener('load', function() {
+ const color = `rgb(${colorThief.getColor(img)})`
+ _this.handleChanges("predominantColor", color)
+ })
+
+ }
+
+ helper = {
+ open: (e) => {
+ this.setState({ helper_visible: true, helper_fragment: e })
+ },
+ close: () => {
+ this.setState({ helper_visible: false, helper_fragment: null })
+ },
+ backgroundImage: () => {
+ this.helper.open( this.handleChanges("backgroundImage", i)} />)
+ },
+ backgroundColor: () => {
+ this.helper.open( this.handleChanges("backgroundColor", i)} />)
+ }
+ }
+ render(){
+ return(
+
-
+
+
+ {children}
+
+
+
+ Debug
+ + + + + ) + } +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 5df7edbe..e7ee7acd 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -3,7 +3,9 @@ import * as app from 'app' class Index extends PureComponent { render() { - app.router.go(`login`) + return( + + ) } } diff --git a/src/pages/login/index.js b/src/pages/login/index.js index 65c1b59b..df4d9527 100755 --- a/src/pages/login/index.js +++ b/src/pages/login/index.js @@ -4,7 +4,7 @@ import styles from './index.less' import classnames from 'classnames' import * as antd from 'antd' -import * as Icons from '@ant-design/icons' +import * as Icons from 'components/Icons' import { RegistrationForm } from './register.js' import { NormalLoginForm } from './login.js' diff --git a/src/pages/login/login.js b/src/pages/login/login.js index d41d39e9..51db4903 100755 --- a/src/pages/login/login.js +++ b/src/pages/login/login.js @@ -94,7 +94,6 @@ export class NormalLoginForm extends React.PureComponent { switch (res) { case '200': { this.anim_transition(300) - app.LoginPage.transitionToogle() return } case '400': { diff --git a/src/pages/main/index.js b/src/pages/main/index.js index 36ad00c9..0f5aafe4 100755 --- a/src/pages/main/index.js +++ b/src/pages/main/index.js @@ -6,10 +6,10 @@ import styles from './index.less' export default class Main extends React.Component { render() { return ( -
+ <>
+
)
}
}
diff --git a/src/pages/main/index.less b/src/pages/main/index.less
index 7c81e1c2..62efef22 100755
--- a/src/pages/main/index.less
+++ b/src/pages/main/index.less
@@ -1,6 +1,2 @@
@import '~themes/index.less';
-.mainWrapper {
- position: relative;
- padding: 20px;
-}
diff --git a/src/pages/chats/Events.js b/src/pages/messages/Events.js
similarity index 100%
rename from src/pages/chats/Events.js
rename to src/pages/messages/Events.js
diff --git a/src/pages/chats/chats/ChatContainer.js b/src/pages/messages/chats/ChatContainer.js
similarity index 99%
rename from src/pages/chats/chats/ChatContainer.js
rename to src/pages/messages/chats/ChatContainer.js
index f1d0b749..a311650c 100644
--- a/src/pages/chats/chats/ChatContainer.js
+++ b/src/pages/messages/chats/ChatContainer.js
@@ -7,7 +7,7 @@ import MessageInput from '../messages/MessageInput'
import * as app from 'app'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import styles from '../styles.less'
import classnames from 'classnames'
diff --git a/src/pages/chats/chats/SideBar.js b/src/pages/messages/chats/SideBar.js
similarity index 100%
rename from src/pages/chats/chats/SideBar.js
rename to src/pages/messages/chats/SideBar.js
diff --git a/src/pages/chats/index.js b/src/pages/messages/index.js
similarity index 66%
rename from src/pages/chats/index.js
rename to src/pages/messages/index.js
index e983c4ab..9e96959c 100644
--- a/src/pages/chats/index.js
+++ b/src/pages/messages/index.js
@@ -1,7 +1,7 @@
import React from 'react'
import * as app from 'app'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import io from 'socket.io-client'
import config from 'config'
import ReactEmoji from 'react-emoji';
@@ -19,6 +19,7 @@ export default class Chats extends React.Component{
super(props);
this.state = {
+ err_tick: 0,
socket:null,
user:null,
conn: false
@@ -40,7 +41,7 @@ export default class Chats extends React.Component{
console.log(prefix, "Connected");
const payload = { id: userData.UserID, name: userData.username, avatar: userData.avatar }
socket.emit(USER_CONNECTED, payload);
- this.setState({user: payload, conn: true})
+ this.setState({user: payload, conn: true, err_tick: 0})
})
}
@@ -51,13 +52,19 @@ export default class Chats extends React.Component{
})
socket.on('reconnecting', () =>{
- console.log(prefix, 'Trying to reconnect')
+ this.setState({ err_tick: (this.state.err_tick+1) })
+ console.log(prefix, 'Trying to reconnect', this.state.err_tick)
})
}
render() {
const { socket, user } = this.state
- if(!user) return Loading
Test your Publics!
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/pages/publics/style_design.js b/src/pages/publics/style_design.js
new file mode 100644
index 00000000..28b89bf3
--- /dev/null
+++ b/src/pages/publics/style_design.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import config from 'config'
+
+
+export default class PAGE_PUBLIC extends React.Component{
+ render(){
+ return(
+
+ 
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/pages/saves/index.js b/src/pages/saves/index.js
index 68e6ce42..a29baa72 100755
--- a/src/pages/saves/index.js
+++ b/src/pages/saves/index.js
@@ -1,7 +1,7 @@
import React from 'react'
import * as app from 'app'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
import { MainFeed } from 'components'
import styles from './index.less'
diff --git a/src/pages/settings/components/about.js b/src/pages/settings/components/about.js
index 34a9abff..84808f1a 100755
--- a/src/pages/settings/components/about.js
+++ b/src/pages/settings/components/about.js
@@ -1,9 +1,32 @@
import React from 'react'
import { App_about } from 'components'
+import l from 'globals/links'
+import * as Icons from 'components/Icons'
+import * as antd from 'antd'
+
+
export default class AppAbout extends React.Component {
render() {
- return Style Design
+
+
+ 🎉✨ It's completely free and open source !
+It is an impressive amount of work and effort, help us to continue offering quality services, you can support us from our patreon campaign.
+
+
+
+
+ 👨💻 You are developer? You can help us by joining our team!
++
+
+ Unsplash
+
+
+
+
+ {this.state.helper_fragment}
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/pages/settings/components/theme/index.less b/src/pages/settings/components/theme/index.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/settings/index.js b/src/pages/settings/index.js
index d64a2207..d2825821 100755
--- a/src/pages/settings/index.js
+++ b/src/pages/settings/index.js
@@ -1,6 +1,8 @@
import React from 'react'
import { Menu } from 'antd'
-import * as Icons from '@ant-design/icons'
+import * as Icons from 'components/Icons'
+import * as Feather from 'feather-reactjs'
+
import styles from './style.less'
import NotificationView from './components/notification/index.js'
@@ -9,6 +11,7 @@ import Earnings from './components/earnings/index.js'
import Base from './components/base.js'
import AppAbout from './components/about.js'
+import Theme from './components/theme'
const { Item } = Menu
const menuMap = {
@@ -17,6 +20,11 @@ const menuMap = {
+
+
+
+
+
+