From f787bc14af376d469452aa4998a92b4d98623e20 Mon Sep 17 00:00:00 2001 From: Arian Rahimi Date: Tue, 27 Aug 2019 14:58:11 +0430 Subject: [PATCH 1/3] fix: AppInfo and MiddlePanel support RTL --- src/common-elements/panels.ts | 2 ++ src/components/ApiInfo/styled.elements.ts | 10 +++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index 2f30b399..f41845fc 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -4,6 +4,8 @@ import styled, { media } from '../styled-components'; export const MiddlePanel = styled.div` width: calc(100% - ${props => props.theme.rightPanel.width}); padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; + direction: ${props => props.theme.typography.direction || 'ltr'}; + text-align: ${props => (props.theme.typography.direction === 'rtl') ? 'right' : 'inherit'}; ${media.lessThan('medium', true)` width: 100%; diff --git a/src/components/ApiInfo/styled.elements.ts b/src/components/ApiInfo/styled.elements.ts index 72bebcd4..937587b7 100644 --- a/src/components/ApiInfo/styled.elements.ts +++ b/src/components/ApiInfo/styled.elements.ts @@ -28,7 +28,15 @@ export const DownloadButton = styled.a` export const InfoSpan = styled.span` &::before { content: '|'; - display: inline-block; + display: ${props => (props.theme.typography.direction === 'ltr') ? 'inline-block' : 'none'}; + opacity: 0.5; + width: ${delimiterWidth}px; + text-align: center; + } + + &::after { + content: '|'; + display: ${props => (props.theme.typography.direction === 'rtl') ? 'inline-block' : 'none'}; opacity: 0.5; width: ${delimiterWidth}px; text-align: center; From 3c352ceccb557bb4bce26b0576ecd44d7472a3ae Mon Sep 17 00:00:00 2001 From: "fateme.fazli" Date: Tue, 27 Aug 2019 17:47:39 +0430 Subject: [PATCH 2/3] feat(font): added Vazir font. --- benchmark/index.html | 3 ++- cli/template.hbs | 3 ++- config/docker/index.tpl.html | 3 ++- demo/index.html | 3 ++- demo/playground/index.html | 3 ++- demo/ssr/index.ts | 1 + src/theme.ts | 2 +- 7 files changed, 12 insertions(+), 6 deletions(-) diff --git a/benchmark/index.html b/benchmark/index.html index 247406a0..107cd1f4 100644 --- a/benchmark/index.html +++ b/benchmark/index.html @@ -15,6 +15,7 @@ } + @@ -25,4 +26,4 @@ - \ No newline at end of file + diff --git a/cli/template.hbs b/cli/template.hbs index b055f786..fff76799 100644 --- a/cli/template.hbs +++ b/cli/template.hbs @@ -14,10 +14,11 @@ {{{redocHead}}} + {{{redocHTML}}} - \ No newline at end of file + diff --git a/config/docker/index.tpl.html b/config/docker/index.tpl.html index 2995ff26..0066d46d 100644 --- a/config/docker/index.tpl.html +++ b/config/docker/index.tpl.html @@ -16,6 +16,7 @@ } + @@ -23,4 +24,4 @@ - \ No newline at end of file + diff --git a/demo/index.html b/demo/index.html index 8675b407..dd11558e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -23,6 +23,7 @@ } + @@ -43,4 +44,4 @@ - \ No newline at end of file + diff --git a/demo/playground/index.html b/demo/playground/index.html index d322ee3e..1e64b7cc 100644 --- a/demo/playground/index.html +++ b/demo/playground/index.html @@ -16,10 +16,11 @@ } + - \ No newline at end of file + diff --git a/demo/ssr/index.ts b/demo/ssr/index.ts index d94076b1..baac5331 100644 --- a/demo/ssr/index.ts +++ b/demo/ssr/index.ts @@ -40,6 +40,7 @@ const server = http.createServer(async (request, response) => { + ${css} diff --git a/src/theme.ts b/src/theme.ts index a6dd205b..f6a12b21 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -99,7 +99,7 @@ const defaultTheme: ThemeInterface = { fontWeightRegular: '400', fontWeightBold: '600', fontWeightLight: '300', - fontFamily: 'Roboto, sans-serif', + fontFamily: 'Roboto, sans-serif, Vazir', smoothing: 'antialiased', optimizeSpeed: true, headings: { From a8b88eb786d1dba773caf73ff5947153b90fd6d6 Mon Sep 17 00:00:00 2001 From: "fateme.fazli" Date: Wed, 28 Aug 2019 14:45:52 +0430 Subject: [PATCH 3/3] feat(rtl): added rtl compatibility to Endpoint component --- demo/openapi-fa.yaml | 4 ++-- src/components/Endpoint/styled.elements.ts | 6 ++++-- src/theme.ts | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/demo/openapi-fa.yaml b/demo/openapi-fa.yaml index e3560a3b..0ecad606 100644 --- a/demo/openapi-fa.yaml +++ b/demo/openapi-fa.yaml @@ -1,9 +1,9 @@ openapi: 3.0.0 servers: - url: //petstore.swagger.io/v2 - description: Default server + description: سرور پیش فرض - url: //petstore.swagger.io/sandbox - description: Sandbox server + description: sandbox سرور info: description: | این یک فایل تست api-doc است که مرتبط با مدیریت یک پت‌شاپ طراحی و نوشته شده است. diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index f00a032b..853f38b1 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -25,6 +25,7 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean border: ${props => (props.inverted ? '0' : '1px solid transparent')}; border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; transition: border-color 0.25s ease; + direction: ltr; ${props => (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''} @@ -59,7 +60,7 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>` border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; transition: all 0.25s ease; - + text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'}; ${props => (props.expanded ? '' : 'transform: translateY(-50%) scaleY(0);')} `; @@ -68,6 +69,7 @@ export const ServerItem = styled.div` `; export const ServerUrl = styled.div` + text-align: left; padding: 5px; border: 1px solid #ccc; background: #fff; @@ -75,5 +77,5 @@ export const ServerUrl = styled.div` color: ${props => props.theme.colors.primary.main}; > span { color: ${props => props.theme.colors.text.primary}; - } + }; `; diff --git a/src/theme.ts b/src/theme.ts index f6a12b21..4b9f37f2 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -103,13 +103,13 @@ const defaultTheme: ThemeInterface = { smoothing: 'antialiased', optimizeSpeed: true, headings: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Montserrat, sans-serif, Vazir', fontWeight: '400', lineHeight: '1.6em', }, code: { fontSize: '13px', - fontFamily: 'Courier, monospace', + fontFamily: 'Courier, monospace, Vazir', lineHeight: ({ typography }) => typography.lineHeight, fontWeight: ({ typography }) => typography.fontWeightRegular, color: '#e53935',