message-card-tools-restyling (#307)

* message-card-tools-restyling * message-card-tools--restyling-release_6.1-based * change requests
th2-net · Dec 29, 2021 · 26c8782 · 26c8782
1 parent 8a30582
commit 26c8782
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 98 deletions.
diff --git a/resources/icons/ascii.svg b/resources/icons/ascii.svg
diff --git a/resources/icons/binar.svg b/resources/icons/binar.svg
diff --git a/resources/icons/json.svg b/resources/icons/json.svg
diff --git a/resources/icons/messages-beautify.svg b/resources/icons/messages-beautify.svg
diff --git a/src/components/message/message-card/MessageCardBase.tsx b/src/components/message/message-card/MessageCardBase.tsx
@@ -141,8 +141,6 @@ export function MessageCardBase({
 
 	const messageCardToolsConfig: MessageCardToolsConfig = {
 		message,
-		messageId,
-		messageType,
 		messageViewType: viewType,
 		toggleViewType,
 		isBookmarked: isBookmarked || false,

diff --git a/src/components/message/message-card/MessageCardTools.tsx b/src/components/message/message-card/MessageCardTools.tsx
@@ -31,8 +31,6 @@ const COPY_NOTIFICATION_TEXT = 'Text copied to the clipboard!';
 
 export type MessageCardToolsConfig = {
 	message: EventMessage;
-	messageId: string;
-	messageType: string;
 	messageViewType: MessageViewType;
 	toggleViewType: (viewType: MessageViewType) => void;
 	isBookmarked: boolean;
@@ -43,15 +41,15 @@ export type MessageCardToolsConfig = {
 
 const MessageCardTools = ({
 	message,
-	messageId,
-	messageType,
 	messageViewType,
 	toggleViewType,
 	isBookmarked,
 	toggleMessagePin,
 	isScreenshotMsg,
 	isEmbedded,
 }: MessageCardToolsConfig) => {
+	const { messageId, messageType } = message;
+
 	const [isViewMenuOpen, setIsViewMenuOpen] = useState(false);
 	const rootRef = useRef<HTMLDivElement>(null);
 	const appViewMode = useViewMode();
@@ -66,20 +64,15 @@ const MessageCardTools = ({
 		? [
 				MessageViewType.JSON,
 				MessageViewType.FORMATTED,
-				MessageViewType.BINARY,
 				MessageViewType.ASCII,
+				MessageViewType.BINARY,
 		  ]
 		: [MessageViewType.BINARY, MessageViewType.ASCII];
 
-	function onCopy(jsonObjectToCopy: 'body' | 'fields' = 'body') {
+	function onCopy() {
 		let content: string;
 
-		const jsonToCopy =
-			jsonObjectToCopy === 'fields'
-				? message.body?.fields
-					? normalizeFields(message.body.fields)
-					: null
-				: message.body;
+		const jsonToCopy = message.body;
 
 		switch (messageViewType) {
 			case MessageViewType.ASCII:
@@ -119,11 +112,10 @@ const MessageCardTools = ({
 			</div>
 			<MessagePopup isOpen={isViewMenuOpen}>
 				{!isEmbedded && (
-					<div className='message-card-tools__controls-group'>
+					<div
+						className='message-card-tools__controls-group'
+						title={isBookmarked ? 'Remove bookmark' : 'Bookmark'}>
 						<div className='message-card-tools__item' onClick={() => toggleMessagePin()}>
-							<span className='message-card-tools__item-title'>
-								{isBookmarked ? 'Remove bookmark' : 'Bookmark'}
-							</span>
 							<div
 								className={createBemElement(
 									'message-card-tools',
@@ -132,75 +124,50 @@ const MessageCardTools = ({
 									isBookmarked ? 'pinned' : null,
 								)}
 							/>
-
-							<div
-								className={createBemElement(
-									'message-card-tools',
-									'indicator',
-									'bookmark',
-									isBookmarked ? 'active' : null,
-								)}
-							/>
 						</div>
 					</div>
 				)}
 				{!isScreenshotMsg && (
 					<div className='message-card-tools__controls-group'>
 						{viewTypes.map(viewType => {
-							const iconClassName = createBemElement('message-card-tools', 'icon', viewType);
-							const indicatorClassName = createBemElement(
+							const itemClassName = createBemElement(
 								'message-card-tools',
-								'indicator',
+								'item',
 								viewType === messageViewType ? 'active' : null,
 							);
+							const iconClassName = createBemElement('message-card-tools', 'icon', viewType);
 
 							return (
 								<div
 									title={viewType}
-									className='message-card-tools__item'
+									className={itemClassName}
 									key={viewType}
 									onClick={() => toggleViewType(viewType)}>
-									<span className='message-card-tools__item-title'>{viewType}</span>
 									<div className={iconClassName} />
-									<div className={indicatorClassName} />
 								</div>
 							);
 						})}
 					</div>
 				)}
-				{!isScreenshotMsg &&
-					(messageViewType === MessageViewType.JSON ||
-						messageViewType === MessageViewType.FORMATTED) && (
-						<div className='message-card-tools__controls-group'>
-							{['body', 'fields'].map(copyOption => (
-								<div
-									key={copyOption}
-									title='Copy content to clipboard'
-									className='message-card-tools__item'
-									onClick={() => {
-										onCopy(copyOption as 'body' | 'fields');
-										setIsViewMenuOpen(false);
-									}}>
-									<span className='message-card-tools__item-title'>
-										{copyOption === 'body' ? 'Copy full' : 'Copy simplified'}
-									</span>
-									<div className='message-card-tools__copy-icon' />
-									<div
-										className={createBemElement('message-card-tools', 'indicator', 'bookmark')}
-									/>
-								</div>
-							))}
-						</div>
-					)}
-				{isScreenshotMsg && (
-					<>
-						<a
+				{!isScreenshotMsg ? (
+					<div className='message-card-tools__controls-group'>
+						<div
+							title='Copy	to clipboard'
 							className='message-card-tools__item'
-							download={`${messageId}.${messageType.replace('image/', '')}`}
-							href={`data:${message.messageType};base64,${message.bodyBase64 || ''}`}>
-							<div className='message-card-tools__icon download' />
-						</a>
-					</>
+							onClick={() => {
+								onCopy();
+								setIsViewMenuOpen(false);
+							}}>
+							<div className='message-card-tools__copy-icon' />
+						</div>
+					</div>
+				) : (
+					<a
+						className='message-card-tools__item'
+						download={`${messageId}.${messageType.replace('image/', '')}`}
+						href={`data:${message.messageType};base64,${message.bodyBase64 || ''}`}>
+						<div className='message-card-tools__icon download' />
+					</a>
 				)}
 				{appViewMode === ViewMode.EmbeddedMessages && (
 					<div className='message-card-tools__controls-group'>

diff --git a/src/styles/messages.scss b/src/styles/messages.scss
@@ -98,6 +98,7 @@
 }
 
 .message-card-tools {
+	position: relative;
 	margin: 1px 4px 0 4px;
 	align-self: stretch;
 	display: flex;
@@ -126,35 +127,34 @@
 
 	&__controls {
 		position: absolute;
-		right: 11px;
+		right: -7px;
 		background-color: white;
 		box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
 		display: flex;
-		padding: 4px 0;
-		gap: 4px;
-		flex-direction: column;
+		padding: 4px 8px;
+		border-radius: 2px;
 		z-index: 2;
 
 		&-group {
 			display: flex;
-			flex-direction: column;
+			&:nth-child(2) {
+				margin: 0 24px;
+			}
 		}
 	}
 
 	&__item {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		gap: 4px;
-		padding: 2px 4px 2px 10px;
 		cursor: pointer;
-		font-size: 11px;
 		color: $primaryTextColor;
+		&:not(:last-child) {
+			margin-right: 12px;
+		}
 
 		&-title {
 			text-transform: capitalize;
 		}
 
+		&.active,
 		&:hover {
 			background-color: rgba(0, 0, 0, 0.07);
 		}
@@ -431,9 +431,9 @@
 
 .mc-raw {
 	display: flex;
-	gap: 10px;
 	align-items: center;
 	position: relative;
+	min-height: 26px;
 
 	&__header {
 		display: flex;