Skip to content

Commit

Permalink
Merge pull request #1706 from mbice/feature/rich-text-align-heading-s…
Browse files Browse the repository at this point in the history 
…tyles-with-sharepoint-text-web-part

Align RichText heading styles and font sizes with OOB SharePoint text web part
  • Loading branch information
@joelfmrodrigues
joelfmrodrigues committed Jan 30, 2024
2 parents a9182ed + 276c0f8 commit b7806cf
Show file tree
Hide file tree
Showing 31 changed files with 131 additions and 117 deletions.
64 changes: 37 additions & 27 deletions src/controls/richText/RichText.module.scss
View file
Expand Up @@ -65,24 +65,28 @@
.toolbarDropDownOption {

&.toolbarButtonH2 {
font-size: 21px;
font-weight: 100;
font-size: 20px;
font-weight: 600;
}

&.toolbarButtonH3 {
font-size: 14px;
font-weight: 100 !important;
font-size: 18px;
font-weight: 600;
}

&.toolbarButtonH4 {
font-size: 14px;
font-weight: 100 !important;
font-size: 16px;
font-weight: 600;
}

&.toolbarButtonBlockQuote {
font-size: 14px;
font-size: 16px;
font-style: italic;
}

&.toolbarButtonNormal {
font-size: 16px;
}
}

