coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added zooming image and max width fix

Browse Source
This commit is contained in:
Jori Lallo 2017-11-07 23:10:02 -08:00
parent a725a4bbf6
commit 5c47f9b5d1
3 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/components/Editor/components/Image.js
View File

@ -1,5 +1,6 @@
// @flow
import React, { Component } from 'react';
import ImageZoom from 'react-medium-image-zoom';
import styled from 'styled-components';
import type { Props } from '../types';
import { color } from 'shared/styles/constants';
@ -34,13 +35,25 @@ class Image extends Component {
return (
<CenteredImage>
<StyledImg
{...attributes}
src={src}
alt={caption}
active={active}
loading={loading}
/>
{!readOnly
? <StyledImg
{...attributes}
src={src}
alt={caption}
active={active}
loading={loading}
/>
: <ImageZoom
image={{
src,
alt: caption,
style: {
maxWidth: '100%',
},
...attributes,
}}
shouldRespectMaxDimension
/>}
{showCaption &&
<Caption
type="text"
@ -58,6 +71,7 @@ class Image extends Component {
}
const StyledImg = styled.img`
max-width: 100%;
box-shadow: ${props => (props.active ? `0 0 0 2px ${color.slate}` : '0')};
border-radius: ${props => (props.active ? `2px` : '0')};
opacity: ${props => (props.loading ? 0.5 : 1)};

41
package.json
View File

@ -4,11 +4,14 @@
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
"build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
"build:webpack":
"NODE_ENV=production webpack --config webpack.config.prod.js",
"build:analyze":
"NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
"build": "npm run clean && npm run build:webpack",
"start": "node index.js",
"dev": "NODE_ENV=development DEBUG=sql,cache,presenters ./node_modules/.bin/nodemon --inspect --watch server index.js",
"dev":
"NODE_ENV=development DEBUG=sql,cache,presenters ./node_modules/.bin/nodemon --inspect --watch server index.js",
"lint": "npm run lint:flow && npm run lint:js",
"lint:js": "eslint app",
"lint:flow": "flow",
@ -18,39 +21,24 @@
"sequelize:migrate": "sequelize db:migrate",
"test": "npm run test:app && npm run test:server",
"test:app": "jest",
"test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
"test:server":
"jest --config=server/.jestconfig.json --runInBand --forceExit",
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
"*.js": ["eslint --fix", "git add"]
},
"jest": {
"verbose": false,
"roots": [
"app"
],
"roots": ["app"],
"moduleNameMapper": {
"^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
"^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
"moduleDirectories": [
"node_modules"
],
"modulePaths": [
"app"
],
"setupFiles": [
"<rootDir>/setupJest.js",
"<rootDir>/__mocks__/window.js"
]
"moduleFileExtensions": ["js", "jsx", "json"],
"moduleDirectories": ["node_modules"],
"modulePaths": ["app"],
"setupFiles": ["<rootDir>/setupJest.js", "<rootDir>/__mocks__/window.js"]
},
"engines": {
"node": ">= 7.6"
@ -145,6 +133,7 @@
"react-dropzone": "3.6.0",
"react-helmet": "^5.2.0",
"react-keydown": "^1.7.3",
"react-medium-image-zoom": "^2.0.3",
"react-modal": "^2.2.1",
"react-portal": "^3.1.0",
"react-router-dom": "^4.1.1",

4
yarn.lock
View File

@ -7360,6 +7360,10 @@ react-keydown@^1.7.3:
dependencies:
core-js "^2.5.0"
react-medium-image-zoom@^2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-2.0.6.tgz#9c6c6b38f2bae4f9f5fd7f8adf43c2b816e13660"
react-modal@^2.2.1:
version "2.2.4"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0"