1 files changed, 27 insertions, 21 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d1561fd67..18f53b8e7 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -1,38 +1,33 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Icon, Tooltip } from '@material-ui/core';
+import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { AiOutlineColumnWidth } from 'react-icons/ai';
+import { BiHide, BiShow } from 'react-icons/bi';
+import { BsGrid3X3GapFill } from 'react-icons/bs';
+import { CiGrid31 } from 'react-icons/ci';
+import { FaBraille, FaLock, FaLockOpen } from 'react-icons/fa';
+import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff, MdTouchApp } from 'react-icons/md';
+import { RxWidth } from 'react-icons/rx';
+import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb';
+import { TfiBarChart } from 'react-icons/tfi';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
-import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { RichTextField } from '../../fields/RichTextField';
-import { BoolCast, ScriptCast, StrCast } from '../../fields/Types';
+import { BoolCast, ScriptCast } from '../../fields/Types';
 import { ImageField } from '../../fields/URLField';
-import { Utils } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { IsFollowLinkScript } from '../util/LinkFollower';
 import { LinkManager } from '../util/LinkManager';
 import { SelectionManager } from '../util/SelectionManager';
+import { SettingsManager } from '../util/SettingsManager';
 import { undoable, undoBatch } from '../util/UndoManager';
 import { Colors } from './global/globalEnums';
 import { InkingStroke } from './InkingStroke';
 import { DocumentView, OpenWhere } from './nodes/DocumentView';
-import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
-import { JsxElement } from 'typescript';
-import { FaBraille, FaHighlighter, FaLock, FaLockOpen, FaThumbtack } from 'react-icons/fa';
-import { AiOutlineApple, AiOutlineColumnWidth, AiOutlinePicture } from 'react-icons/ai';
-import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff, MdTouchApp } from 'react-icons/md';
-import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb';
-import { BiHide, BiShow } from 'react-icons/bi';
-import { BsGrid3X3GapFill } from 'react-icons/bs';
-import { TfiBarChart } from 'react-icons/tfi';
-import { CiGrid31 } from 'react-icons/ci';
-import { RxWidth } from 'react-icons/rx';
-import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components';
-import { SettingsManager } from '../util/SettingsManager';
 
 enum UtilityButtonState {
     Default,
@@ -61,8 +56,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 text={label(targetDoc?.[property])}
                 color={SettingsManager.userColor}
                 icon={icon(targetDoc?.[property] as any)}
-                iconPlacement={'left'}
-                align={'flex-start'}
+                iconPlacement="left"
+                align="flex-start"
                 fillWidth={true}
                 toggleType={ToggleType.BUTTON}
                 onClick={undoable(() => {
@@ -173,6 +168,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
+    @computed get verticalAlignButton() {
+        //select text
+        return this.propertyToggleBtn(
+            on => (on ? 'ALIGN TOP' : 'ALIGN CENTER'),
+            '_layout_centered',
+            on => `${on ? 'Text is aligned with top of document' : 'Text is aligned with center of document'} `,
+            on => <MdTouchApp /> // 'eye'
+        );
+    }
+
     @computed get fitContentButton() {
         return this.propertyToggleBtn(
             on => (on ? 'PREVIOUS VIEW' : 'VIEW ALL'), //'View All',
@@ -487,7 +492,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     render() {
         const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
         const isText = layoutField instanceof RichTextField;
-        const isInk = layoutField instanceof InkField;
+        const isInk = this.selectedDoc?.layout_isSvg;
         const isImage = layoutField instanceof ImageField;
         const isMap = this.selectedDoc?.type === DocumentType.MAP;
         const isCollection = this.selectedDoc?.type === DocumentType.COL;
@@ -512,10 +517,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.layout_fitWidthButton)}
                 {/* {toggle(this.freezeThumb)} */}
                 {toggle(this.forceActiveButton)}
+                {toggle(this.verticalAlignButton, { display: !isText ? 'none' : '' })}
                 {toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
                 {/* {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })} */}
                 {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
-                {toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
+                {toggle(this.maskButton, { display: isNovice || !isInk ? 'none' : '' })}
                 {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
                 {toggle(this.chromeButton, { display: isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}