diff --git a/.gitignore b/.gitignore index 54d4d66492..bccc01da5a 100644 --- a/.gitignore +++ b/.gitignore @@ -50,4 +50,3 @@ TestsResults/ **/.yarn/cache **/.yarn/install-state.gz -config/appsettings.dev.json diff --git a/build/build.backend.docker.ps1 b/build/build.backend.docker.ps1 new file mode 100644 index 0000000000..2a73ddeaec --- /dev/null +++ b/build/build.backend.docker.ps1 @@ -0,0 +1,81 @@ +$PSversionMajor = $PSVersionTable.PSVersion | sort-object major | ForEach-Object { $_.major } +$PSversionMinor = $PSVersionTable.PSVersion | sort-object minor | ForEach-Object { $_.minor } + +if ($PSversionMajor -lt 7 -or $PSversionMinor -lt 2) { + Write-Error "Powershell version must be greater than or equal to 7.2." + exit +} + +$Branch = git branch --show-current +$BranchExistRemote = git ls-remote --heads origin $Branch + +if (-not $BranchExistRemote) { + Write-Error "The current branch does not exist in the remote repository. Please push changes." + exit +} + +$RootDir = Split-Path -Parent $PSScriptRoot +$DockerDir = ($RootDir + "\build\install\docker") +$BuildDate = Get-Date -Format "yyyy-MM-dd" +$LocalIp = (Get-WmiObject -Class Win32_NetworkAdapterConfiguration | Where-Object { $_.DHCPEnabled -ne $null -and $_.DefaultIPGateway -ne $null }).IPAddress | Select-Object -First 1 + +$Doceditor = ($LocalIp + ":5013") +$Login = ($LocalIp + ":5011") +$Client = ($LocalIp + ":5001") + +$DockerFile = "Dockerfile.dev" +$EnvExtension = "dev" +$CoreBaseDomain = "localhost" + +# Stop all backend services" +& "$PSScriptRoot\start\stop.backend.docker.ps1" + +$Env:COMPOSE_IGNORE_ORPHANS = "True" + +$Containers = docker ps -a -f "name=^onlyoffice" --format="{{.ID}} {{.Names}}" | Select-String -Pattern ("mysql|rabbitmq|redis|elasticsearch|documentserver") -NotMatch | ConvertFrom-String | ForEach-Object P1 +$Images = docker images onlyoffice/docspace* -q + +if ($Containers) { + Write-Host "Remove all backend containers" -ForegroundColor Blue + docker rm -f $Containers +} + +if ($Images) { + Write-Host "Remove all docker images except 'mysql, rabbitmq, redis, elasticsearch, documentserver'" -ForegroundColor Blue + docker rmi -f $Images +} + +Write-Host "Run MySQL" -ForegroundColor Green +docker compose -f ($DockerDir + "\db.yml") up -d + +Write-Host "Run environments (redis, rabbitmq)" -ForegroundColor Green +$Env:DOCKERFILE = $DockerFile +docker compose -f ($DockerDir + "\redis.yml") -f ($DockerDir + "\rabbitmq.yml") up -d + +if ($args[0] -eq "--no_ds") { + Write-Host "SKIP Document server" -ForegroundColor Blue +} +else { + Write-Host "Run Document server" -ForegroundColor Green + $Env:DOCUMENT_SERVER_IMAGE_NAME = "onlyoffice/documentserver-de:latest" + $Env:ROOT_DIR = $RootDir + docker compose -f ($DockerDir + "\ds.dev.yml") up -d +} + +Write-Host "Build all backend services" -ForegroundColor Blue +$Env:DOCKERFILE = $DockerFile +$Env:RELEASE_DATE = $BuildDate +$Env:GIT_BRANCH = $Branch +$Env:SERVICE_DOCEDITOR = $Doceditor +$Env:SERVICE_LOGIN = $Login +$Env:SERVICE_CLIENT = $Client +$Env:APP_CORE_BASE_DOMAIN = $CoreBaseDomain +$Env:ENV_EXTENSION = $EnvExtension +docker compose -f ($DockerDir + "\build.dev.yml") build --build-arg GIT_BRANCH=$Branch --build-arg RELEASE_DATE=$BuildDate + +Write-Host "Run DB migration" -ForegroundColor Green +$Env:DOCKERFILE = $DockerFile +docker compose -f ($DockerDir + "\migration-runner.yml") up -d + +# Start all backend services" +& "$PSScriptRoot\start\start.backend.docker.ps1" \ No newline at end of file diff --git a/build/build.backend.docker.sh b/build/build.backend.docker.sh index 40e743700a..d5c20d189c 100755 --- a/build/build.backend.docker.sh +++ b/build/build.backend.docker.sh @@ -9,10 +9,17 @@ echo "Root directory:" $dir cd $dir -branch=$(git branch | sed -n -e 's/^\* \(.*\)/\1/p') +branch=$(git branch --show-current) echo "GIT_BRANCH:" $branch +branch_exist_remote=$(git ls-remote --heads origin $branch) + +if [ -z "$branch_exist_remote" ]; then + echo "The current branch does not exist in the remote repository. Please push changes." + exit 1 +fi + cd $dir/build/install/docker/ docker_dir="$( pwd )" @@ -43,11 +50,9 @@ $dir/build/start/stop.backend.docker.sh echo "Remove all backend containers" docker rm -f $(docker ps -a | egrep "onlyoffice" | egrep -v "mysql|rabbitmq|redis|elasticsearch|documentserver" | awk 'NR>0 {print $1}') -echo "Remove all backend images" -docker rmi -f $(docker images -a | egrep "onlyoffice" | egrep -v "mysql|rabbitmq|redis|elasticsearch|documentserver" | awk 'NR>0 {print $3}') echo "Remove all docker images except 'mysql, rabbitmq, redis, elasticsearch, documentserver'" -docker image rm -f $(docker images -a | egrep "onlyoffice" | egrep -v "mysql|rabbitmq|redis|elasticsearch|documentserver" | awk 'NR>0 {print $3}') +docker rmi -f $(docker images -a | egrep "onlyoffice" | egrep -v "mysql|rabbitmq|redis|elasticsearch|documentserver" | awk 'NR>0 {print $3}') echo "Run MySQL" @@ -58,7 +63,7 @@ if [ "${arch_name}" = "x86_64" ]; then docker compose -f db.yml up -d elif [ "${arch_name}" = "arm64" ]; then echo "CPU Type: arm64 -> run db.yml with arm64v8 image" - MYSQL_IMAGE=arm64v8/mysql:oracle \ + MYSQL_IMAGE=arm64v8/mysql:8.0.31-oracle \ docker compose -f db.yml up -d else echo "Error: Unknown CPU Type: ${arch_name}." diff --git a/build/build.docker.bat b/build/build.docker.bat new file mode 100644 index 0000000000..a61fad6658 --- /dev/null +++ b/build/build.docker.bat @@ -0,0 +1,9 @@ +@echo off + +if %errorlevel% == 0 ( + pwsh %~dp0/build.backend.docker.ps1 "start" +) + +echo. + +pause \ No newline at end of file diff --git a/build/clear.backend.docker.ps1 b/build/clear.backend.docker.ps1 new file mode 100644 index 0000000000..b91a84d12d --- /dev/null +++ b/build/clear.backend.docker.ps1 @@ -0,0 +1,21 @@ +$Containers = docker ps -aqf "name=^onlyoffice" +$Images = docker images onlyoffice/docspace* -q + +if ($Containers) { + Write-Host "Stop all backend containers" -ForegroundColor Blue + docker stop $Containers + + Write-Host "Remove all backend containers" -ForegroundColor Blue + docker rm -f $Containers +} + +if ($Images) { + Write-Host "Remove all docker images except 'mysql, rabbitmq, redis, elasticsearch, documentserver'" -ForegroundColor Blue + docker rmi -f $Images +} + +Write-Host "Remove unused volumes." -ForegroundColor Blue +docker volume prune -f + +Write-Host "Remove unused networks." -ForegroundColor Blue +docker network prune -f \ No newline at end of file diff --git a/build/install/docker/.env b/build/install/docker/.env index ca4ea7de82..9fe970c9db 100644 --- a/build/install/docker/.env +++ b/build/install/docker/.env @@ -5,7 +5,7 @@ DOCKER_IMAGE_PREFIX=${STATUS}docspace DOCKER_TAG=latest CONTAINER_PREFIX=${PRODUCT}- - MYSQL_VERSION=8.0.18 + MYSQL_VERSION=8.0.31 MYSQL_IMAGE=mysql:${MYSQL_VERSION} ELK_VERSION=7.13.1 SERVICE_PORT=5050 diff --git a/build/install/docker/Dockerfile.dev b/build/install/docker/Dockerfile.dev index 8d216353e9..a074652602 100644 --- a/build/install/docker/Dockerfile.dev +++ b/build/install/docker/Dockerfile.dev @@ -319,26 +319,7 @@ ARG SRC_PATH ENV BUILD_PATH=${BUILD_PATH} ENV SRC_PATH=${SRC_PATH} WORKDIR ${BUILD_PATH}/services/ASC.Migration.Runner/ -COPY ./docker-migration-entrypoint.sh ./docker-migration-entrypoint.sh +COPY docker-migration-entrypoint.sh docker-migration-entrypoint.sh COPY --from=base ${SRC_PATH}/ASC.Migration.Runner/service/ . ENTRYPOINT ["./docker-migration-entrypoint.sh"] - -## image for k8s bin-share ## -FROM busybox:latest AS bin_share -RUN mkdir -p /app/appserver/ASC.Files/server && \ - mkdir -p /app/appserver/ASC.People/server/ && \ - addgroup --system --gid 107 onlyoffice && \ - adduser -u 104 onlyoffice --home /var/www/onlyoffice --system -G onlyoffice - -COPY bin-share-docker-entrypoint.sh /app/docker-entrypoint.sh -COPY --from=base /var/www/products/ASC.Files/server/ /app/appserver/ASC.Files/server/ -COPY --from=base /var/www/products/ASC.People/server/ /app/appserver/ASC.People/server/ -ENTRYPOINT ["./app/docker-entrypoint.sh"] - -## image for k8s wait-bin-share ## -FROM busybox:latest AS wait_bin_share -RUN mkdir /app - -COPY wait-bin-share-docker-entrypoint.sh /app/docker-entrypoint.sh -ENTRYPOINT ["./app/docker-entrypoint.sh"] diff --git a/build/install/docker/appserver.yml b/build/install/docker/appserver.yml index 966741022a..d4ae122650 100644 --- a/build/install/docker/appserver.yml +++ b/build/install/docker/appserver.yml @@ -1,34 +1,33 @@ version: "3.8" -x-service: - &x-service-base - container_name: base - restart: always - expose: +x-service: &x-service-base + container_name: base + restart: always + expose: - ${SERVICE_PORT} - environment: - MYSQL_HOST: ${MYSQL_HOST} - MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} - MYSQL_DATABASE: ${MYSQL_DATABASE} - MYSQL_USER: ${MYSQL_USER} - MYSQL_PASSWORD: ${MYSQL_PASSWORD} - DATABASE_MIGRATION: ${DATABASE_MIGRATION} - APP_DOTNET_ENV: ${APP_DOTNET_ENV} - APP_CORE_BASE_DOMAIN: ${APP_CORE_BASE_DOMAIN} - APP_CORE_MACHINEKEY: ${APP_CORE_MACHINEKEY} - DOCUMENT_SERVER_JWT_SECRET: ${DOCUMENT_SERVER_JWT_SECRET} - DOCUMENT_SERVER_JWT_HEADER: ${DOCUMENT_SERVER_JWT_HEADER} - DOCUMENT_SERVER_URL_PUBLIC: ${DOCUMENT_SERVER_URL_PUBLIC} - DOCUMENT_SERVER_URL_INTERNAL: ${DOCUMENT_SERVER_URL_INTERNAL} - KAFKA_HOST: ${KAFKA_HOST} - ELK_HOST: ${ELK_HOST} - PROXY_HOST: ${PROXY_HOST} - volumes: + environment: + MYSQL_HOST: ${MYSQL_HOST} + MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} + MYSQL_DATABASE: ${MYSQL_DATABASE} + MYSQL_USER: ${MYSQL_USER} + MYSQL_PASSWORD: ${MYSQL_PASSWORD} + DATABASE_MIGRATION: ${DATABASE_MIGRATION} + APP_DOTNET_ENV: ${APP_DOTNET_ENV} + APP_CORE_BASE_DOMAIN: ${APP_CORE_BASE_DOMAIN} + APP_CORE_MACHINEKEY: ${APP_CORE_MACHINEKEY} + DOCUMENT_SERVER_JWT_SECRET: ${DOCUMENT_SERVER_JWT_SECRET} + DOCUMENT_SERVER_JWT_HEADER: ${DOCUMENT_SERVER_JWT_HEADER} + DOCUMENT_SERVER_URL_PUBLIC: ${DOCUMENT_SERVER_URL_PUBLIC} + DOCUMENT_SERVER_URL_INTERNAL: ${DOCUMENT_SERVER_URL_INTERNAL} + KAFKA_HOST: ${KAFKA_HOST} + ELK_HOST: ${ELK_HOST} + PROXY_HOST: ${PROXY_HOST} + volumes: #- /app/onlyoffice/CommunityServer/data:/app/onlyoffice/data - app_data:/app/onlyoffice/data - files_data:/var/www/products/ASC.Files/server/ - people_data:/var/www/products/ASC.People/server/ - -services: + +services: onlyoffice-elasticsearch: image: docker.elastic.co/elasticsearch/elasticsearch:${ELK_VERSION} container_name: ${ELK_HOST} @@ -58,7 +57,7 @@ services: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-backup:${DOCKER_TAG}" container_name: ${BACKUP_HOST} - + onlyoffice-clear-events: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-clear-events:${DOCKER_TAG}" @@ -78,7 +77,7 @@ services: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-files-services:${DOCKER_TAG}" container_name: ${FILES_SERVICES_HOST} - + onlyoffice-people-server: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-people-server:${DOCKER_TAG}" @@ -89,8 +88,8 @@ services: image: "${REPO}/${DOCKER_IMAGE_PREFIX}-socket:${DOCKER_TAG}" container_name: ${SOCKET_HOST} expose: - - ${SERVICE_PORT} - + - ${SERVICE_PORT} + onlyoffice-studio-notify: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-studio-notify:${DOCKER_TAG}" @@ -106,8 +105,8 @@ services: image: "${REPO}/${DOCKER_IMAGE_PREFIX}-urlshortener:${DOCKER_TAG}" container_name: ${URLSHORTENER_HOST} expose: - - ${SERVICE_PORT} - - "9999" + - ${SERVICE_PORT} + - "9999" onlyoffice-api: <<: *x-service-base @@ -123,19 +122,19 @@ services: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-studio:${DOCKER_TAG}" container_name: ${STUDIO_HOST} - + onlyoffice-ssoauth: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-ssoauth:${DOCKER_TAG}" container_name: ${SSOAUTH_HOST} expose: - - ${SERVICE_PORT} - - "9834" + - ${SERVICE_PORT} + - "9834" onlyoffice-webhooks-service: <<: *x-service-base image: "${REPO}/${DOCKER_IMAGE_PREFIX}-webhooks-service:${DOCKER_TAG}" - container_name: ${WEBHOOKS_SERVICE_HOST} + container_name: ${WEBHOOKS_SERVICE_HOST} onlyoffice-doceditor: image: "${REPO}/${DOCKER_IMAGE_PREFIX}-doceditor:${DOCKER_TAG}" @@ -160,7 +159,7 @@ services: - "8099" - "8092" ports: - - 8092:8092 + - 8092:8092 depends_on: - onlyoffice-backup-background-tasks - onlyoffice-backup @@ -206,8 +205,8 @@ services: networks: default: - external: - name: ${NETWORK_NAME} + name: ${NETWORK_NAME} + external: true volumes: es_data: diff --git a/build/install/docker/build.dev.yml b/build/install/docker/build.dev.yml index 71a6dacae9..8e447d21a9 100644 --- a/build/install/docker/build.dev.yml +++ b/build/install/docker/build.dev.yml @@ -120,20 +120,6 @@ services: target: webhooks-service image: "${REPO}/${DOCKER_IMAGE_PREFIX}-webhooks-service:${DOCKER_TAG}" - onlyoffice-bin-share: - build: - context: ./ - dockerfile: "${DOCKERFILE}" - target: bin_share - image: "${REPO}/${DOCKER_IMAGE_PREFIX}-bin-share:${DOCKER_TAG}" - - onlyoffice-wait-bin-share: - build: - context: ./ - dockerfile: "${DOCKERFILE}" - target: wait_bin_share - image: "${REPO}/${DOCKER_IMAGE_PREFIX}-wait-bin-share:${DOCKER_TAG}" - onlyoffice-proxy: build: context: ./ diff --git a/build/install/docker/docker-migration-entrypoint.sh b/build/install/docker/docker-migration-entrypoint.sh index 3f3fa357b4..9468adcdd8 100755 --- a/build/install/docker/docker-migration-entrypoint.sh +++ b/build/install/docker/docker-migration-entrypoint.sh @@ -1,4 +1,4 @@ -#!/bin/bash +#!/bin/bash MYSQL_HOST=${MYSQL_HOST:-"localhost"} MYSQL_DATABASE=${MYSQL_DATABASE:-"onlyoffice"} @@ -7,4 +7,4 @@ MYSQL_PASSWORD=${MYSQL_PASSWORD:-"onlyoffice_pass"} sed -i "s!\"ConnectionString\".*!\"ConnectionString\": \"Server=${MYSQL_HOST};Database=${MYSQL_DATABASE};User ID=${MYSQL_USER};Password=${MYSQL_PASSWORD}\",!g" ./appsettings.json -dotnet ASC.Migration.Runner.dll +dotnet ASC.Migration.Runner.dll \ No newline at end of file diff --git a/build/install/docker/docspace.dev.yml b/build/install/docker/docspace.dev.yml index ef3d07069f..5333b6c68b 100644 --- a/build/install/docker/docspace.dev.yml +++ b/build/install/docker/docspace.dev.yml @@ -196,8 +196,8 @@ services: networks: default: - external: - name: ${NETWORK_NAME} + name: ${NETWORK_NAME} + external: true volumes: es_data: diff --git a/build/install/docker/migration-runner.yml b/build/install/docker/migration-runner.yml index 4fbf9e0582..a7c6bd0da7 100644 --- a/build/install/docker/migration-runner.yml +++ b/build/install/docker/migration-runner.yml @@ -13,5 +13,5 @@ services: networks: default: - external: - name: ${NETWORK_NAME} + name: ${NETWORK_NAME} + external: true diff --git a/build/install/docker/prepare-nginx-proxy.sh b/build/install/docker/prepare-nginx-proxy.sh index c0a564fa44..42552e56a3 100755 --- a/build/install/docker/prepare-nginx-proxy.sh +++ b/build/install/docker/prepare-nginx-proxy.sh @@ -1,2 +1,3 @@ #!/bin/sh -envsubst '$MAP_HASH_BUCKET_SIZE,$COUNT_WORKER_CONNECTIONS' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf + +envsubst '$MAP_HASH_BUCKET_SIZE,$COUNT_WORKER_CONNECTIONS' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf \ No newline at end of file diff --git a/build/install/docker/rabbitmq.yml b/build/install/docker/rabbitmq.yml index 12ccf0ece5..84fe2929e3 100644 --- a/build/install/docker/rabbitmq.yml +++ b/build/install/docker/rabbitmq.yml @@ -1,6 +1,6 @@ -version: '3' -services: - onlyoffice-rabbitmq: +version: "3" +services: + onlyoffice-rabbitmq: image: rabbitmq:3 container_name: onlyoffice-rabbitmq restart: always @@ -9,5 +9,5 @@ services: - "80" networks: default: - external: - name: ${NETWORK_NAME} + name: ${NETWORK_NAME} + external: true diff --git a/build/install/docker/redis.yml b/build/install/docker/redis.yml index 1e9ea53aed..5e252a36f2 100644 --- a/build/install/docker/redis.yml +++ b/build/install/docker/redis.yml @@ -1,6 +1,6 @@ -version: '3' -services: - onlyoffice-redis: +version: "3" +services: + onlyoffice-redis: image: redis:7 container_name: onlyoffice-redis restart: always @@ -8,5 +8,5 @@ services: - "6379" networks: default: - external: - name: ${NETWORK_NAME} + name: ${NETWORK_NAME} + external: true diff --git a/build/start/restart.backend.docker.ps1 b/build/start/restart.backend.docker.ps1 new file mode 100644 index 0000000000..c42a57a008 --- /dev/null +++ b/build/start/restart.backend.docker.ps1 @@ -0,0 +1,5 @@ +# Stop all backend services" +& "$PSScriptRoot\stop.backend.docker.ps1" + +# Start all backend services" +& "$PSScriptRoot\start.backend.docker.ps1" \ No newline at end of file diff --git a/build/start/start.backend.docker.ps1 b/build/start/start.backend.docker.ps1 new file mode 100644 index 0000000000..72ac855fdb --- /dev/null +++ b/build/start/start.backend.docker.ps1 @@ -0,0 +1,41 @@ +$PSversionMajor = $PSVersionTable.PSVersion | sort-object major | ForEach-Object { $_.major } +$PSversionMinor = $PSVersionTable.PSVersion | sort-object minor | ForEach-Object { $_.minor } + +if ($PSversionMajor -lt 7 -or $PSversionMinor -lt 2) { + Write-Error "Powershell version must be greater than or equal to 7.2." + exit +} + +$Branch = git branch --show-current +$BranchExistRemote = git ls-remote --heads origin $Branch + +if (-not $BranchExistRemote) { + Write-Error "The current branch does not exist in the remote repository. Please push changes." + exit +} + +$RootDir = Split-Path (Split-Path -Parent $PSScriptRoot) -Parent +$DockerDir = ($RootDir + "\build\install\docker") +$BuildDate = Get-Date -Format "yyyy-MM-dd" +$LocalIp = (Get-WmiObject -Class Win32_NetworkAdapterConfiguration | Where-Object { $_.DHCPEnabled -ne $null -and $_.DefaultIPGateway -ne $null }).IPAddress | Select-Object -First 1 + +$Doceditor = ($LocalIp + ":5013") +$Login = ($LocalIp + ":5011") +$Client = ($LocalIp + ":5001") + +$DockerFile = "Dockerfile.dev" +$EnvExtension = "dev" +$CoreBaseDomain = "localhost" + +Write-Host "Start all backend services (containers)" -ForegroundColor Green +$Env:DOCKERFILE = $DockerFile +$Env:ROOT_DIR = $RootDir +$Env:RELEASE_DATE = $BuildDate +$Env:GIT_BRANCH = $Branch +$Env:SERVICE_DOCEDITOR = $Doceditor +$Env:SERVICE_LOGIN = $Login +$Env:SERVICE_CLIENT = $Client +$Env:APP_CORE_BASE_DOMAIN = $CoreBaseDomain +$Env:APP_URL_PORTAL = ("http://" + $LocalIp + ":8092") +$Env:ENV_EXTENSION = $EnvExtension +docker compose -f ($DockerDir + "\docspace.dev.yml") up -d \ No newline at end of file diff --git a/build/start/start.backend.docker.sh b/build/start/start.backend.docker.sh index 4286f52d3f..a3a02b6be7 100755 --- a/build/start/start.backend.docker.sh +++ b/build/start/start.backend.docker.sh @@ -9,10 +9,17 @@ echo "Root directory:" $dir cd $dir -branch=$(git branch | sed -n -e 's/^\* \(.*\)/\1/p') +branch=$(git branch --show-current) echo "GIT_BRANCH:" $branch +branch_exist_remote=$(git ls-remote --heads origin $branch) + +if [ -z "$branch_exist_remote" ]; then + echo "The current branch does not exist in the remote repository. Please push changes." + exit 1 +fi + cd $dir/build/install/docker/ docker_dir="$( pwd )" diff --git a/build/start/stop.backend.docker.ps1 b/build/start/stop.backend.docker.ps1 new file mode 100644 index 0000000000..b62cc6f7ea --- /dev/null +++ b/build/start/stop.backend.docker.ps1 @@ -0,0 +1,17 @@ +$PSversionMajor = $PSVersionTable.PSVersion | sort-object major | ForEach-Object { $_.major } +$PSversionMinor = $PSVersionTable.PSVersion | sort-object minor | ForEach-Object { $_.minor } + +if ($PSversionMajor -lt 7 -or $PSversionMinor -lt 2) { + Write-Error "Powershell version must be greater than or equal to 7.2." + exit +} + +$Containers = docker ps -a -f "name=^onlyoffice" --format="{{.ID}} {{.Names}}" | Select-String -Pattern ("mysql|rabbitmq|redis|elasticsearch|documentserver") -NotMatch | ConvertFrom-String | ForEach-Object P1 + +if (-not $Containers) { + Write-Host "No containers to stop" -ForegroundColor Blue + exit +} + +Write-Host "Stop all backend services (containers)" -ForegroundColor Green +docker stop $Containers \ No newline at end of file diff --git a/common/ASC.Core.Common/EF/Context/BaseDbContext.cs b/common/ASC.Core.Common/EF/Context/BaseDbContext.cs index 27ec6a7331..b31fa7f4c1 100644 --- a/common/ASC.Core.Common/EF/Context/BaseDbContext.cs +++ b/common/ASC.Core.Common/EF/Context/BaseDbContext.cs @@ -59,7 +59,7 @@ public static class BaseDbContextExtension { case Provider.MySql: optionsBuilder.ReplaceService(); - optionsBuilder.UseMySql(connectionString.ConnectionString, ServerVersion.Parse("8.0.25"), providerOptions => + optionsBuilder.UseMySql(connectionString.ConnectionString, ServerVersion.AutoDetect(connectionString.ConnectionString), providerOptions => { if (!string.IsNullOrEmpty(migrateAssembly)) { @@ -87,6 +87,11 @@ public static class BaseDbContextExtension services.AddPooledDbContextFactory(OptionsAction); } + public static void AddBaseDbContext(this IServiceCollection services) where T : DbContext + { + services.AddDbContext(OptionsAction); + } + public static T AddOrUpdate(this TContext b, Expression>> expressionDbSet, T entity) where T : BaseEntity where TContext : DbContext { var dbSet = expressionDbSet.Compile().Invoke(b); diff --git a/config/appsettings.dev.json b/config/appsettings.dev.json new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/config/appsettings.dev.json @@ -0,0 +1 @@ +{} diff --git a/config/appsettings.json b/config/appsettings.json index 2883f8a616..82726f1367 100644 --- a/config/appsettings.json +++ b/config/appsettings.json @@ -37,7 +37,7 @@ "intervalCheckRegisterInstanceInSeconds": "1", "timeUntilUnregisterInSeconds": "15" }, - "themelimit": "10", + "themelimit": "9", "oidc": { "authority" : "" } @@ -250,4 +250,4 @@ "logStreamName": "${hostname} - ${applicationContext} - ${date} - ${guid}" } } -} \ No newline at end of file +} diff --git a/packages/client/package.json b/packages/client/package.json index 6495afb7cd..a7c98f95f6 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -44,6 +44,7 @@ "element-resize-detector": "^1.2.4", "file-saver": "^2.0.5", "firebase": "^8.10.0", + "hex-to-rgba": "^2.0.1", "react-avatar-editor": "^13.0.0", "react-colorful": "^5.5.1", "react-hotkeys-hook": "^3.4.4", diff --git a/packages/client/public/locales/en/Settings.json b/packages/client/public/locales/en/Settings.json index 71d7878f1f..ac03c6c88d 100644 --- a/packages/client/public/locales/en/Settings.json +++ b/packages/client/public/locales/en/Settings.json @@ -1,4 +1,5 @@ { + "Accent": "Accent", "AccessRightsAccessToProduct": "Access to {{product}} module is given to", "AccessRightsAllUsers": "All {{users}}", "AccessRightsChangeOwnerConfirmText": "Changes will be applied after the confirmation via email.", @@ -50,6 +51,7 @@ "BrowserNoCanvasSupport": "Your browser does not support the HTML5 canvas tag.", "BreakpointWarningText": "This section is only available in desktop version", "BreakpointWarningTextPrompt": "Please use the desktop site to access <1>{{content}}", + "Buttons": "Buttons", "ByApp": "By authenticator app", "BySms": "By sms", "ChangeLogoButton": "Change Logo", @@ -62,6 +64,7 @@ "CompanyInfoSettingsDescription": "This information will be displayed in the <1>{{link}} window.", "ConfirmEmailSended": "Confirmation e-mail has been sent to {{ownerName}}", "PortalDeletionEmailSended": "A link to confirm the operation has been sent to {{ownerEmail}} (the email address of the portal owner).", + "Custom": "Custom", "CustomDomains": "Custom domains", "CustomTitles": "Custom titles", "CustomTitlesFrom": "From", @@ -78,6 +81,9 @@ "DeleteDataHeader": "Portal deactivation/deletion", "DeleteDocSpace": "Delete DocSpace", "DeleteDocSpaceInfo": "Before you delete the portal, please make sure that automatic billing is turned off. You may check the status of automatic billing in <1>on your Stripe customer portal.", + "DeleteTheme": "Delete theme", + "DeleteThemeForever": "Delete theme forever?", + "DeleteThemeNotice": "The theme will be deleted permanently. You will not be able to undo this action.", "Disabled": "Disabled", "DNSSettings": "DNS Settings", "DNSSettingsDescription": "DNS Settings is a way to set an alternative URL for your portal.", @@ -87,6 +93,8 @@ "DocumentsAdministratorsCan": "Documents administrators can link Dropbox, Box, and other accounts to Common Documents and set up access rights in this section", "DownloadCopy": "Download the copy", "DownloadReportBtn": "Download and open report", + "EditColorScheme": "Edit color scheme", + "EditCurrentTheme": "Edit current theme", "Employees": "users", "EmptyBackupList": "No backups have been created yet. Create one or more backups for them to appear in this list.", "EnableAutomaticBackup": "Enable automatic backup.", @@ -114,6 +122,7 @@ "LanguageTimeSettingsTooltip": "<0>{{text}} is a way to change the language of the whole portal for all portal users and to configure the time zone so that all the events of the {{ organizationName }} portal will be shown with the correct date and time.", "LanguageTimeSettingsTooltipDescription": "To make the parameters you set take effect click the <1>{{save}} button at the bottom of the section.<3>{{learnMore}}", "Lifetime": "Lifetime (min)", + "LimitThemesTooltip": "You can only create 3 custom themes. To create a new one, you must delete one of the previous themes.", "LocalFile": "Local file", "LoginDownloadText": "You can download the report for the data available during the selected storage period to view the detailed statistics.", "LoginHistoryTitle": "Login History", @@ -137,6 +146,7 @@ "ManualBackupHelpNote": "Select the storage for the data (do not forget to enter your third-party storage details to be able to access it).
Note: you need to connect your third-party account (DropBox, Box.com, OneDrive or Google Drive) to {{organizationName}} Common folder before you will be able to save your backup there.", "MaxCopies": "{{copiesCount}} - maximum number of backup copies", "Migration": "Migration", + "NewColorScheme": "New color scheme", "NoAdmins": "No admins here yet", "NoAdminsDescription": "You can add new administrator manually", "NotFoundDescription": "Change filter settings or add people to the section.", diff --git a/packages/client/src/components/Article/MainButton/index.js b/packages/client/src/components/Article/MainButton/index.js index b8a3d9237d..3271df5802 100644 --- a/packages/client/src/components/Article/MainButton/index.js +++ b/packages/client/src/components/Article/MainButton/index.js @@ -28,24 +28,30 @@ const StyledButton = styled(Button)` opacity: 1; background-color: ${({ currentColorScheme }) => - currentColorScheme.accentColor}; + currentColorScheme.main.accent} !important; + background: ${({ currentColorScheme }) => currentColorScheme.main.accent}; + border: ${({ currentColorScheme }) => currentColorScheme.main.accent}; :hover { background-color: ${({ currentColorScheme }) => - currentColorScheme.accentColor}; + currentColorScheme.main.accent}; opacity: 0.85; + background: ${({ currentColorScheme }) => currentColorScheme.main.accent}; + border: ${({ currentColorScheme }) => currentColorScheme.main.accent}; } :active { background-color: ${({ currentColorScheme }) => - currentColorScheme.accentColor}; - + currentColorScheme.main.accent}; + background: ${({ currentColorScheme }) => currentColorScheme.main.accent}; + border: ${({ currentColorScheme }) => currentColorScheme.main.accent}; opacity: 1; filter: brightness(90%); cursor: pointer; } .button-content { + color: ${({ currentColorScheme }) => currentColorScheme.text.accent}; position: relative; display: flex; justify-content: space-between; diff --git a/packages/client/src/components/IndicatorLoader/StyledWrapper.js b/packages/client/src/components/IndicatorLoader/StyledWrapper.js index c731dfddcb..caaee446d9 100644 --- a/packages/client/src/components/IndicatorLoader/StyledWrapper.js +++ b/packages/client/src/components/IndicatorLoader/StyledWrapper.js @@ -9,7 +9,6 @@ const StyledWrapper = styled.div` left: -6px; width: 0%; height: 3px; - background-color: #eb835f; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; diff --git a/packages/client/src/components/dialogs/ChangePasswordDialog/index.js b/packages/client/src/components/dialogs/ChangePasswordDialog/index.js index 60b7080e1b..f4cfeb3c38 100644 --- a/packages/client/src/components/dialogs/ChangePasswordDialog/index.js +++ b/packages/client/src/components/dialogs/ChangePasswordDialog/index.js @@ -57,7 +57,14 @@ class ChangePasswordDialogComponent extends React.Component { render() { // console.log("ChangePasswordDialog render"); - const { t, tReady, visible, email, onClose, theme } = this.props; + const { + t, + tReady, + visible, + email, + onClose, + currentColorScheme, + } = this.props; const { isRequestRunning } = this.state; return ( @@ -80,7 +87,7 @@ class ChangePasswordDialogComponent extends React.Component { type="page" href={`mailto:${email}`} noHover - color={theme.peopleDialogs.changePassword.linkColor} + color={currentColorScheme.main.accent} title={email} > {{ email }} @@ -114,7 +121,7 @@ class ChangePasswordDialogComponent extends React.Component { } const ChangePasswordDialog = inject(({ auth }) => ({ - theme: auth.settingsStore.theme, + currentColorScheme: auth.settingsStore.currentColorScheme, }))( observer( withTranslation(["ChangePasswordDialog", "Common"])( diff --git a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js index 4f5700c9a5..70fdfcc833 100644 --- a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js +++ b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js @@ -142,53 +142,11 @@ const StyledSelectedOwnerContainer = styled.div` StyledSelectedOwnerContainer.defaultProps = { theme: Base }; -const StyledSelectedOwner = styled.div` - width: fit-content; - height: 28px; - - display: flex; - flex-direction: row; - align-items: center; - padding: 4px 15px; - gap: 8px; - - box-sizing: border-box; - - background: ${(props) => - props.theme.filterInput.filter.selectedItem.background}; - - border-radius: 16px; - - .text { - color: ${(props) => props.theme.filterInput.filter.selectedItem.color}; - - font-weight: 600; - font-size: 13px; - line-height: 20px; - } - - .cross-icon { - display: flex; - align-items: center; - - svg { - cursor: pointer; - - path { - fill: ${(props) => props.theme.filterInput.filter.selectedItem.color}; - } - } - } -`; - -StyledSelectedOwner.defaultProps = { theme: Base }; - export { StyledOwnerInfo, StyledPeopleSelectorInfo, StyledPeopleSelector, StyledAvailableList, StyledFooterWrapper, - StyledSelectedOwner, StyledSelectedOwnerContainer, }; diff --git a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js index 01dc3ff69f..2ca9eca825 100644 --- a/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js +++ b/packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js @@ -6,7 +6,8 @@ import { withTranslation } from "react-i18next"; import PeopleSelector from "SRC_DIR/components/PeopleSelector"; import Filter from "@docspace/common/api/people/filter"; - +import styled from "styled-components"; +import { Base } from "@docspace/components/themes"; import ModalDialog from "@docspace/components/modal-dialog"; import Avatar from "@docspace/components/avatar"; import Text from "@docspace/components/text"; @@ -21,10 +22,49 @@ import { StyledPeopleSelector, StyledAvailableList, StyledFooterWrapper, - StyledSelectedOwner, StyledSelectedOwnerContainer, } from "./StyledDialog"; +const StyledSelectedOwner = styled.div` + width: fit-content; + height: 28px; + + display: flex; + flex-direction: row; + align-items: center; + padding: 4px 15px; + gap: 8px; + + box-sizing: border-box; + + background: ${({ currentColorScheme }) => currentColorScheme.main.accent}; + + border-radius: 16px; + + .text { + color: ${({ currentColorScheme }) => currentColorScheme.text.accent}; + + font-weight: 600; + font-size: 13px; + line-height: 20px; + } + + .cross-icon { + display: flex; + align-items: center; + + svg { + cursor: pointer; + + path { + fill: ${({ currentColorScheme }) => currentColorScheme.text.accent}; + } + } + } +`; + +StyledSelectedOwner.defaultProps = { theme: Base }; + const filter = new Filter(); filter.employeeStatus = 1; @@ -39,6 +79,7 @@ const ChangePortalOwnerDialog = ({ displayName, avatar, id, + currentColorScheme, }) => { const [selectorVisible, setSelectorVisible] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); @@ -144,7 +185,7 @@ const ChangePortalOwnerDialog = ({ {selectedUser ? ( - + {selectedUser.label} { const { displayName, avatar, id } = auth.userStore.user; - + const { currentColorScheme } = auth.settingsStore; const { sendOwnerChange } = setup; - return { displayName, avatar, id, sendOwnerChange }; + return { displayName, avatar, id, sendOwnerChange, currentColorScheme }; })( withTranslation([ "ChangePortalOwner", diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index ba988982c1..ddf4f8b4a1 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -102,9 +102,9 @@ const StyledComboBox = styled(ComboBox)` } .combo-buttons_arrow-icon { - margin-top: 12px; + margin-top: 6px; margin-right: 8px; - margin-left: 0px; + margin-left: 2px; } padding: 0px; diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index 0d9b8436d6..2be3f6c0d1 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js @@ -310,6 +310,7 @@ class SectionHeaderContent extends React.Component { backgroundColor="#EDC409" label="Paid" className="settings-section_badge" + isPaidBadge={true} /> ) : ( "" diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js index 954cda6a4f..a90644879f 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js @@ -14,7 +14,7 @@ const StyledComponent = styled.div` padding-bottom: 20px; } - .theme-standard { + .theme-standard-container { padding-top: 21px; } @@ -29,16 +29,18 @@ const StyledComponent = styled.div` display: flex; } - .box { + .custom-themes { + display: flex; + } + + .theme-add { width: 46px; height: 46px; margin-right: 12px; border-radius: 8px; cursor: pointer; - } - - .check-img { - padding: 18px 0 0 15px; + background: ${(props) => (props.theme.isBase ? "#eceef1" : "#474747")} + url("/static/images/plus.theme.svg") no-repeat center; } .add-theme { @@ -51,6 +53,39 @@ const StyledComponent = styled.div` .buttons-container { padding-top: 24px; } + + .button:not(:last-child) { + margin-right: 8px; + } + + .check-img { + padding: 18px 0 0 15px; + svg path { + fill: ${(props) => props.colorCheckImg}; + } + } `; -export { StyledComponent }; +const StyledTheme = styled.div` + width: 46px; + height: 46px; + margin-right: 12px; + border-radius: 8px; + cursor: pointer; + + .check-hover { + visibility: hidden; + } + + &:hover { + .check-hover { + padding: 18px 0 0 15px; + visibility: visible; + opacity: 0.5; + svg path { + fill: ${(props) => props.colorCheckImgHover}; + } + } + } +`; +export { StyledComponent, StyledTheme }; diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js index 83956e9e17..0320de6127 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js @@ -227,14 +227,14 @@ const StyledComponent = styled.div` } .tablet-tile-name { - width: 33% !important; + width: 44% !important; margin-left: 16px; border-right: none !important; border-radius: 12px 0 16px 0 !important; } - .half { - width: ${(props) => props.isViewTablet && "51%"}; + .only-tile-name { + width: ${(props) => props.isViewTablet && "66%"}; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; @@ -314,7 +314,7 @@ const IconBox = styled.div` svg { path { - fill: ${(props) => (props.themePreview === "Light" ? "#FFF" : "#292929")}; + fill: ${(props) => props.colorCheckImg}; } } `; diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js index 03e78b570e..badc76a4bd 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js @@ -12,15 +12,16 @@ import ButtonPlusIcon from "../../../../../../../../public/images/actions.button const Preview = (props) => { const { - selectAccentColor, + previewAccent, themePreview, selectThemeId, withBorder, withTileActions, floatingButtonClass, + colorCheckImg, } = props; - const [colorPreview, setColorPreview] = useState(selectAccentColor); + const [colorPreview, setColorPreview] = useState(previewAccent); const [isViewTablet, setIsViewTablet] = useState(false); const onCheckView = () => { @@ -30,8 +31,8 @@ const Preview = (props) => { }; useEffect(() => { - setColorPreview(selectAccentColor); - }, [selectAccentColor]); + setColorPreview(previewAccent); + }, [previewAccent]); useEffect(() => { onCheckView(); @@ -335,7 +336,7 @@ const Preview = (props) => {
-
+
{
{isViewTablet && ( -
+
{ colorPreview={colorPreview} themePreview={themePreview} selectThemeId={selectThemeId} + colorCheckImg={colorCheckImg} > diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js index 0d79c7ff2e..f2ac6fbcdd 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js @@ -160,7 +160,9 @@ const WhiteLabel = (props) => { {t("WhiteLabel")} - {!isSettingPaid && } + {!isSettingPaid && ( + + )}
{t("WhiteLabelSubtitle")} diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js index 200ddfd6aa..ffc21f93bc 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js @@ -130,7 +130,9 @@ const DNSSettings = (props) => { tooltipContent={tooltipDNSSettingsTooltip} className="dns-setting_helpbutton " /> - {!isSettingPaid && } + {!isSettingPaid && ( + + )}
)} {(isMobileOnly && isSmallTablet()) || isSmallTablet() ? ( diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js index 92162e59e3..9d1d6363cd 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js +++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js @@ -414,6 +414,7 @@ class LanguageAndTimeZone extends React.Component { isLoadedPage, helpLink, organizationName, + currentColorScheme, } = this.props; const { @@ -434,6 +435,7 @@ class LanguageAndTimeZone extends React.Component { t={t} helpLink={helpLink} organizationName={organizationName} + currentColorScheme={currentColorScheme} /> ); @@ -533,6 +535,7 @@ export default inject(({ auth, setup, common }) => { getCurrentCustomSchema, cultures, helpLink, + currentColorScheme, } = auth.settingsStore; const { user } = auth.userStore; @@ -563,6 +566,7 @@ export default inject(({ auth, setup, common }) => { helpLink, initSettings, setIsLoaded, + currentColorScheme, }; })( withLoading( diff --git a/packages/client/src/pages/PortalSettings/categories/common/appearance.js b/packages/client/src/pages/PortalSettings/categories/common/appearance.js index f6bf75b8fc..250fd96c4a 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/appearance.js +++ b/packages/client/src/pages/PortalSettings/categories/common/appearance.js @@ -4,7 +4,8 @@ import { withRouter } from "react-router"; import toastr from "@docspace/components/toast/toastr"; import { inject, observer } from "mobx-react"; import Button from "@docspace/components/button"; - +import Tooltip from "@docspace/components/tooltip"; +import Text from "@docspace/components/text"; import TabContainer from "@docspace/components/tabs-container"; import Preview from "./Appearance/preview"; @@ -18,9 +19,11 @@ import { isMobileOnly } from "react-device-detect"; import Loader from "./sub-components/loaderAppearance"; -import { StyledComponent } from "./Appearance/StyledApperance.js"; - +import { StyledComponent, StyledTheme } from "./Appearance/StyledApperance.js"; +import { ReactSVG } from "react-svg"; import BreakpointWarning from "../../../../components/BreakpointWarning/index"; +import ModalDialogDelete from "./sub-components/modalDialogDelete"; +import hexToRgba from "hex-to-rgba"; const Appearance = (props) => { const { @@ -29,16 +32,23 @@ const Appearance = (props) => { sendAppearanceTheme, getAppearanceTheme, currentColorScheme, + deleteAppearanceTheme, tReady, t, } = props; - const [previewTheme, setPreviewTheme] = useState("Light theme"); + const defaultAppliedColor = "#AABBCC"; + + const headerAddTheme = t("Settings:NewColorScheme"); + const headerEditTheme = t("Settings:EditColorScheme"); + + const checkImg = "static/images/check.white.svg"; + const checkImgHover = ; const [showColorSchemeDialog, setShowColorSchemeDialog] = useState(false); const [headerColorSchemeDialog, setHeaderColorSchemeDialog] = useState( - "Edit color scheme" + headerEditTheme ); const [currentColorAccent, setCurrentColorAccent] = useState(null); @@ -51,9 +61,12 @@ const Appearance = (props) => { false ); - //TODO: Add default color - const [appliedColorAccent, setAppliedColorAccent] = useState("#F97A0B"); - const [appliedColorButtons, setAppliedColorButtons] = useState("#FF9933"); + const [appliedColorAccent, setAppliedColorAccent] = useState( + defaultAppliedColor + ); + const [appliedColorButtons, setAppliedColorButtons] = useState( + defaultAppliedColor + ); const [changeCurrentColorAccent, setChangeCurrentColorAccent] = useState( false @@ -65,23 +78,34 @@ const Appearance = (props) => { const [viewMobile, setViewMobile] = useState(false); const [showSaveButtonDialog, setShowSaveButtonDialog] = useState(false); - const [ - showRestoreToDefaultButtonDialog, - setShowRestoreToDefaultButtonDialog, - ] = useState(false); const [isEditDialog, setIsEditDialog] = useState(false); const [isAddThemeDialog, setIsAddThemeDialog] = useState(false); - const [selectAccentColor, setSelectAccentColor] = useState( - currentColorScheme.accentColor + const [previewAccent, setPreviewAccent] = useState( + currentColorScheme.main.accent ); - const [selectThemeId, setSelectThemeId] = useState(selectedThemeId); - const [changeColorTheme, setChangeColorTheme] = useState(false); - const checkImg = ( - + const [colorCheckImg, setColorCheckImg] = useState( + currentColorScheme.text.accent ); + const [colorCheckImgHover, setColorCheckImgHover] = useState( + currentColorScheme.text.accent + ); + + const [selectThemeId, setSelectThemeId] = useState(selectedThemeId); + + const [isDisabledSaveButton, setIsDisabledSaveButton] = useState(true); + + const [abilityAddTheme, setAbilityAddTheme] = useState(true); + + const [isDisabledEditButton, setIsDisabledEditButton] = useState(true); + const [isDisabledDeleteButton, setIsDisabledDeleteButton] = useState(true); + const [isShowDeleteButton, setIsShowDeleteButton] = useState(false); + + const [visibleDialog, setVisibleDialog] = useState(false); + + const [theme, setTheme] = useState(appearanceTheme); const array_items = useMemo( () => [ @@ -90,9 +114,9 @@ const Appearance = (props) => { title: t("Profile:LightTheme"), content: ( ), @@ -102,30 +126,78 @@ const Appearance = (props) => { title: t("Profile:DarkTheme"), content: ( ), }, ], - [selectAccentColor, previewTheme, selectThemeId, tReady] + [previewAccent, selectThemeId, colorCheckImg, tReady] ); useEffect(() => { onCheckView(); window.addEventListener("resize", onCheckView); - return () => window.removeEventListener("resize", onCheckView); + return () => { + window.removeEventListener("resize", onCheckView); + }; }, []); useEffect(() => { - // Set the Save button to disabled - if (selectAccentColor !== currentColorScheme.accentColor) { - setChangeColorTheme(true); + onColorCheck(appearanceTheme); + + // Setting a checkbox for a new theme + setTheme(appearanceTheme); + if (appearanceTheme.length > theme.length) { + const newTheme = appearanceTheme[appearanceTheme.length - 1]; + const idNewTheme = newTheme.id; + const accentNewTheme = newTheme.main.accent; + + setSelectThemeId(idNewTheme); + setPreviewAccent(accentNewTheme); + } + + if (appearanceTheme.length === 9) { + setAbilityAddTheme(false); } else { - setChangeColorTheme(false); + setAbilityAddTheme(true); + } + + if (appearanceTheme.length === 6) { + setIsShowDeleteButton(false); + } else { + setIsShowDeleteButton(true); + } + }, [ + appearanceTheme, + theme, + setSelectThemeId, + setPreviewAccent, + setAbilityAddTheme, + setIsShowDeleteButton, + ]); + + useEffect(() => { + onColorCheck(appearanceTheme); + + if (appearanceTheme.find((theme) => theme.id == selectThemeId).name) { + setIsDisabledEditButton(true); + setIsDisabledDeleteButton(true); + return; + } + + setIsDisabledEditButton(false); + setIsDisabledDeleteButton(false); + }, [selectThemeId]); + + useEffect(() => { + if (selectThemeId === selectedThemeId) { + setIsDisabledSaveButton(true); + } else { + setIsDisabledSaveButton(false); } if ( @@ -142,14 +214,47 @@ const Appearance = (props) => { ) { setShowSaveButtonDialog(true); } + + if ( + !changeCurrentColorAccent && + !changeCurrentColorButtons && + isEditDialog + ) { + setShowSaveButtonDialog(false); + } }, [ + selectedThemeId, + selectThemeId, changeCurrentColorAccent, changeCurrentColorButtons, isAddThemeDialog, isEditDialog, - selectAccentColor, + previewAccent, ]); + const onColorCheck = useCallback( + (themes) => { + const colorCheckImg = themes.find((theme) => theme.id == selectThemeId) + ?.text.accent; + + setColorCheckImg(colorCheckImg); + }, + [selectThemeId] + ); + + const onColorCheckImgHover = useCallback( + (e) => { + const id = e.target.id; + if (!id) return; + + const colorCheckImg = appearanceTheme.find((theme) => theme.id == id).text + .accent; + + setColorCheckImgHover(colorCheckImg); + }, + [appearanceTheme] + ); + const onCheckView = () => { if (isMobileOnly || window.innerWidth < 600) { setViewMobile(true); @@ -158,47 +263,78 @@ const Appearance = (props) => { } }; - const onColorSelection = (item) => { - setSelectAccentColor(item.accentColor); - setSelectThemeId(item.id); + const onColorSelection = useCallback( + (e) => { + const theme = e.currentTarget; + const id = +theme.id; + const accent = appearanceTheme.find((theme) => theme.id == id).main + .accent; + + setPreviewAccent(accent); + setSelectThemeId(id); + }, + [appearanceTheme, setPreviewAccent, setSelectThemeId] + ); + + const onSave = useCallback(async () => { + setIsDisabledSaveButton(true); + + if (!selectThemeId) return; + + try { + await sendAppearanceTheme({ selected: selectThemeId }); + await getAppearanceTheme(); + + toastr.success(t("Settings:SuccessfullySaveSettingsMessage")); + } catch (error) { + toastr.error(error); + } + }, [ + selectThemeId, + setIsDisabledSaveButton, + sendAppearanceTheme, + getAppearanceTheme, + ]); + + // Open HexColorPicker + const onClickColor = (e) => { + if (e.target.id === "accent") { + setOpenHexColorPickerAccent(true); + setOpenHexColorPickerButtons(false); + } else { + setOpenHexColorPickerButtons(true); + setOpenHexColorPickerAccent(false); + } }; - const onShowCheck = (colorNumber) => { - return selectThemeId && selectThemeId === colorNumber && checkImg; - }; + const onClickDeleteModal = useCallback(async () => { + try { + await deleteAppearanceTheme(selectThemeId); + await getAppearanceTheme(); - const onChangePreviewTheme = (e) => { - setPreviewTheme(e.title); - }; - - const onSaveSelectedColor = () => { - sendAppearanceTheme({ selected: selectThemeId }) - .then(() => { - toastr.success(t("Settings:SuccessfullySaveSettingsMessage")); - getAppearanceTheme(); - setChangeColorTheme(false); - }) - .catch((error) => { - toastr.error(error); - }); - }; - - const onClickEdit = () => { - appearanceTheme.map((item) => { - if (item.id === selectThemeId) { - setCurrentColorAccent(item.accentColor); - setCurrentColorButtons(item.buttonsMain); + if (selectedThemeId !== selectThemeId) { + setSelectThemeId(selectedThemeId); + setPreviewAccent(currentColorScheme.main.accent); } - }); - setIsEditDialog(true); + if (selectedThemeId === selectThemeId) { + setSelectThemeId(appearanceTheme[0].id); + setPreviewAccent(appearanceTheme[0].main.accent); + } - setHeaderColorSchemeDialog("Edit color scheme"); + onCloseDialogDelete(); - setShowRestoreToDefaultButtonDialog(true); - - setShowColorSchemeDialog(true); - }; + toastr.success(t("Settings:SuccessfullySaveSettingsMessage")); + } catch (error) { + toastr.error(error); + } + }, [ + selectThemeId, + selectedThemeId, + onCloseDialogDelete, + deleteAppearanceTheme, + getAppearanceTheme, + ]); const onCloseColorSchemeDialog = () => { setShowColorSchemeDialog(false); @@ -213,88 +349,204 @@ const Appearance = (props) => { setIsAddThemeDialog(false); setShowSaveButtonDialog(false); + + setCurrentColorAccent(null); + setCurrentColorButtons(null); + + setAppliedColorAccent(defaultAppliedColor); + setAppliedColorButtons(defaultAppliedColor); }; const onAddTheme = () => { + if (!abilityAddTheme) return; setIsAddThemeDialog(true); - setCurrentColorAccent( - "url(/static/images/plus.theme.svg) 15px 15px no-repeat #D0D5DA" - ); - setCurrentColorButtons( - "url(/static/images/plus.theme.svg) 15px 15px no-repeat #D0D5DA" - ); - setHeaderColorSchemeDialog("New color scheme"); + setHeaderColorSchemeDialog(headerAddTheme); setShowColorSchemeDialog(true); }; - const onClickColor = (e) => { - if (e.target.id === "accent") { - setOpenHexColorPickerAccent(true); - setOpenHexColorPickerButtons(false); - } else { - setOpenHexColorPickerButtons(true); - setOpenHexColorPickerAccent(false); - } + const onClickEdit = () => { + appearanceTheme.map((item) => { + if (item.id === selectThemeId) { + setCurrentColorAccent(item.main.accent.toUpperCase()); + setCurrentColorButtons(item.main.buttons.toUpperCase()); + + setAppliedColorAccent(item.main.accent.toUpperCase()); + setAppliedColorButtons(item.main.buttons.toUpperCase()); + } + }); + + setIsEditDialog(true); + + setHeaderColorSchemeDialog(headerEditTheme); + + setShowColorSchemeDialog(true); }; - const onCloseHexColorPicker = () => { + const onCloseHexColorPickerAccent = useCallback(() => { setOpenHexColorPickerAccent(false); + if (!currentColorAccent) return; + setAppliedColorAccent(currentColorAccent); + }, [currentColorAccent, setOpenHexColorPickerAccent, setAppliedColorAccent]); + + const onCloseHexColorPickerButtons = useCallback(() => { setOpenHexColorPickerButtons(false); + if (!currentColorButtons) return; + setAppliedColorButtons(currentColorButtons); + }, [ + currentColorButtons, + setOpenHexColorPickerButtons, + setAppliedColorButtons, + ]); + + const getTextColor = (color) => { + const black = "#333333"; + const white = "#FFFFFF"; + + const rgba = hexToRgba(color) + .replace("rgba(", "") + .replace(")", "") + .split(", "); + + const r = rgba[0]; + const g = rgba[1]; + const b = rgba[2]; + + const textColor = + (r * 299 + g * 587 + b * 114) / 1000 > 128 ? black : white; + + return textColor; }; const onAppliedColorAccent = useCallback(() => { + if (appliedColorAccent.toUpperCase() !== currentColorAccent) { + setChangeCurrentColorAccent(true); + } + setCurrentColorAccent(appliedColorAccent); - onCloseHexColorPicker(); - - if (appliedColorAccent === currentColorAccent) return; - - setChangeCurrentColorAccent(true); - }, [appliedColorAccent, currentColorAccent]); + setOpenHexColorPickerAccent(false); + }, [ + appliedColorAccent, + currentColorAccent, + setChangeCurrentColorAccent, + setOpenHexColorPickerAccent, + ]); const onAppliedColorButtons = useCallback(() => { + if (appliedColorButtons.toUpperCase() !== currentColorButtons) { + setChangeCurrentColorButtons(true); + } + setCurrentColorButtons(appliedColorButtons); - onCloseHexColorPicker(); + setOpenHexColorPickerButtons(false); + }, [ + appliedColorButtons, + currentColorButtons, + setChangeCurrentColorButtons, + setOpenHexColorPickerButtons, + ]); - if (appliedColorButtons === currentColorButtons) return; + const onSaveNewThemes = useCallback( + async (theme) => { + try { + await sendAppearanceTheme({ theme: theme }); + await getAppearanceTheme(); - setChangeCurrentColorButtons(true); - }, [appliedColorButtons]); + toastr.success(t("Settings:SuccessfullySaveSettingsMessage")); + } catch (error) { + toastr.error(error); + } + }, + [sendAppearanceTheme, getAppearanceTheme] + ); + + const onSaveChangedThemes = useCallback( + async (editTheme) => { + try { + await sendAppearanceTheme({ theme: editTheme }); + await getAppearanceTheme(); + setPreviewAccent(editTheme.main.accent); + + toastr.success(t("Settings:SuccessfullySaveSettingsMessage")); + } catch (error) { + toastr.error(error); + } + }, + [sendAppearanceTheme, getAppearanceTheme] + ); const onSaveColorSchemeDialog = () => { - const theme = { - id: selectTheme.id, - accentColor: currentColorAccent, - buttonsMain: currentColorButtons, - textColor: "#FFFFFF", + const textColorAccent = getTextColor(currentColorAccent); + const textColorButtons = getTextColor(currentColorButtons); + + if (isAddThemeDialog) { + // Saving a new custom theme + const theme = { + main: { + accent: currentColorAccent, + buttons: currentColorButtons, + }, + text: { + accent: textColorAccent, + buttons: textColorButtons, + }, + }; + + onSaveNewThemes(theme); + + setCurrentColorAccent(null); + setCurrentColorButtons(null); + + onCloseColorSchemeDialog(); + + return; + } + + // Editing themes + const editTheme = { + id: selectThemeId, + main: { + accent: currentColorAccent, + buttons: currentColorButtons, + }, + text: { + accent: textColorAccent, + buttons: textColorButtons, + }, }; + + onSaveChangedThemes(editTheme); + + setCurrentColorAccent(appliedColorAccent); + setCurrentColorButtons(appliedColorButtons); + + onCloseColorSchemeDialog(); }; - const nodeHexColorPickerButtons = viewMobile ? ( - - ) : ( + const onCloseDialogDelete = () => { + setVisibleDialog(false); + }; + + const onOpenDialogDelete = () => { + setVisibleDialog(true); + }; + + const nodeHexColorPickerButtons = ( { ); - const nodeHexColorPickerAccent = viewMobile ? ( - - ) : ( + const nodeHexColorPickerAccent = ( { ); - const nodeAccentColor = ( -
- ); - - const nodeButtonsColor = ( -
- ); + const textTooltip = () => { + return ( + + {t("Settings:LimitThemesTooltip")} + + ); + }; return viewMobile ? ( ) : !tReady ? ( ) : ( - -
{t("Common:Color")}
- -
-
{t("Common:Standard")}
- -
- {appearanceTheme.map((item, index) => { - return ( -
onColorSelection(item)} - > - {onShowCheck(item.id)} -
- ); - })} -
-
- - + -
{t("Common:Preview")}
- -
-
+ + ); }; @@ -421,6 +731,8 @@ export default inject(({ auth }) => { sendAppearanceTheme, getAppearanceTheme, currentColorScheme, + deleteAppearanceTheme, + theme, } = settingsStore; return { @@ -429,6 +741,8 @@ export default inject(({ auth }) => { sendAppearanceTheme, getAppearanceTheme, currentColorScheme, + deleteAppearanceTheme, + theme, }; })( withTranslation(["Profile", "Common", "Settings"])( diff --git a/packages/client/src/pages/PortalSettings/categories/common/customization-navbar.js b/packages/client/src/pages/PortalSettings/categories/common/customization-navbar.js index 7a73f8ea02..ff46453992 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/customization-navbar.js +++ b/packages/client/src/pages/PortalSettings/categories/common/customization-navbar.js @@ -68,6 +68,7 @@ const CustomizationNavbar = ({ setIsLoadedCustomizationNavbar, isLoadedPage, isSettingPaid, + currentColorScheme, }) => { const isLoadedSetting = isLoaded && tReady; useEffect(() => { @@ -104,7 +105,7 @@ const CustomizationNavbar = ({ {t("DNSSettings")} - {!isSettingPaid && } + {!isSettingPaid && ( + + )}
@@ -156,7 +163,7 @@ const CustomizationNavbar = ({ { - const { helpUrlCommonSettings, theme } = auth.settingsStore; + const { + helpUrlCommonSettings, + theme, + currentColorScheme, + } = auth.settingsStore; const { isLoaded, setIsLoadedCustomizationNavbar } = common; return { theme, helpUrlCommonSettings, isLoaded, setIsLoadedCustomizationNavbar, + currentColorScheme, }; })( withRouter( diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js index ec3840c9f1..f351fb8181 100644 --- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js +++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js @@ -1,7 +1,8 @@ -import React from "react"; +import React, { useEffect } from "react"; import ModalDialog from "@docspace/components/modal-dialog"; import styled from "styled-components"; import Button from "@docspace/components/button"; +import { withTranslation } from "react-i18next"; const StyledComponent = styled(ModalDialog)` .modal-dialog-aside-footer { @@ -21,20 +22,40 @@ const StyledComponent = styled(ModalDialog)` } } - .text { + .name-color { font-weight: 700; font-size: 18px; line-height: 24px; } - .color-button { - width: 46px; - height: 46px; - } - .relative { position: relative; } + + .accent-box { + background: ${(props) => + props.currentColorAccent + ? props.currentColorAccent + : props.theme.isBase + ? `#eceef1 url("/static/images/plus.theme.svg") no-repeat center` + : `#474747 url("/static/images/plus.theme.svg") no-repeat center`}; + } + + .buttons-box { + background: ${(props) => + props.currentColorButtons + ? props.currentColorButtons + : props.theme.isBase + ? `#eceef1 url("/static/images/plus.theme.svg") no-repeat center` + : `#474747 url("/static/images/plus.theme.svg") no-repeat center`}; + } + + .modal-add-theme { + width: 46px; + height: 46px; + border-radius: 8px; + cursor: pointer; + } `; const ColorSchemeDialog = (props) => { @@ -42,40 +63,55 @@ const ColorSchemeDialog = (props) => { visible, onClose, header, - - nodeButtonsColor, - nodeAccentColor, - nodeHexColorPickerAccent, nodeHexColorPickerButtons, - viewMobile, - - openHexColorPickerButtons, - openHexColorPickerAccent, - - showRestoreToDefaultButtonDialog, - showSaveButtonDialog, onSaveColorSchemeDialog, t, + onClickColor, + currentColorAccent, + currentColorButtons, } = props; + const onKeyPress = (e) => + (e.key === "Esc" || e.key === "Escape") && onClose(); + + useEffect(() => { + window.addEventListener("keyup", onKeyPress); + return () => window.removeEventListener("keyup", onKeyPress); + }); + return ( - + {header}
-
Accent
- {nodeAccentColor} +
{t("Settings:Accent")}
+
{!viewMobile && nodeHexColorPickerAccent}
-
Buttons
- {nodeButtonsColor} +
{t("Settings:Buttons")}
+
{!viewMobile && nodeHexColorPickerButtons}
@@ -83,29 +119,26 @@ const ColorSchemeDialog = (props) => { - <> - {showSaveButtonDialog && ( + {showSaveButtonDialog && ( + <>
@@ -547,101 +548,101 @@ class AutomaticBackup extends React.PureComponent { } export default inject( ({ auth, backup, treeFoldersStore, selectFolderDialogStore }) => { - const { language, settingsStore, currentQuotaStore } = auth; - const { isRestoreAndAutoBackupAvailable } = currentQuotaStore; - const { organizationName, theme } = settingsStore; - const { - downloadingProgress, - backupSchedule, - //commonThirdPartyList, - clearProgressInterval, - deleteSchedule, - getProgress, - setThirdPartyStorage, - setDefaultOptions, - setBackupSchedule, - selectedStorageType, - seStorageType, - //setCommonThirdPartyList, - selectedPeriodLabel, - selectedWeekdayLabel, - selectedWeekday, - selectedHour, - selectedMonthDay, - selectedMaxCopiesNumber, - selectedPeriodNumber, - selectedFolderId, - selectedStorageId, - toDefault, - isFormReady, - getStorageParams, - setSelectedEnableSchedule, - selectedEnableSchedule, - updatePathSettings, + const { language, settingsStore, currentQuotaStore } = auth; + const { isRestoreAndAutoBackupAvailable } = currentQuotaStore; + const { organizationName, theme } = settingsStore; + const { + downloadingProgress, + backupSchedule, + //commonThirdPartyList, + clearProgressInterval, + deleteSchedule, + getProgress, + setThirdPartyStorage, + setDefaultOptions, + setBackupSchedule, + selectedStorageType, + seStorageType, + //setCommonThirdPartyList, + selectedPeriodLabel, + selectedWeekdayLabel, + selectedWeekday, + selectedHour, + selectedMonthDay, + selectedMaxCopiesNumber, + selectedPeriodNumber, + selectedFolderId, + selectedStorageId, + toDefault, + isFormReady, + getStorageParams, + setSelectedEnableSchedule, + selectedEnableSchedule, + updatePathSettings, - setStorageRegions, + setStorageRegions, defaultFolderId, - } = backup; + } = backup; const { updateBaseFolderPath, resetNewFolderPath, } = selectFolderDialogStore; - const isCheckedDocuments = selectedStorageType === `${DocumentModuleType}`; + const isCheckedDocuments = selectedStorageType === `${DocumentModuleType}`; const isCheckedThirdParty = selectedStorageType === `${ResourcesModuleType}`; - const isCheckedThirdPartyStorage = - selectedStorageType === `${StorageModuleType}`; + const isCheckedThirdPartyStorage = + selectedStorageType === `${StorageModuleType}`; - const { rootFoldersTitles, fetchTreeFolders } = treeFoldersStore; + const { rootFoldersTitles, fetchTreeFolders } = treeFoldersStore; - return { + return { defaultFolderId, - isEnableAuto: isRestoreAndAutoBackupAvailable, - fetchTreeFolders, - rootFoldersTitles, - downloadingProgress, - theme, - language, - isFormReady, - organizationName, - backupSchedule, - //commonThirdPartyList, - clearProgressInterval, - deleteSchedule, - getProgress, - setThirdPartyStorage, - setDefaultOptions, - setBackupSchedule, - selectedStorageType, - seStorageType, - //setCommonThirdPartyList, - selectedPeriodLabel, - selectedWeekdayLabel, - selectedWeekday, - selectedHour, - selectedMonthDay, - selectedMaxCopiesNumber, - selectedPeriodNumber, - selectedFolderId, - selectedStorageId, + isEnableAuto: isRestoreAndAutoBackupAvailable, + fetchTreeFolders, + rootFoldersTitles, + downloadingProgress, + theme, + language, + isFormReady, + organizationName, + backupSchedule, + //commonThirdPartyList, + clearProgressInterval, + deleteSchedule, + getProgress, + setThirdPartyStorage, + setDefaultOptions, + setBackupSchedule, + selectedStorageType, + seStorageType, + //setCommonThirdPartyList, + selectedPeriodLabel, + selectedWeekdayLabel, + selectedWeekday, + selectedHour, + selectedMonthDay, + selectedMaxCopiesNumber, + selectedPeriodNumber, + selectedFolderId, + selectedStorageId, - toDefault, + toDefault, - isCheckedThirdPartyStorage, - isCheckedThirdParty, - isCheckedDocuments, + isCheckedThirdPartyStorage, + isCheckedThirdParty, + isCheckedDocuments, - getStorageParams, + getStorageParams, - setSelectedEnableSchedule, - selectedEnableSchedule, + setSelectedEnableSchedule, + selectedEnableSchedule, - updatePathSettings, + updatePathSettings, resetNewFolderPath, - setStorageRegions, + setStorageRegions, updateBaseFolderPath, - }; + }; } )(withTranslation(["Settings", "Common"])(observer(AutomaticBackup))); diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js index 615c2f194b..4bda3b0c54 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js @@ -16,6 +16,7 @@ const Backup = ({ t, history, isNotPaidPeriod, + currentColorScheme, }) => { const renderTooltip = (helpInfo) => { return ( @@ -32,7 +33,7 @@ const Backup = ({ as="a" href={helpUrlCreatingBackup} target="_blank" - color="#555F65" + color={currentColorScheme.main.accent} isBold isHovered > @@ -84,7 +85,11 @@ export default inject(({ auth }) => { const { settingsStore, currentTariffStatusStore } = auth; const { isNotPaidPeriod } = currentTariffStatusStore; - const { helpUrlCreatingBackup, isTabletView } = settingsStore; + const { + helpUrlCreatingBackup, + isTabletView, + currentColorScheme, + } = settingsStore; const buttonSize = isTabletView ? "normal" : "small"; @@ -92,5 +97,6 @@ export default inject(({ auth }) => { helpUrlCreatingBackup, buttonSize, isNotPaidPeriod, + currentColorScheme, }; })(observer(withTranslation(["Settings", "Common"])(Backup))); diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js index ded49ddd21..7f9a94df36 100644 --- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js +++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js @@ -72,6 +72,7 @@ const ToggleSSO = (props) => { label="Paid" maxWidth="31px" className="toggle-caption_title_badge" + isPaidBadge={true} /> )}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js index d9be297143..34e9fc8645 100644 --- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js +++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js @@ -121,6 +121,7 @@ class ThirdPartyServices extends React.Component { updateConsumerProps, urlAuthKeys, theme, + currentColorScheme, } = this.props; const { dialogVisible, isLoading } = this.state; const { onModalClose, onModalOpen, setConsumer, onChangeLoading } = this; @@ -131,7 +132,7 @@ class ThirdPartyServices extends React.Component { {t("ThirdPartyTitleDescription")} { const { settingsStore, setDocumentTitle } = auth; - const { urlAuthKeys, theme } = settingsStore; + const { urlAuthKeys, theme, currentColorScheme } = settingsStore; const { getConsumers, integration, @@ -203,5 +204,6 @@ export default inject(({ setup, auth }) => { updateConsumerProps, setSelectedConsumer, setDocumentTitle, + currentColorScheme, }; })(withTranslation(["Settings", "Common"])(observer(ThirdPartyServices))); diff --git a/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js b/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js index f811999031..ee3a37abe5 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js +++ b/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js @@ -17,7 +17,7 @@ import { size } from "@docspace/components/utils/device"; import { inject, observer } from "mobx-react"; const AccessPortal = (props) => { - const { t, helpLink } = props; + const { t, helpLink, currentColorScheme } = props; const [isMobileView, setIsMobileView] = useState(false); useEffect(() => { @@ -42,6 +42,7 @@ const AccessPortal = (props) => { title={t("SettingPasswordStrength")} tooltipTitle={t("SettingPasswordStrengthDescription")} tooltipUrl={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} + currentColorScheme={currentColorScheme} /> @@ -50,6 +51,7 @@ const AccessPortal = (props) => { title={t("TwoFactorAuth")} tooltipTitle={t("TwoFactorAuthDescription")} tooltipUrl={`${helpLink}/administration/two-factor-authentication.aspx`} + currentColorScheme={currentColorScheme} /> @@ -58,6 +60,7 @@ const AccessPortal = (props) => { title={t("TrustedMail")} tooltipTitle={t("TrustedMailDescription")} tooltipUrl={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} + currentColorScheme={currentColorScheme} /> @@ -74,6 +77,7 @@ const AccessPortal = (props) => { title={t("AdminsMessage")} tooltipTitle={t("AdminsMessageDescription")} tooltipUrl={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} + currentColorScheme={currentColorScheme} /> @@ -89,6 +93,6 @@ const AccessPortal = (props) => { }; export default inject(({ auth }) => { - const { helpLink } = auth.settingsStore; - return { helpLink }; + const { helpLink, currentColorScheme } = auth.settingsStore; + return { helpLink, currentColorScheme }; })(withTranslation("Settings")(withRouter(observer(AccessPortal)))); diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js index eaeeeaa466..4b204afb06 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js @@ -154,7 +154,9 @@ const HistoryMainContent = (props) => { return ( - {isSettingNotPaid && } + {isSettingNotPaid && ( + + )}
{subHeader} diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/category-wrapper.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/category-wrapper.js index 3fa4b37db2..e692db16b5 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/category-wrapper.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/category-wrapper.js @@ -6,13 +6,25 @@ import { Base } from "@docspace/components/themes"; import { StyledCategoryWrapper, StyledTooltip } from "../StyledSecurity"; const CategoryWrapper = (props) => { - const { t, title, tooltipTitle, tooltipUrl, theme } = props; + const { + t, + title, + tooltipTitle, + tooltipUrl, + theme, + currentColorScheme, + } = props; const tooltip = () => ( {tooltipTitle} {tooltipUrl && ( - + {t("Common:LearnMore")} )} diff --git a/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js b/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js index 015168e788..dcac904fdf 100644 --- a/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js +++ b/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js @@ -6,7 +6,6 @@ const StyledBodyPreparationPortal = styled.div` margin-bottom: 24px; width: 100%; max-width: ${(props) => (props.errorMessage ? "560px" : "480px")}; - padding: 0 24px; box-sizing: border-box; align-items: center; @@ -15,23 +14,29 @@ const StyledBodyPreparationPortal = styled.div` margin-bottom: 16px; position: relative; .preparation-portal_progress-bar { - border-radius: 2px; + padding: 2px; + box-sizing: border-box; + border-radius: 6px; width: 100%; height: 24px; - background-color: #f3f4f4; + background-color: ${(props) => + props.theme.preparationPortalProgress.backgroundColor}; } .preparation-portal_progress-line { - border-radius: inherit; + border-radius: 5px; width: ${(props) => props.percent}%; - background: #439ccd; - height: inherit; + height: 20px; transition-property: width; transition-duration: 0.9s; - background: #1f97ca; } .preparation-portal_percent { position: absolute; - ${(props) => props.percent > 50 && "color: white"}; + font-size: 14px; + font-weight: 600; + color: ${(props) => + props.percent > 50 + ? props.theme.preparationPortalProgress.colorPercentBig + : props.theme.preparationPortalProgress.colorPercentSmall}; top: 2px; left: calc(50% - 9px); } diff --git a/packages/client/src/pages/PreparationPortal/index.js b/packages/client/src/pages/PreparationPortal/index.js index 32abb386e7..622bb16314 100644 --- a/packages/client/src/pages/PreparationPortal/index.js +++ b/packages/client/src/pages/PreparationPortal/index.js @@ -10,6 +10,7 @@ import Text from "@docspace/components/text"; import { getRestoreProgress } from "@docspace/common/api/portal"; import { observer, inject } from "mobx-react"; import PropTypes from "prop-types"; +import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme"; const baseSize = 1073741824; //number of bytes in one GB const unSizeMultiplicationFactor = 3; @@ -193,7 +194,8 @@ class PreparationPortal extends React.Component { headerText={withoutHeader ? "" : t("Common:PreparationPortalTitle")} style={style} > -
- {`${percent}%`} + {`${percent} %`}
{t("PreparationPortalDescription")} )} - + ); diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js index cccadde708..f53c37f6ee 100644 --- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js +++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js @@ -107,7 +107,7 @@ const InterfaceTheme = (props) => { label={t("LightTheme")} isDisabled={isSystemTheme} theme="Light" - accentColor={currentColorScheme.accentColor} + accentColor={currentColorScheme.main.accent} themeId={selectedThemeId} value={ThemeKeys.BaseStr} isChecked={currentTheme === ThemeKeys.BaseStr} @@ -117,7 +117,7 @@ const InterfaceTheme = (props) => { label={t("DarkTheme")} isDisabled={isSystemTheme} theme="Dark" - accentColor={currentColorScheme.accentColor} + accentColor={currentColorScheme.main.accent} themeId={selectedThemeId} value={ThemeKeys.DarkStr} isChecked={currentTheme === ThemeKeys.DarkStr} diff --git a/packages/client/src/pages/VersionHistory/Section/Body/VersionBadge.js b/packages/client/src/pages/VersionHistory/Section/Body/VersionBadge.js index 30f0cdf1e2..c4e5a5f732 100644 --- a/packages/client/src/pages/VersionHistory/Section/Body/VersionBadge.js +++ b/packages/client/src/pages/VersionHistory/Section/Body/VersionBadge.js @@ -1,8 +1,6 @@ import React from "react"; -import styled, { css } from "styled-components"; import Text from "@docspace/components/text"; -import Box from "@docspace/components/box"; -import VersionSvg from "@docspace/client/public/images/versionrevision_active.react.svg"; +import { StyledVersionSvg } from "@docspace/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory"; import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme"; const VersionBadge = ({ @@ -14,13 +12,17 @@ const VersionBadge = ({ theme, ...rest }) => ( - - + + {isVersion && t("Version", { version: versionGroup })} - + ); export default VersionBadge; diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 588a60253d..8086d3e48a 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2630,6 +2630,14 @@ class FilesStore { setCreatedItem = (createdItem) => { this.createdItem = createdItem; + + const { socketHelper } = this.authStore.settingsStore; + if (createdItem?.type == "file") { + socketHelper.emit({ + command: "subscribe", + data: `FILE-${createdItem.id}`, + }); + } }; setScrollToItem = (item) => { diff --git a/packages/common/api/settings/index.js b/packages/common/api/settings/index.js index 4c5e799a16..8d30be44a1 100644 --- a/packages/common/api/settings/index.js +++ b/packages/common/api/settings/index.js @@ -186,6 +186,13 @@ export function sendAppearanceTheme(data) { }); } +export function deleteAppearanceTheme(id) { + return request({ + method: "delete", + url: `/settings/colortheme?id=${id}`, + }); +} + export function getLogoText() { return request({ method: "get", diff --git a/packages/common/components/Article/sub-components/article-hide-menu-button.js b/packages/common/components/Article/sub-components/article-hide-menu-button.js index 72b21b8178..ea52c847dc 100644 --- a/packages/common/components/Article/sub-components/article-hide-menu-button.js +++ b/packages/common/components/Article/sub-components/article-hide-menu-button.js @@ -42,7 +42,7 @@ const StyledHideArticleMenuButton = styled.div` .article-hide-menu-text { margin-left: 8px; - color: ${({ currentColorScheme }) => currentColorScheme.accentColor}; + color: ${({ currentColorScheme }) => currentColorScheme.main.accent}; } @media ${tablet} { @@ -75,7 +75,7 @@ const StyledHideArticleMenuButton = styled.div` svg { path { - fill: ${({ currentColorScheme }) => currentColorScheme.accentColor}; + fill: ${({ currentColorScheme }) => currentColorScheme.main.accent}; } } } diff --git a/packages/common/components/ColorTheme/ColorTheme.js b/packages/common/components/ColorTheme/ColorTheme.js index b5c0c5d6de..d3568b15e1 100644 --- a/packages/common/components/ColorTheme/ColorTheme.js +++ b/packages/common/components/ColorTheme/ColorTheme.js @@ -28,6 +28,8 @@ import { LinkTheme, SliderTheme, IndicatorLoaderTheme, + ProgressTheme, + MobileProgressBarTheme, } from "./styled"; import { ThemeType } from "./constants"; @@ -269,6 +271,24 @@ const ColorTheme = forwardRef( /> ); } + case ThemeType.Progress: { + return ( + + ); + } + case ThemeType.MobileProgressBar: { + return ( + + ); + } } } ); diff --git a/packages/common/components/ColorTheme/constants.js b/packages/common/components/ColorTheme/constants.js index 51c45ed52a..6d255432ca 100644 --- a/packages/common/components/ColorTheme/constants.js +++ b/packages/common/components/ColorTheme/constants.js @@ -25,4 +25,6 @@ export const ThemeType = { Link: "link", Slider: "slider", IndicatorLoader: "indicatorLoader", + Progress: "progress", + MobileProgressBar: "mobileProgressBar", }; diff --git a/packages/common/components/ColorTheme/styled/badge.js b/packages/common/components/ColorTheme/styled/badge.js index f478b81549..5b1d33a4cc 100644 --- a/packages/common/components/ColorTheme/styled/badge.js +++ b/packages/common/components/ColorTheme/styled/badge.js @@ -12,6 +12,7 @@ const getDefaultStyles = ({ backgroundColor, color, theme, + isPaidBadge, }) => $currentColorScheme && !isVersionBadge && @@ -19,33 +20,27 @@ const getDefaultStyles = ({ ${StyledText} { color: ${color ? color - : $currentColorScheme.id === 7 && !theme.isBase - ? "#444444" - : theme.badge.color} !important; + : isPaidBadge + ? theme.badge.color + : $currentColorScheme.text.accent} !important; } ${StyledInner} { background-color: ${backgroundColor ? backgroundColor - : $currentColorScheme.id === 7 && !theme.isBase - ? "#ECEEF1" - : $currentColorScheme.accentColor}; + : $currentColorScheme.main.accent}; &:hover { background-color: ${backgroundColor ? backgroundColor - : $currentColorScheme.id === 7 && !theme.isBase - ? "#ECEEF1" - : $currentColorScheme.accentColor}; + : $currentColorScheme.main.accent}; } } &:hover { border-color: ${backgroundColor ? backgroundColor - : $currentColorScheme.id === 7 && !theme.isBase - ? "#ECEEF1" - : $currentColorScheme.accentColor}; + : $currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/button.js b/packages/common/components/ColorTheme/styled/button.js index 999c232ed0..e3a2937216 100644 --- a/packages/common/components/ColorTheme/styled/button.js +++ b/packages/common/components/ColorTheme/styled/button.js @@ -3,35 +3,27 @@ import StyledButton from "@docspace/components/button/styled-button"; import Base from "@docspace/components/themes/base"; const activeCss = css` - border-color: ${(props) => - props.theme.isBase - ? props.$currentColorScheme.buttonsMain - : props.primary - ? props.$currentColorScheme.buttonsMain - : props.theme.button.border.baseActive}; + border-color: ${(props) => props.$currentColorScheme.main.buttons}; background: ${(props) => - props.primary && props.$currentColorScheme.buttonsMain}; + props.primary && props.$currentColorScheme.main.buttons}; opacity: ${(props) => !props.isDisabled && "1"}; filter: ${(props) => props.primary && (props.theme.isBase ? "brightness(90%)" : "brightness(82%)")}; + color: ${(props) => props.$currentColorScheme.text.buttons}; `; const hoverCss = css` - border-color: ${(props) => - props.theme.isBase - ? props.$currentColorScheme.buttonsMain - : props.primary - ? props.$currentColorScheme.buttonsMain - : props.theme.button.border.baseHover}; + border-color: ${(props) => props.$currentColorScheme.main.buttons}; background: ${(props) => - props.primary && props.$currentColorScheme.buttonsMain}; + props.primary && props.$currentColorScheme.main.buttons}; opacity: ${(props) => props.primary && !props.isDisabled && "0.85"}; + color: ${(props) => props.primary && props.$currentColorScheme.text.buttons}; `; const getDefaultStyles = ({ @@ -42,12 +34,25 @@ const getDefaultStyles = ({ isClicked, isHovered, disableHover, + title, }) => $currentColorScheme && + !title && css` - background: ${primary && $currentColorScheme.buttonsMain}; - opacity: ${primary && isDisabled && "0.6"}; - border-color: ${primary && $currentColorScheme.buttonsMain}; + ${primary && + css` + background: ${$currentColorScheme.main.buttons}; + opacity: ${isDisabled && "0.6"}; + border: ${`1px solid`} ${$currentColorScheme.main.buttons}; + color: ${$currentColorScheme.text.buttons}; + + .loader { + svg { + color: ${$currentColorScheme.text.buttons}; + } + background-color: ${$currentColorScheme.main.buttons}; + } + `} ${!isDisabled && !isLoading && diff --git a/packages/common/components/ColorTheme/styled/calendar.js b/packages/common/components/ColorTheme/styled/calendar.js index 956e340686..7215fe864e 100644 --- a/packages/common/components/ColorTheme/styled/calendar.js +++ b/packages/common/components/ColorTheme/styled/calendar.js @@ -5,9 +5,11 @@ const getDefaultStyles = ({ $currentColorScheme, color }) => $currentColorScheme && css` .calendar-month_selected-day { - background-color: ${color ? color : $currentColorScheme.accentColor}; + background-color: ${color ? color : $currentColorScheme.main.accent}; + color: ${$currentColorScheme.text.accent}; &:hover { - background-color: ${color ? color : $currentColorScheme.accentColor}; + background-color: ${color ? color : $currentColorScheme.main.accent}; + color: ${$currentColorScheme.text.accent}; } } `; diff --git a/packages/common/components/ColorTheme/styled/catalogItem.js b/packages/common/components/ColorTheme/styled/catalogItem.js index 7843beb29d..4e08ffed6a 100644 --- a/packages/common/components/ColorTheme/styled/catalogItem.js +++ b/packages/common/components/ColorTheme/styled/catalogItem.js @@ -12,10 +12,10 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) => $currentColorScheme && css` ${StyledCatalogItemText} { - color: ${isActive && theme.isBase && $currentColorScheme.accentColor}; + color: ${isActive && theme.isBase && $currentColorScheme.main.accent}; &:hover { - color: ${isActive && theme.isBase && $currentColorScheme.accentColor}; + color: ${isActive && theme.isBase && $currentColorScheme.main.accent}; } } @@ -24,12 +24,12 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) => path { fill: ${isActive && theme.isBase && - $currentColorScheme.accentColor} !important; + $currentColorScheme.main.accent} !important; } circle { fill: ${isActive && theme.isBase && - $currentColorScheme.accentColor} !important; + $currentColorScheme.main.accent} !important; } } @@ -38,7 +38,7 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) => path { fill: ${isActive && theme.isBase && - $currentColorScheme.accentColor} !important; + $currentColorScheme.main.accent} !important; } } } diff --git a/packages/common/components/ColorTheme/styled/comboButton.js b/packages/common/components/ColorTheme/styled/comboButton.js index 4424c8d854..ca297dc200 100644 --- a/packages/common/components/ColorTheme/styled/comboButton.js +++ b/packages/common/components/ColorTheme/styled/comboButton.js @@ -2,22 +2,14 @@ import styled, { css } from "styled-components"; import { StyledComboButton } from "@docspace/components/combobox/sub-components/styled-combobutton"; import Base from "@docspace/components/themes/base"; -const getDefaultStyles = ({ $currentColorScheme, isOpen, theme }) => +const getDefaultStyles = ({ $currentColorScheme, isOpen }) => $currentColorScheme && css` - border-color: ${isOpen && - (theme.isBase - ? $currentColorScheme.accentColor - : theme.comboBox.button.openBorderColor)}; + border-color: ${isOpen && $currentColorScheme.main.accent}; :focus { - border-color: ${isOpen && - (theme.isBase - ? $currentColorScheme.accentColor - : theme.comboBox.button.hoverBorderColor)}; + border-color: ${isOpen && $currentColorScheme.main.accent}; } `; -StyledComboButton.defaultProps = { theme: Base }; - export default styled(StyledComboButton)(getDefaultStyles); diff --git a/packages/common/components/ColorTheme/styled/filterBlockItemTag.js b/packages/common/components/ColorTheme/styled/filterBlockItemTag.js index 918683f80b..8658cfda91 100644 --- a/packages/common/components/ColorTheme/styled/filterBlockItemTag.js +++ b/packages/common/components/ColorTheme/styled/filterBlockItemTag.js @@ -4,20 +4,18 @@ import Base from "@docspace/components/themes/base"; const getDefaultStyles = ({ $currentColorScheme, isSelected, theme }) => $currentColorScheme && + isSelected && css` - background: ${isSelected && - theme.isBase && - $currentColorScheme.accentColor}; - border-color: ${isSelected && - theme.isBase && - $currentColorScheme.accentColor}; + background: ${$currentColorScheme.main.accent}; + border-color: ${$currentColorScheme.main.accent}; + + .filter-text { + color: ${$currentColorScheme.textColor}; + } + &:hover { - background: ${isSelected && - theme.isBase && - $currentColorScheme.accentColor}; - border-color: ${isSelected && - theme.isBase && - $currentColorScheme.accentColor}; + background: ${$currentColorScheme.main.accent}; + border-color: ${$currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/floatingButton.js b/packages/common/components/ColorTheme/styled/floatingButton.js index 1f8bcd6f47..b49666ade1 100644 --- a/packages/common/components/ColorTheme/styled/floatingButton.js +++ b/packages/common/components/ColorTheme/styled/floatingButton.js @@ -2,28 +2,34 @@ import styled, { css } from "styled-components"; import { StyledCircleWrap, StyledFloatingButton, + IconBox, + StyledCircle, } from "@docspace/common/components/FloatingButton/StyledFloatingButton"; import Base from "@docspace/components/themes/base"; -const getDefaultStyles = ({ $currentColorScheme, color, icon, theme }) => +const getDefaultStyles = ({ $currentColorScheme, color, displayProgress }) => $currentColorScheme && css` - background: ${color - ? color - : theme.isBase - ? $currentColorScheme.accentColor - : icon === "upload" - ? theme.floatingButton.backgroundColor - : $currentColorScheme.accentColor} !important; + background: ${color || $currentColorScheme.main.accent} !important; ${StyledFloatingButton} { - background: ${color - ? color - : theme.isBase - ? $currentColorScheme.accentColor - : icon === "upload" - ? theme.floatingButton.backgroundColor - : $currentColorScheme.accentColor} !important; + background: ${color || $currentColorScheme.main.accent} !important; + } + + ${IconBox} { + svg { + path { + fill: ${$currentColorScheme.text.accent}; + } + } + } + + ${StyledCircle} { + .circle__mask .circle__fill { + background-color: ${!displayProgress + ? "transparent !important" + : $currentColorScheme.text.accent}; + } } `; diff --git a/packages/common/components/ColorTheme/styled/iconButton.js b/packages/common/components/ColorTheme/styled/iconButton.js index d277b55d6e..5dea562140 100644 --- a/packages/common/components/ColorTheme/styled/iconButton.js +++ b/packages/common/components/ColorTheme/styled/iconButton.js @@ -17,15 +17,14 @@ const getDefaultStyles = ({ svg { path { fill: ${(shared || locked || isFavorite || isEditing) && - theme.isBase && - $currentColorScheme.accentColor}; + $currentColorScheme.main.accent}; } } &:hover { svg { path { - fill: ${theme.isBase && $currentColorScheme.accentColor}; + fill: ${$currentColorScheme.main.accent}; } } } diff --git a/packages/common/components/ColorTheme/styled/iconButtonPin.js b/packages/common/components/ColorTheme/styled/iconButtonPin.js index eebaf35c34..a14d916bff 100644 --- a/packages/common/components/ColorTheme/styled/iconButtonPin.js +++ b/packages/common/components/ColorTheme/styled/iconButtonPin.js @@ -10,14 +10,14 @@ const getDefaultStyles = ({ $currentColorScheme, theme }) => ${commonIconsStyles} svg { path { - fill: ${theme.isBase && $currentColorScheme.accentColor}; + fill: ${theme.isBase && $currentColorScheme.main.accent}; } } &:hover { svg { path { - fill: ${theme.isBase && $currentColorScheme.accentColor}; + fill: ${theme.isBase && $currentColorScheme.main.accent}; } } } diff --git a/packages/common/components/ColorTheme/styled/iconWrapper.js b/packages/common/components/ColorTheme/styled/iconWrapper.js index 8072d1af87..ceada0400d 100644 --- a/packages/common/components/ColorTheme/styled/iconWrapper.js +++ b/packages/common/components/ColorTheme/styled/iconWrapper.js @@ -6,7 +6,7 @@ const getDefaultStyles = ({ $currentColorScheme }) => css` svg { path:nth-child(2) { - fill: ${$currentColorScheme.accentColor}; + fill: ${$currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/index.js b/packages/common/components/ColorTheme/styled/index.js index 56295b4133..88f2b7902c 100644 --- a/packages/common/components/ColorTheme/styled/index.js +++ b/packages/common/components/ColorTheme/styled/index.js @@ -49,3 +49,7 @@ export { default as LinkTheme } from "./link"; export { default as SliderTheme } from "./slider"; export { default as IndicatorLoaderTheme } from "./indicatorLoader"; + +export { default as ProgressTheme } from "./progress"; + +export { default as MobileProgressBarTheme } from "./mobileProgressBar"; diff --git a/packages/common/components/ColorTheme/styled/indicatorFilterButton.js b/packages/common/components/ColorTheme/styled/indicatorFilterButton.js index 15cd14a141..8d0d1adc70 100644 --- a/packages/common/components/ColorTheme/styled/indicatorFilterButton.js +++ b/packages/common/components/ColorTheme/styled/indicatorFilterButton.js @@ -4,10 +4,10 @@ import StyledIndicator from "@docspace/common/components/FilterInput/sub-compone const getDefaultStyles = ({ $currentColorScheme }) => $currentColorScheme && css` - background: ${$currentColorScheme.accentColor}; + background: ${$currentColorScheme.main.accent}; &:hover { - background: ${$currentColorScheme.accentColor}; + background: ${$currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/indicatorLoader.js b/packages/common/components/ColorTheme/styled/indicatorLoader.js index c5eb1c87e4..e399c8ea0b 100644 --- a/packages/common/components/ColorTheme/styled/indicatorLoader.js +++ b/packages/common/components/ColorTheme/styled/indicatorLoader.js @@ -1,16 +1,21 @@ import styled, { css } from "styled-components"; import StyledWrapper from "@docspace/client/src/components/IndicatorLoader/StyledWrapper"; +import Base from "@docspace/components/themes/base"; -const getDefaultStyles = ({ $currentColorScheme }) => +const getDefaultStyles = ({ $currentColorScheme, theme }) => $currentColorScheme && css` #ipl-progress-indicator { - background-color: ${$currentColorScheme.accentColor}; + background-color: ${theme.isBase + ? $currentColorScheme.main.accent + : "#FFFFFF"}; &:hover { - background-color: ${$currentColorScheme.accentColor}; + background-color: ${theme.isBase + ? $currentColorScheme.main.accent + : "#FFFFFF"}; } } `; - +StyledWrapper.defaultProps = { theme: Base }; export default styled(StyledWrapper)(getDefaultStyles); diff --git a/packages/common/components/ColorTheme/styled/infoPanelToggle.js b/packages/common/components/ColorTheme/styled/infoPanelToggle.js index 74acb70e1d..497aee1f91 100644 --- a/packages/common/components/ColorTheme/styled/infoPanelToggle.js +++ b/packages/common/components/ColorTheme/styled/infoPanelToggle.js @@ -2,14 +2,17 @@ import styled, { css } from "styled-components"; import { StyledInfoPanelToggleWrapper } from "@docspace/client/src/pages/Home/InfoPanel/Header/styles/common"; import Base from "@docspace/components/themes/base"; -const getDefaultStyles = ({ $currentColorScheme, theme }) => +const getDefaultStyles = ({ $currentColorScheme }) => $currentColorScheme && css` .info-panel-toggle-bg { path { - fill: ${theme.isBase - ? $currentColorScheme.accentColor - : theme.infoPanel.sectionHeaderToggleIconActive}; + fill: ${$currentColorScheme.main.accent}; + } + &:hover { + path { + fill: ${$currentColorScheme.main.accent}; + } } } `; diff --git a/packages/common/components/ColorTheme/styled/inputBlock.js b/packages/common/components/ColorTheme/styled/inputBlock.js index 5ca8fe1ea8..8a8180eb3a 100644 --- a/packages/common/components/ColorTheme/styled/inputBlock.js +++ b/packages/common/components/ColorTheme/styled/inputBlock.js @@ -8,9 +8,7 @@ const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) => css` :focus-within { border-color: ${(hasError && theme.input.focusErrorBorderColor) || - (theme.isBase - ? $currentColorScheme.accentColor - : theme.inputBlock.borderColor)}; + $currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/link.js b/packages/common/components/ColorTheme/styled/link.js index 8c3a8beca2..31323241b5 100644 --- a/packages/common/components/ColorTheme/styled/link.js +++ b/packages/common/components/ColorTheme/styled/link.js @@ -4,10 +4,10 @@ import StyledText from "@docspace/components/link/styled-link"; const getDefaultStyles = ({ $currentColorScheme, noHover }) => $currentColorScheme && css` - color: ${$currentColorScheme.accentColor}; + color: ${$currentColorScheme.main.accent}; &:hover { - color: ${!noHover && $currentColorScheme.accentColor}; + color: ${!noHover && $currentColorScheme.main.accent}; text-decoration: underline; } `; diff --git a/packages/common/components/ColorTheme/styled/linkForgotPassword.js b/packages/common/components/ColorTheme/styled/linkForgotPassword.js index 7796cb7cae..ca691d28f7 100644 --- a/packages/common/components/ColorTheme/styled/linkForgotPassword.js +++ b/packages/common/components/ColorTheme/styled/linkForgotPassword.js @@ -5,7 +5,7 @@ const getDefaultStyles = ({ $currentColorScheme }) => $currentColorScheme && css` .login-link { - color: ${$currentColorScheme.accentColor}; + color: ${$currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/loadingButton.js b/packages/common/components/ColorTheme/styled/loadingButton.js index 4a296fb3a6..180595454c 100644 --- a/packages/common/components/ColorTheme/styled/loadingButton.js +++ b/packages/common/components/ColorTheme/styled/loadingButton.js @@ -11,16 +11,12 @@ const getDefaultStyles = ({ $currentColorScheme, theme }) => css` ${StyledCircle} { .circle__mask .circle__fill { - background-color: ${theme.isBase - ? $currentColorScheme.accentColor - : theme.filesPanels.upload.loadingButton.color}; + background-color: ${$currentColorScheme.main.accent}; } } ${StyledLoadingButton} { - color: ${theme.isBase - ? $currentColorScheme.accentColor - : theme.filesPanels.upload.loadingButton.color}; + color: ${$currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/mainButton.js b/packages/common/components/ColorTheme/styled/mainButton.js index 764da79cae..18e0117e0f 100644 --- a/packages/common/components/ColorTheme/styled/mainButton.js +++ b/packages/common/components/ColorTheme/styled/mainButton.js @@ -20,21 +20,29 @@ const disableStyles = css` const getDefaultStyles = ({ $currentColorScheme, isDisabled, theme }) => $currentColorScheme && css` - background-color: ${$currentColorScheme.accentColor}; + background-color: ${$currentColorScheme.main.accent}; &:hover { - background-color: ${$currentColorScheme.accentColor}; + background-color: ${$currentColorScheme.main.accent}; opacity: 0.85; cursor: pointer; } &:active { - background-color: ${$currentColorScheme.accentColor}; + background-color: ${$currentColorScheme.main.accent}; opacity: 1; filter: ${theme.isBase ? "brightness(90%)" : "brightness(82%)"}; cursor: pointer; } + .main-button_text { + color: ${$currentColorScheme.text.accent}; + } + + .main-button_img svg path { + fill: ${$currentColorScheme.text.accent}; + } + ${isDisabled && ` ${disableStyles} diff --git a/packages/common/components/ColorTheme/styled/mobileProgressBar.js b/packages/common/components/ColorTheme/styled/mobileProgressBar.js new file mode 100644 index 0000000000..34c0695d36 --- /dev/null +++ b/packages/common/components/ColorTheme/styled/mobileProgressBar.js @@ -0,0 +1,14 @@ +import styled, { css } from "styled-components"; +import { StyledBar } from "@docspace/components/main-button-mobile/styled-main-button"; + +const getDefaultStyles = ({ $currentColorScheme, theme, error }) => + $currentColorScheme && + css` + background: ${error + ? theme.mainButtonMobile.bar.errorBackground + : theme.isBase + ? $currentColorScheme.main.accent + : "#FFFFFF"}; + `; + +export default styled(StyledBar)(getDefaultStyles); diff --git a/packages/common/components/ColorTheme/styled/progress.js b/packages/common/components/ColorTheme/styled/progress.js new file mode 100644 index 0000000000..b02650e269 --- /dev/null +++ b/packages/common/components/ColorTheme/styled/progress.js @@ -0,0 +1,15 @@ +import styled, { css } from "styled-components"; +import { StyledBodyPreparationPortal } from "@docspace/client/src/pages/PreparationPortal/StyledPreparationPortal"; +import Base from "@docspace/components/themes/base"; + +const getDefaultStyles = ({ $currentColorScheme, theme }) => + $currentColorScheme && + css` + .preparation-portal_progress-line { + background: ${theme.isBase ? $currentColorScheme.main.accent : "#FFFFFF"}; + } + `; + +StyledBodyPreparationPortal.defaultProps = { theme: Base }; + +export default styled(StyledBodyPreparationPortal)(getDefaultStyles); diff --git a/packages/common/components/ColorTheme/styled/slider.js b/packages/common/components/ColorTheme/styled/slider.js index d85877960a..ca1481f5b0 100644 --- a/packages/common/components/ColorTheme/styled/slider.js +++ b/packages/common/components/ColorTheme/styled/slider.js @@ -11,11 +11,11 @@ const getDefaultStyles = ({ css` background-image: ${withPouring && ((theme.isBase && - `linear-gradient( ${$currentColorScheme.accentColor}, ${$currentColorScheme.accentColor})`) || + `linear-gradient( ${$currentColorScheme.main.accent}, ${$currentColorScheme.main.accent})`) || (!theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))}; &::-webkit-slider-thumb { - background: ${(theme.isBase && $currentColorScheme.accentColor) || + background: ${(theme.isBase && $currentColorScheme.main.accent) || (!theme.isBase && "#FFFFFF")}; box-shadow: ${!theme.isBase && "0px 3px 12px rgba(0, 0, 0, 0.25); !important"}; @@ -24,7 +24,7 @@ const getDefaultStyles = ({ &:hover { background-image: ${withPouring && ((theme.isBase && - `linear-gradient( ${$currentColorScheme.accentColor}, ${$currentColorScheme.accentColor})`) || + `linear-gradient( ${$currentColorScheme.main.accent}, ${$currentColorScheme.main.accent})`) || (!theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))}; } diff --git a/packages/common/components/ColorTheme/styled/submenuItemLabel.js b/packages/common/components/ColorTheme/styled/submenuItemLabel.js index d30edb2a61..bddcafd477 100644 --- a/packages/common/components/ColorTheme/styled/submenuItemLabel.js +++ b/packages/common/components/ColorTheme/styled/submenuItemLabel.js @@ -5,10 +5,10 @@ import { StyledSubmenuItemLabel } from "@docspace/components/submenu/styled-subm const getDefaultStyles = ({ $currentColorScheme, isActive }) => $currentColorScheme && css` - background-color: ${isActive ? $currentColorScheme.accentColor : "none"}; + background-color: ${isActive ? $currentColorScheme.main.accent : "none"}; &:hover { - background-color: ${isActive && $currentColorScheme.accentColor}; + background-color: ${isActive && $currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/submenuText.js b/packages/common/components/ColorTheme/styled/submenuText.js index a81019b2dc..68bc56830d 100644 --- a/packages/common/components/ColorTheme/styled/submenuText.js +++ b/packages/common/components/ColorTheme/styled/submenuText.js @@ -7,12 +7,12 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) => css` color: ${isActive && theme.isBase && - $currentColorScheme.accentColor} !important; + $currentColorScheme.main.accent} !important; &:hover { color: ${isActive && theme.isBase && - $currentColorScheme.accentColor} !important; + $currentColorScheme.main.accent} !important; } `; diff --git a/packages/common/components/ColorTheme/styled/tabsContainer.js b/packages/common/components/ColorTheme/styled/tabsContainer.js index 0ac86d3f19..5c5059c267 100644 --- a/packages/common/components/ColorTheme/styled/tabsContainer.js +++ b/packages/common/components/ColorTheme/styled/tabsContainer.js @@ -5,9 +5,11 @@ import Base from "@docspace/components/themes/base"; const getDefaultStyles = ({ $currentColorScheme, selected, theme }) => $currentColorScheme && css` - background-color: ${selected && - theme.isBase && - $currentColorScheme.accentColor} !important; + background-color: ${selected && $currentColorScheme.main.accent} !important; + + .title_style { + color: ${selected && $currentColorScheme.text.accent}; + } `; Label.defaultProps = { theme: Base }; diff --git a/packages/common/components/ColorTheme/styled/textInput.js b/packages/common/components/ColorTheme/styled/textInput.js index 9c5c9f5294..8a27cac3ae 100644 --- a/packages/common/components/ColorTheme/styled/textInput.js +++ b/packages/common/components/ColorTheme/styled/textInput.js @@ -15,9 +15,7 @@ const getDefaultStyles = ({ border-color: ${(hasError && theme.input.focusErrorBorderColor) || (hasWarning && theme.input.focusWarningBorderColor) || (isDisabled && theme.input.focusDisabledBorderColor) || - (theme.isBase - ? $currentColorScheme.accentColor - : theme.input.focusBorderColor)}; + $currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/textarea.js b/packages/common/components/ColorTheme/styled/textarea.js index 8d987a9dd8..475cb7797d 100644 --- a/packages/common/components/ColorTheme/styled/textarea.js +++ b/packages/common/components/ColorTheme/styled/textarea.js @@ -8,9 +8,7 @@ const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) => :focus-within { border-color: ${hasError ? theme.textArea.focusErrorBorderColor - : theme.isBase - ? $currentColorScheme.accentColor - : theme.textArea.focusBorderColor}; + : $currentColorScheme.main.accent}; } `; diff --git a/packages/common/components/ColorTheme/styled/toggleButton.js b/packages/common/components/ColorTheme/styled/toggleButton.js index cf70eda2c8..64b8537fa6 100644 --- a/packages/common/components/ColorTheme/styled/toggleButton.js +++ b/packages/common/components/ColorTheme/styled/toggleButton.js @@ -4,19 +4,23 @@ import { ToggleButtonContainer, } from "@docspace/components/toggle-button/styled-toggle-button"; -const getDefaultStyles = ({ $currentColorScheme, isDisabled, isChecked }) => +const getDefaultStyles = ({ + $currentColorScheme, + isDisabled, + isChecked, + theme, +}) => $currentColorScheme && css` ${ToggleButtonContainer} { svg { rect { - fill: ${isChecked && $currentColorScheme.accentColor}; - opacity: ${isDisabled && "0.6"}; + fill: ${isChecked && $currentColorScheme.main.accent}; + } - &:hover { - fill: ${isChecked && $currentColorScheme.accentColor}; - opacity: ${isDisabled && "0.6"}; - } + circle { + fill: ${(isChecked && isDisabled && theme.isBase && "#FFFFFF") || + (isChecked && $currentColorScheme.text.accent)}; } } } diff --git a/packages/common/components/ColorTheme/styled/versionBadge.js b/packages/common/components/ColorTheme/styled/versionBadge.js index 47c6124bc8..47d1a23b91 100644 --- a/packages/common/components/ColorTheme/styled/versionBadge.js +++ b/packages/common/components/ColorTheme/styled/versionBadge.js @@ -1,21 +1,28 @@ import styled, { css } from "styled-components"; import { StyledVersionSvg } from "@docspace/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory"; +import Box from "@docspace/components/box"; const getDefaultStyles = ({ $currentColorScheme, $isVersion, theme, index }) => $currentColorScheme && css` - path { - fill: ${!$isVersion - ? theme.filesVersionHistory.badge.defaultFill - : index === 0 - ? theme.filesVersionHistory.badge.fill - : $currentColorScheme.accentColor}; + ${StyledVersionSvg} { + path { + fill: ${!$isVersion + ? theme.filesVersionHistory.badge.defaultFill + : index === 0 + ? theme.filesVersionHistory.badge.fill + : $currentColorScheme.main.accent}; - stroke: ${!$isVersion - ? theme.filesVersionHistory.badge.stroke - : index === 0 - ? theme.filesVersionHistory.badge.fill - : $currentColorScheme.accentColor}; + stroke: ${!$isVersion + ? theme.filesVersionHistory.badge.stroke + : index === 0 + ? theme.filesVersionHistory.badge.fill + : $currentColorScheme.main.accent}; + } + } + + .version_badge-text { + color: ${$isVersion && index !== 0 && $currentColorScheme.text.accent}; } `; -export default styled(StyledVersionSvg)(getDefaultStyles); +export default styled(Box)(getDefaultStyles); diff --git a/packages/common/components/FilterInput/sub-components/FilterBlockItem.js b/packages/common/components/FilterInput/sub-components/FilterBlockItem.js index 72d95e525c..732e22f133 100644 --- a/packages/common/components/FilterInput/sub-components/FilterBlockItem.js +++ b/packages/common/components/FilterInput/sub-components/FilterBlockItem.js @@ -104,6 +104,7 @@ const FilterBlockItem = ({ themeId={ThemeType.FilterBlockItemTag} > @@ -189,6 +190,7 @@ const FilterBlockItem = ({ themeId={ThemeType.FilterBlockItemTag} > { clearUploadedFilesHistory && clearUploadedFilesHistory(); }; + const displayProgress = useMemo(() => { + return !(percent === 100 && animationCompleted) && icon != "minus"; + }, [percent, animationCompleted, icon]); + let timerId = null; useEffect(() => { @@ -73,13 +77,9 @@ const FloatingButton = (props) => { style={style} icon={icon} onClick={onClick} + displayProgress={displayProgress} > - +
diff --git a/packages/common/store/SettingsStore.js b/packages/common/store/SettingsStore.js index e66a6e6e4c..8a67a87d43 100644 --- a/packages/common/store/SettingsStore.js +++ b/packages/common/store/SettingsStore.js @@ -692,6 +692,10 @@ class SettingsStore { sendAppearanceTheme = async (data) => { return api.settings.sendAppearanceTheme(data); }; + + deleteAppearanceTheme = async (id) => { + return api.settings.deleteAppearanceTheme(id); + }; } export default SettingsStore; diff --git a/packages/components/catalog-item/styled-catalog-item.js b/packages/components/catalog-item/styled-catalog-item.js index 784be1bf8b..b0f730cdf2 100644 --- a/packages/components/catalog-item/styled-catalog-item.js +++ b/packages/components/catalog-item/styled-catalog-item.js @@ -265,7 +265,7 @@ const StyledCatalogItemImg = styled.div` fill: ${(props) => props.isActive ? props.theme.catalogItem.img.svg.isActiveFill - : props.theme.catalogItem.img.svg.fill} !important; + : props.theme.catalogItem.img.svg.fill}; } } diff --git a/packages/components/main-button-mobile/index.js b/packages/components/main-button-mobile/index.js index bea44ffcbb..710da87d88 100644 --- a/packages/components/main-button-mobile/index.js +++ b/packages/components/main-button-mobile/index.js @@ -78,7 +78,11 @@ const ProgressBarMobile = ({
- + ); diff --git a/packages/components/main-button-mobile/styled-main-button.js b/packages/components/main-button-mobile/styled-main-button.js index 815f7be873..c9ef6177d2 100644 --- a/packages/components/main-button-mobile/styled-main-button.js +++ b/packages/components/main-button-mobile/styled-main-button.js @@ -275,10 +275,6 @@ const StyledBar = styled.div` width: ${(props) => props.uploadPercent}%; height: 4px; opacity: 1; - background: ${(props) => - props.error - ? props.theme.mainButtonMobile.bar.errorBackground - : props.theme.mainButtonMobile.bar.background}; `; const StyledAlertIcon = styled.div` diff --git a/packages/components/main-button/index.js b/packages/components/main-button/index.js index 5d3301f2f6..72f931a192 100644 --- a/packages/components/main-button/index.js +++ b/packages/components/main-button/index.js @@ -50,9 +50,9 @@ const MainButton = (props) => { {text} {isDropdown && ( <> - - props.isDisabled + props.isChecked ? css` rect { - fill: ${props.isChecked - ? props.theme.toggleButton.disableFillColor - : props.theme.toggleButton.disableFillColorOff}; - stroke-width: 1px; - stroke-linecap: round; - stroke: ${props.isChecked - ? props.theme.toggleButton.borderColor - : props.theme.toggleButton.borderColorOff}; + fill: ${props.isDisabled && + props.theme.isBase && + props.theme.toggleButton.fillColorOff} !important; + + &:hover { + opacity: ${!props.isDisabled && "0.85"}; + } } + circle { - fill: ${props.isChecked - ? props.theme.toggleButton.disableFillCircleColor - : props.theme.toggleButton.disableFillCircleColorOff}; + fill: ${props.theme.toggleButton.fillCircleColor}; + opacity: ${props.isDisabled && "0.6"}; } + + opacity: ${props.isDisabled && "0.6"}; ` : css` rect { - fill: ${props.isChecked - ? props.theme.toggleButton.fillColor - : props.theme.toggleButton.fillColorOff}; - stroke-width: 1px; - stroke: ${props.isChecked - ? props.theme.toggleButton.borderColor - : props.theme.toggleButton.borderColor}; + fill: ${props.theme.toggleButton.fillColorOff}; } circle { - fill: ${props.isChecked - ? props.theme.toggleButton.fillCircleColor - : props.theme.toggleButton.fillCircleColorOff}; + fill: ${props.theme.toggleButton.fillCircleColorOff}; + opacity: ${props.isDisabled && "0.6"}; + } + + opacity: ${props.isDisabled && "0.6"}; + + &:hover { + rect { + fill: ${!props.isDisabled && + props.theme.toggleButton.hoverFillColorOff}; + } } `} } diff --git a/packages/editor/src/client/components/Editor.js b/packages/editor/src/client/components/Editor.js index 6fd16711e9..f6106bb2b4 100644 --- a/packages/editor/src/client/components/Editor.js +++ b/packages/editor/src/client/components/Editor.js @@ -216,6 +216,8 @@ function Editor({ const onSDKRequestEditRights = async () => { console.log("ONLYOFFICE Document Editor requests editing rights"); + const url = window.location.href; + const index = url.indexOf("&action=view"); if (index) { @@ -233,6 +235,8 @@ function Editor({ }; const onMakeActionLink = (event) => { + const url = window.location.href; + const actionData = event.data; const link = generateLink(actionData); @@ -370,33 +374,33 @@ function Editor({ assign(window, ["ASC", "Files", "Editor", "docEditor"], docEditor); //Do not remove: it's for Back button on Mobile App }; - const updateFavorite = (favorite) => { - docEditor.setFavorite(favorite); - }; + // const updateFavorite = (favorite) => { + // docEditor.setFavorite(favorite); + // }; const onMetaChange = (event) => { const newTitle = event.data.title; - const favorite = event.data.favorite; + //const favorite = event.data.favorite; if (newTitle && newTitle !== docTitle) { setDocumentTitle(newTitle); docTitle = newTitle; } - if (!newTitle) { - const onlyNumbers = new RegExp("^[0-9]+$"); - const isFileWithoutProvider = onlyNumbers.test(fileId); + // if (!newTitle) { + // const onlyNumbers = new RegExp("^[0-9]+$"); + // const isFileWithoutProvider = onlyNumbers.test(fileId); - const convertFileId = isFileWithoutProvider ? +fileId : fileId; + // const convertFileId = isFileWithoutProvider ? +fileId : fileId; - favorite - ? markAsFavorite([convertFileId]) - .then(() => updateFavorite(favorite)) - .catch((error) => console.log("error", error)) - : removeFromFavorite([convertFileId]) - .then(() => updateFavorite(favorite)) - .catch((error) => console.log("error", error)); - } + // favorite + // ? markAsFavorite([convertFileId]) + // .then(() => updateFavorite(favorite)) + // .catch((error) => console.log("error", error)) + // : removeFromFavorite([convertFileId]) + // .then(() => updateFavorite(favorite)) + // .catch((error) => console.log("error", error)); + // } }; const setDocumentTitle = (subTitle = null) => { @@ -417,6 +421,10 @@ function Editor({ } else { title = organizationName; } + + if (!documentIsReady) { + docTitle = title; + } document.title = title; }; @@ -441,8 +449,10 @@ function Editor({ if (index > -1) { const splitUrl = url.split("#message/"); + if (splitUrl.length === 2) { - const message = decodeURIComponent(raw).replace(/\+/g, " "); + const message = decodeURIComponent(splitUrl[1]).replace(/\+/g, " "); + docEditor.showMessage(message); history.pushState({}, null, url.substring(0, index)); } else { @@ -528,7 +538,8 @@ function Editor({ onRequestInsertImage, onRequestMailMergeRecipients, onRequestCompareFile, - onRequestRestore; + onRequestRestore, + onRequestHistory; // if (isSharingAccess) { // onRequestSharingSettings = onSDKRequestSharingSettings; @@ -538,6 +549,10 @@ function Editor({ onRequestRename = onSDKRequestRename; } + if (userAccessRights.viewVersionHistory) { + onRequestHistory = onSDKRequestHistory; + } + if (successAuth && !user.isVisitor) { onRequestSaveAs = onSDKRequestSaveAs; } @@ -569,7 +584,7 @@ function Editor({ onRequestMailMergeRecipients, onRequestCompareFile, onRequestEditRights: onSDKRequestEditRights, - onRequestHistory: onSDKRequestHistory, + onRequestHistory: onRequestHistory, onRequestHistoryClose: onSDKRequestHistoryClose, onRequestHistoryData: onSDKRequestHistoryData, onRequestRestore, diff --git a/web/ASC.Web.Api/Api/Settings/SettingsController.cs b/web/ASC.Web.Api/Api/Settings/SettingsController.cs index 9b1e379c90..342d01f6a2 100644 --- a/web/ASC.Web.Api/Api/Settings/SettingsController.cs +++ b/web/ASC.Web.Api/Api/Settings/SettingsController.cs @@ -385,32 +385,51 @@ public class SettingsController : BaseSettingsController _permissionContext.DemandPermissions(SecutiryConstants.EditPortalSettings); var settings = _settingsManager.Load(); - if (inDto.Themes != null) + if (inDto.Theme != null) { lock (locked) { - foreach (var item in inDto.Themes) - { - var settingItem = settings.Themes.SingleOrDefault(r => r.Id == item.Id); - if (settingItem != null) - { - settingItem.AccentColor = item.AccentColor; - settingItem.ButtonsMain = item.ButtonsMain; - settingItem.TextColor = item.TextColor; - } - else - { - if (_customColorThemesSettingsHelper.Limit == 0 || settings.Themes.Count() < _customColorThemesSettingsHelper.Limit) - { - if (item.Id == 0) - { - item.Id = settings.Themes.Max(r => r.Id) + 1; - } + var theme = inDto.Theme; - settings.Themes = settings.Themes.Append(item).ToList(); - } + if (CustomColorThemesSettingsItem.Default.Any(r => r.Id == theme.Id)) + { + theme.Id = 0; + } + + var settingItem = settings.Themes.SingleOrDefault(r => r.Id == theme.Id); + if (settingItem != null) + { + if (theme.Main != null) + { + settingItem.Main = new CustomColorThemesSettingsColorItem + { + Accent = theme.Main.Accent, + Buttons = theme.Main.Buttons + }; + } + if (theme.Text != null) + { + settingItem.Text = new CustomColorThemesSettingsColorItem + { + Accent = theme.Text.Accent, + Buttons = theme.Text.Buttons + }; } } + else + { + if (_customColorThemesSettingsHelper.Limit == 0 || settings.Themes.Count < _customColorThemesSettingsHelper.Limit) + { + if (theme.Id == 0) + { + theme.Id = settings.Themes.Max(r => r.Id) + 1; + } + + theme.Name = ""; + settings.Themes = settings.Themes.Append(theme).ToList(); + } + } + _settingsManager.Save(settings); } diff --git a/web/ASC.Web.Api/ApiModels/RequestsDto/CustomColorThemesSettingsRequestsDto.cs b/web/ASC.Web.Api/ApiModels/RequestsDto/CustomColorThemesSettingsRequestsDto.cs index be51ac0bd7..cc6828047f 100644 --- a/web/ASC.Web.Api/ApiModels/RequestsDto/CustomColorThemesSettingsRequestsDto.cs +++ b/web/ASC.Web.Api/ApiModels/RequestsDto/CustomColorThemesSettingsRequestsDto.cs @@ -28,6 +28,6 @@ namespace ASC.Web.Api.ApiModels.RequestsDto; public class CustomColorThemesSettingsRequestsDto { - public IEnumerable Themes { get; set; } + public CustomColorThemesSettingsItem Theme { get; set; } public int? Selected { get; set; } } diff --git a/web/ASC.Web.Core/Utility/Settings/CustomColorThemesSettings.cs b/web/ASC.Web.Core/Utility/Settings/CustomColorThemesSettings.cs index 851025aa99..c9ee4191a9 100644 --- a/web/ASC.Web.Core/Utility/Settings/CustomColorThemesSettings.cs +++ b/web/ASC.Web.Core/Utility/Settings/CustomColorThemesSettings.cs @@ -63,53 +63,107 @@ public class CustomColorThemesSettings : ISettings public class CustomColorThemesSettingsItem { public int Id { get; set; } - public string AccentColor { get; set; } - public string ButtonsMain { get; set; } - public string TextColor { get; set; } + public string Name { get; set; } + public CustomColorThemesSettingsColorItem Main { get; set; } + public CustomColorThemesSettingsColorItem Text { get; set; } public static List Default => new List { - new CustomColorThemesSettingsItem { + new CustomColorThemesSettingsItem + { Id = 1, - AccentColor = "#4781D1", - ButtonsMain = "#5299E0", - TextColor = "#FFFFFF" + Name = "blue", + Main = new CustomColorThemesSettingsColorItem + { + Accent = "#4781D1", + Buttons = "#5299E0" + }, + Text = new CustomColorThemesSettingsColorItem + { + Accent = "#FFFFFF", + Buttons = "#FFFFFF" + } }, - new CustomColorThemesSettingsItem { + new CustomColorThemesSettingsItem + { Id = 2, - AccentColor = "#F97A0B", - ButtonsMain = "#FF9933", - TextColor = "#FFFFFF" + Name = "orange", + Main = new CustomColorThemesSettingsColorItem + { + Accent = "#F97A0B", + Buttons = "#FF9933" + }, + Text = new CustomColorThemesSettingsColorItem + { + Accent = "#FFFFFF", + Buttons = "#FFFFFF" + } }, - new CustomColorThemesSettingsItem { + new CustomColorThemesSettingsItem + { Id = 3, - AccentColor = "#2DB482", - ButtonsMain = "#22C386", - TextColor = "#FFFFFF" + Name = "green", + Main = new CustomColorThemesSettingsColorItem + { + Accent = "#2DB482", + Buttons = "#22C386" + }, + Text = new CustomColorThemesSettingsColorItem + { + Accent = "#FFFFFF", + Buttons = "#FFFFFF" + } }, - new CustomColorThemesSettingsItem { + new CustomColorThemesSettingsItem + { Id = 4, - AccentColor = "#F2675A", - ButtonsMain = "#F27564", - TextColor = "#FFFFFF" + Name = "red", + Main = new CustomColorThemesSettingsColorItem + { + Accent = "#F2675A", + Buttons = "#F27564" + }, + Text = new CustomColorThemesSettingsColorItem + { + Accent = "#FFFFFF", + Buttons = "#FFFFFF" + } }, - new CustomColorThemesSettingsItem { + new CustomColorThemesSettingsItem + { Id = 5, - AccentColor = "#6D4EC2", - ButtonsMain = "#8570BD", - TextColor = "#FFFFFF" + Name = "purple", + Main = new CustomColorThemesSettingsColorItem + { + Accent = "#6D4EC2", + Buttons = "#8570BD" + }, + Text = new CustomColorThemesSettingsColorItem + { + Accent = "#FFFFFF", + Buttons = "#FFFFFF" + } }, - new CustomColorThemesSettingsItem { + new CustomColorThemesSettingsItem + { Id = 6, - AccentColor = "#11A4D4", - ButtonsMain = "#13B7EC", - TextColor = "#FFFFFF" - }, - new CustomColorThemesSettingsItem { - Id = 7, - AccentColor = "#444444", - ButtonsMain = "#6E6E6E", - TextColor = "#FFFFFF" + Name = "light-blue", + Main = new CustomColorThemesSettingsColorItem + { + Accent = "#11A4D4", + Buttons = "#13B7EC" + }, + Text = new CustomColorThemesSettingsColorItem + { + Accent = "#FFFFFF", + Buttons = "#FFFFFF" + } } }; } + +public class CustomColorThemesSettingsColorItem +{ + public string Accent { get; set; } + public string Buttons { get; set; } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2e886e23e4..c4c68ef878 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2791,6 +2791,7 @@ __metadata: file-loader: ^6.2.0 file-saver: ^2.0.5 firebase: ^8.10.0 + hex-to-rgba: ^2.0.1 html-webpack-plugin: 5.3.2 json-loader: ^0.5.7 playwright: ^1.18.1 @@ -13790,6 +13791,13 @@ __metadata: languageName: node linkType: hard +"hex-to-rgba@npm:^2.0.1": + version: 2.0.1 + resolution: "hex-to-rgba@npm:2.0.1" + checksum: adbb81babe9d06cf743b925e2104968bb32d9e10f0de328b71c9e20ff52da4028fadde4623261866eaed4d9a3b975fb325fa34f2422eb035e839ed71ec462431 + languageName: node + linkType: hard + "hey-listen@npm:^1.0.8": version: 1.0.8 resolution: "hey-listen@npm:1.0.8"