feat: update styling of asset property (#523)

* feat: update styling of asset property * fix: restore online image input * fix: align preview image correctly
meetalva · Jun 5, 2018 · 9794b86 · 9794b86
1 parent 77dc379
commit 9794b86
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 57 deletions.
diff --git a/src/components/property-items/asset-item/index.tsx b/src/components/property-items/asset-item/index.tsx
@@ -26,28 +26,63 @@ export enum AssetPropertyInputType {
 }
 
 const StyledAssetItem = styled.div`
+	display: block;
+	margin-bottom: ${getSpace(SpaceSize.S)}px;
+`;
+
+const StyledContainer = styled.div`
+	display: flex;
 	width: 100%;
+	box-sizing: border-box;
 `;
 
 const StyledPreview = styled.div`
+	font-family: ${fonts().NORMAL_FONT};
+`;
+
+const StyledAsset = styled.div`
+	display: block;
+	box-sizing: border-box;
+	width: 70%;
+	border: 1px solid ${Color.Grey90};
+	@media screen and (-webkit-min-device-pixel-ratio: 2) {
+		border-width: 0.5px;
+	}
+	border-radius: 3px;
+	background: ${Color.White};
+`;
+
+const StyledImageBox = styled.div`
 	display: flex;
-	flex-direction: row;
+	margin: ${getSpace(SpaceSize.XS)}px;
+	box-sizing: border-box;
 	align-items: center;
-	margin-bottom: ${getSpace(SpaceSize.XS)}px;
+	justify-content: center;
+	height: 60px;
+`;
+
+const StyledImage = styled.img`
+	max-height: 100%;
+	max-width: 100%;
+	object-fit: cover;
+	object-position: center;
+	user-drag: none;
+	user-select: none;
 `;
 
 const StyledInput = styled.input`
 	display: inline-block;
 	box-sizing: border-box;
-	max-width: 75%;
+	width: 100%;
 	text-overflow: ellipsis;
 	border: none;
-	border-bottom: 1px solid transparent;
+	padding: 0 ${getSpace(SpaceSize.S)}px;
 	background: transparent;
 	font-family: ${fonts().NORMAL_FONT};
-	font-size: 15px;
+	font-size: 12px;
 	color: ${Color.Grey36};
 	transition: all 0.2s;
+	text-align: center;
 
 	::-webkit-input-placeholder {
 		color: ${Color.Grey60};
@@ -65,75 +100,63 @@ const StyledInput = styled.input`
 	}
 `;
 
-const StyledImageBoxContainer = styled.div`
-	background-color: ${Color.White};
-	border-radius: 3px;
-	border: 0.5px solid ${Color.Grey90};
-	box-sizing: border-box;
-	flex-shrink: 0;
-	height: 42px;
-	margin-right: 6px;
-	padding: 3px;
-	width: 42px;
-`;
-
-const StyledImageBox = styled.div`
-	display: flex;
-	box-sizing: border-box;
-	overflow: hidden;
+const StyledButtonGroup = styled.div`
 	width: 100%;
-	height: 100%;
-`;
+	margin-top: ${getSpace(SpaceSize.XS)}px;
 