.toolbarSubmenuCaret {
Expand Down Expand Up @@ -179,7 +183,7 @@
.ql-snow .ql-toolbar button {
background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
font-size: 14px;
font-size: 16px;
min-width: 34px;
height: 34px;
padding-top: 4px;
Expand Down Expand Up @@ -250,21 +254,21 @@
min-height: 68px;
font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
font-size: 17px;
font-size: 18px;

h2 {
font-weight: 100 !important;
font-weight: 600 !important;
font-size: 28px;
}

h3 {
font-size: 24px;
font-weight: 100 !important;
font-weight: 600 !important;
}

h4 {
font-size: 21px;
font-weight: 100 !important;
font-size: 20px;
font-weight: 600 !important;
}

blockquote,
Expand All @@ -276,14 +280,13 @@
p,
ul {
-webkit-font-smoothing: antialiased;
color: "[theme:black, default:#{$ms-color-black}]";
line-height: 1.3;
// margin: 0 0 16px;
word-wrap: break-word;
}

blockquote {
border-bottom-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
border-bottom-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: none;
Expand All @@ -292,14 +295,13 @@
border-right-style: none;
border-right-width: 0;
border-right-color: transparent;
border-top-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
border-top-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
border-top-style: solid;
border-top-width: 1px;
color: "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
font-size: 24px;
font-size: 20px;
font-style: italic;
font-weight: 100;
line-height: 31.2px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 28px;
padding-bottom: 32px;
margin-top: 28px;
Expand All @@ -311,6 +313,10 @@
text-align: center;
}

.ql-size-xsmall {
font-size: 10px;
}

.ql-size-small {
font-size: 12px;
}
Expand All @@ -320,15 +326,15 @@
}

.ql-size-mediumplus {
font-size: 15px;
font-size: 16px;
}

.ql-size-large {
font-size: 17px;
font-size: 18px;
}

.ql-size-xlarge {
font-size: 21px;
font-size: 20px;
}

.ql-size-xlargeplus {
Expand All @@ -350,15 +356,19 @@
.ql-size-super {
font-size: 42px;
}

.ql-size-superlarge {
font-size: 68px;
}
}

@media screen and (min-width: 1024px) {
.ql-editor div,
.ql-editor ol,
.ql-editor p,
.ql-editor ul {
font-size: 17px;
font-weight: 300;
font-size: 18px;
font-weight: 400;
line-height: 1.3;
}
}
Expand All @@ -375,8 +385,8 @@
.ql-editor.ql-blank::before {
font-style: normal;
color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
font-size: 17px;
font-weight: 300;
font-size: 18px;
font-weight: 400;
line-height: 1.3;
}

Expand Down
11 changes: 6 additions & 5 deletions src/controls/richText/RichText.tsx
View file
Expand Up @@ -41,10 +41,6 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
private _richTextId = undefined;

private ddStyleOpts = [{
key: 0,
text: strings.HeaderNormalText,
data: {}
}, {
key: 2,
text: strings.HeaderH2,
data:
Expand All @@ -59,6 +55,10 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
text: strings.HeaderH4,
data:
{ className: styles.toolbarButtonH4 }
}, {
key: 0,
text: strings.HeaderNormalText,
data: { className: styles.toolbarButtonNormal }
}, {
key: 7,
text: strings.HeaderBlockQuote,
Expand Down Expand Up @@ -511,7 +511,8 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
'xxlarge',
'xxxlarge',
'xxlargeplus',
'super'];
'super',
'superlarge'];
ReactQuillInstance.register(sizeClass, true);

return (
Expand Down
2 changes: 1 addition & 1 deletion src/controls/richText/RichText.types.ts
View file
Expand Up @@ -105,7 +105,7 @@ export interface StyleOptions {
showImage?: boolean;

/**
* Indicates if we should show the Styles button (Heading 1, Heading 2, ..., Pull quote)
* Indicates if we should show the Styles button (Heading 2, Heading 3, ..., Pull quote)
* @defaultvalue true
*/
showStyles?: boolean;
Expand Down
8 changes: 5 additions & 3 deletions src/controls/richText/RichTextPropertyPane.tsx
View file
Expand Up @@ -190,16 +190,18 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
ariaLabel={strings.FontSizeTitle}
selectedKey={selectedSize}
options={[
{ key: 'xsmall', text: '10' },
{ key: 'small', text: '12' },
{ key: 'medium', text: '14' },
{ key: 'mediumplus', text: '15' },
{ key: 'large', text: '17' },
{ key: 'xlarge', text: '21' },
{ key: 'mediumplus', text: '16' },
{ key: 'large', text: '18' },
{ key: 'xlarge', text: '20' },
{ key: 'xlargeplus', text: '24' },
{ key: 'xxlarge', text: '28' },
{ key: 'xxxlarge', text: '32' },
{ key: 'xxlargeplus', text: '36' },
{ key: 'super', text: '42' },
{ key: 'superlarge', text: '68' }
]}
onChanged={this.onChangeSize}
/>
Expand Down
6 changes: 3 additions & 3 deletions src/loc/bg-bg.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Карта на",
"ListViewFilterLabel": "Филтриране на списъка",
"HeaderNormalText": "Нормален текст",
"HeaderH2": "Функция 1",
"HeaderH3": "Функция 2",
"HeaderH4": "Функция 3",
"HeaderH2": "Функция 2",
"HeaderH3": "Функция 3",
"HeaderH4": "Функция 4",
"HeaderBlockQuote": "Изтегли цитат",
"AlignLeft": "Подравни отляво",
"AlignCenter": "Център",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/ca-es.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Mapa de",
"ListViewFilterLabel": "Filtrar la llista",
"HeaderNormalText": "Text normal",
"HeaderH2": "Encapçalament 1",
"HeaderH3": "Encapçalament 2",
"HeaderH4": "Encapçalament 3",
"HeaderH2": "Encapçalament 2",
"HeaderH3": "Encapçalament 3",
"HeaderH4": "Encapçalament 4",
"HeaderBlockQuote": "Cita introductòria",
"AlignLeft": "Alinea a l'esquerra",
"AlignCenter": "Centre",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/da-dk.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Kort over",
"ListViewFilterLabel": "Filtrere listen",
"HeaderNormalText": "Normal tekst",
"HeaderH2": "Overskrift 1",
"HeaderH3": "Overskrift 2",
"HeaderH4": "Overskrift 3",
"HeaderH2": "Overskrift 2",
"HeaderH3": "Overskrift 3",
"HeaderH4": "Overskrift 4",
"HeaderBlockQuote": "Citat",
"AlignLeft": "Venstrejusteret",
"AlignCenter": "Midte",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/de-de.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Karte von",
"ListViewFilterLabel": "Filter",
"HeaderNormalText": "Standardtext",
"HeaderH2": "Überschrift 1",
"HeaderH3": "Überschrift 2",
"HeaderH4": "Überschrift 3",
"HeaderH2": "Überschrift 2",
"HeaderH3": "Überschrift 3",
"HeaderH4": "Überschrift 4",
"HeaderBlockQuote": "Textzitat",
"AlignLeft": "Linksbündig",
"AlignCenter": "Zentrieren",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/el-gr.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Χάρτης",
"ListViewFilterLabel": "Φιλτράρισμα της λίστας",
"HeaderNormalText": "Κανονικό κείμενο",
"HeaderH2": "Τομέας 1",
"HeaderH3": "Τομέας 2",
"HeaderH4": "Τομέας 3",
"HeaderH2": "Τομέας 2",
"HeaderH3": "Τομέας 3",
"HeaderH4": "Τομέας 4",
"HeaderBlockQuote": "Ελκυστική φράση",
"AlignLeft": "Στοίχιση αριστερά",
"AlignCenter": "Κέντρο",
Expand Down
7 changes: 4 additions & 3 deletions src/loc/en-us.ts
View file
Expand Up @@ -90,10 +90,11 @@ define([], () => {
ListViewFilterLabel: "Filter the list",

HeaderNormalText: "Normal text",
HeaderH2: "Heading 1",
HeaderH3: "Heading 2",
HeaderH4: "Heading 3",
HeaderH2: "Heading 2",
HeaderH3: "Heading 3",
HeaderH4: "Heading 4",
HeaderBlockQuote: "Pull quote",
HeaderMonospaced: "Monospaced",
AlignLeft: "Align left",
AlignCenter: "Center",
AlignRight: "Align right",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/es-es.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Mapa de",
"ListViewFilterLabel": "Filtrar la lista",
"HeaderNormalText": "Texto normal",
"HeaderH2": "Rumbo 1",
"HeaderH3": "Rumbo 2",
"HeaderH4": "Rumbo 3",
"HeaderH2": "Rumbo 2",
"HeaderH3": "Rumbo 3",
"HeaderH4": "Rumbo 4",
"HeaderBlockQuote": "Presupuesto de extracción",
"AlignLeft": "Alinear a la izquierda",
"AlignCenter": "Centro",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/eu-es.ts
View file
Expand Up @@ -83,9 +83,9 @@ define([], () => {
ListViewFilterLabel: "Filter the list",

HeaderNormalText: "Normal text",
HeaderH2: "Heading 1",
HeaderH3: "Heading 2",
HeaderH4: "Heading 3",
HeaderH2: "Heading 2",
HeaderH3: "Heading 3",
HeaderH4: "Heading 4",
HeaderBlockQuote: "Pull quote",
AlignLeft: "Align left",
AlignCenter: "Center",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/fi-fi.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Kartta",
"ListViewFilterLabel": "Suodata luettelo",
"HeaderNormalText": "Normaali teksti",
"HeaderH2": "Otsake 1",
"HeaderH3": "Otsake 2",
"HeaderH4": "Otsake 3",
"HeaderH2": "Otsake 2",
"HeaderH3": "Otsake 3",
"HeaderH4": "Otsake 4",
"HeaderBlockQuote": "Erotettu lainaus",
"AlignLeft": "Tasaa vasemmalle",
"AlignCenter": "Keskelle",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/fr-ca.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Carte de",
"ListViewFilterLabel": "Filtrer",
"HeaderNormalText": "Texte normal",
"HeaderH2": "Titre 1",
"HeaderH3": "Titre 2",
"HeaderH4": "Titre 3",
"HeaderH2": "Titre 2",
"HeaderH3": "Titre 3",
"HeaderH4": "Titre 4",
"HeaderBlockQuote": "Citation",
"AlignLeft": "Aligner à gauche",
"AlignCenter": "Centrer",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/fr-fr.ts
View file
Expand Up @@ -79,9 +79,9 @@ define([], () => {
"mapsTitlePrefix": "Carte de",
"ListViewFilterLabel": "Filtrer",
"HeaderNormalText": "Texte normal",
"HeaderH2": "Titre 1",
"HeaderH3": "Titre 2",
"HeaderH4": "Titre 3",
"HeaderH2": "Titre 2",
"HeaderH3": "Titre 3",
"HeaderH4": "Titre 4",
"HeaderBlockQuote": "Citation",
"AlignLeft": "Aligner à gauche",
"AlignCenter": "Centrer",
Expand Down
6 changes: 3 additions & 3 deletions src/loc/it-it.ts
View file
Expand Up @@ -77,9 +77,9 @@ define([], () => {
"mapsTitlePrefix": "Mappa di",
"ListViewFilterLabel": "Filtrare l'elenco",
"HeaderNormalText": "Testo normale",
"HeaderH2": "Titolo 1",
"HeaderH3": "Titolo 2",
"HeaderH4": "Titolo 3",
"HeaderH2": "Titolo 2",
"HeaderH3": "Titolo 3",
"HeaderH4": "Titolo 4",
"HeaderBlockQuote": "Quotazione pull",
"AlignLeft": "Allinea a sinistra",
"AlignCenter": "Centro",
Expand Down

0 comments on commit b7806cf

Please sign in to comment.