-const StyledImage = styled.img`
-	width: 100%;
-	object-fit: cover;
-	object-position: center;
+	border-top: 1px solid ${Color.Grey90};
+	@media screen and (-webkit-min-device-pixel-ratio: 2) {
+		border-top-width: 0.5px;
+	}
 `;
 
 const StyledButton = styled.button`
-	max-width: 50%;
-	margin-right: 3px;
-	border: 0.5px solid ${Color.Grey90};
-	border-radius: 3px;
-	background-color: ${Color.White};
-	padding: ${getSpace(SpaceSize.XS)}px ${getSpace(SpaceSize.S)}px;
+	display: inline-block;
+	width: 50%;
+	border: none;
+	outline: none;
+	color: ${Color.Grey36};
+	background: transparent;
+	padding: ${getSpace(SpaceSize.XS)}px 0;
+	box-sizing: border-box;
+
+	border-right: 1px solid ${Color.Grey90};
+	@media screen and (-webkit-min-device-pixel-ratio: 2) {
+		border-right-width: 0.5px;
+	}
+
+	&:last-of-type {
+		border-right-color: transparent;
+	}
 `;
 
 export const AssetItem: React.StatelessComponent<AssetItemProps> = props => (
 	<StyledAssetItem className={props.className}>
-		<label>
+		<StyledContainer>
 			<PropertyLabel label={props.label} />
-			<StyledPreview>
-				<StyledImageBoxContainer>
+			<StyledAsset>
+				<StyledPreview>
 					<StyledImageBox>
 						{props.imageSrc && <StyledImage src={props.imageSrc} />}
 					</StyledImageBox>
-				</StyledImageBoxContainer>
-				{props.inputType === AssetPropertyInputType.Url && (
+
 					<StyledInput
 						onBlur={props.onInputBlur}
 						onChange={props.onInputChange}
-						type="textarea"
+						type="text"
 						value={props.inputValue}
 						placeholder={props.placeholder}
 					/>
-				)}
-				{props.inputType === AssetPropertyInputType.File && (
-					<>
-						<StyledButton onClick={props.onChooseClick}>Choose ...</StyledButton>
+
+					<StyledButtonGroup>
+						<StyledButton onClick={props.onChooseClick}>Choose</StyledButton>
 						<StyledButton disabled={props.imageSrc.length === 0} onClick={props.onClearClick}>
 							Clear
 						</StyledButton>
-					</>
-				)}
-			</StyledPreview>
-		</label>
-		{props.inputType === AssetPropertyInputType.Url && (
-			<>
-				<StyledButton onClick={props.onChooseClick}>Choose ...</StyledButton>
-			</>
-		)}
+					</StyledButtonGroup>
+				</StyledPreview>
+			</StyledAsset>
+		</StyledContainer>
 		{props.description && <PropertyDescription description={props.description || ''} />}
 	</StyledAssetItem>
 );
diff --git a/src/components/property-items/boolean-item/index.tsx b/src/components/property-items/boolean-item/index.tsx
@@ -25,7 +25,6 @@ const StyledBooleanItem = styled.label`
 
 const StyledContainer = styled.div`
 	display: flex;
-	align-items: center;
 	width: 100%;
 	box-sizing: border-box;
 `;

diff --git a/src/components/property-items/enum-item/index.tsx b/src/components/property-items/enum-item/index.tsx
@@ -29,7 +29,6 @@ const StyledEnumItem = styled.label`
 
 const StyledContainer = styled.div`
 	display: flex;
-	align-items: center;
 	width: 100%;
 	box-sizing: border-box;
 `;

diff --git a/src/components/property-items/property-label.tsx b/src/components/property-items/property-label.tsx
@@ -20,6 +20,7 @@ const StyledLabel = styled.span`
 	user-select: none;
 	cursor: default;
 	box-sizing: border-box;
+	padding-top: ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px;
 	padding-right: ${getSpace(SpaceSize.XS)}px;
 `;
 

diff --git a/src/components/property-items/string-item/index.tsx b/src/components/property-items/string-item/index.tsx
@@ -23,7 +23,6 @@ const StyledStringItem = styled.label`
 
 const StyledContainer = styled.div`
 	display: flex;
-	align-items: center;
 	width: 100%;
 	box-sizing: border-box;
 `;

diff --git a/src/container/property-list/property-list.tsx b/src/container/property-list/property-list.tsx
@@ -135,7 +135,7 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 								type: ServerMessageType.AssetReadRequest
 							});
 						}}
-						placeholder={example ? `e.g.: ${example}` : ''}
+						placeholder={`Or enter URL`}
 					/>
 				);
 			}

diff --git a/src/model/pattern-library/builtins/image.ts b/src/model/pattern-library/builtins/image.ts
@@ -19,7 +19,7 @@ export const Image = (context: BuiltInContext): BuiltInResult => {
 		new PatternProperty.PatternAssetProperty({
 			contextId: SRC_CONTEXT_ID,
 			id: context.options.getGlobalPropertyId(patternId, SRC_CONTEXT_ID),
-			label: 'Source',
+			label: 'Image',
 			origin: Types.PatternPropertyOrigin.BuiltIn,
 			propertyName: 'src'
 		}),